How do we detect repeat visitor IP and create a condition in liquid? - timer

Question

I have a custom page, created with Shopify liquid -> https://shop.betterbody.co/pages/nazreen-joel-video-sales-letter-16-july
I have set the timer to load within 3seconds for the sales element to appear.
The question is, I would like to set an if/else condition to immediately show these sales element for repeat visitors. There is a timer.js that sets the time for the sales element to appear. If its a new visitor, timer will trigger, else server will not load the timer. I can't seem to find any solution online. Do I detect visitor IP? or is there any best solution to do this?
Here is the code inside theme.liquid,
{{ 'timer.js' | asset_url | script_tag }} .
Timer.js code:
$(document).ready(function(){
setTimeout(function() {
$(".refference").css({paddingTop: "350px"});
// $("#early-cta, #guarentee, #payments, #info, #details").show();
$("#early-cta, #guarentee, #payments, #info, #details").fadeIn(3000);
}, 3000);
});
Pls help.

Answer 1

You could look into localStorage to do this.
https://www.w3schools.com/htmL/html5_webstorage.asp
Localstorage is used to store data within the browser without any expiration date.
When a visitor visits the site for the first time, you could use localStorage to detect if the user has been to your site, if the user hasn’t, you run the timer, and set a variable that the user has visited.
Upon revisiting the site, you use localStorage and check against the variable to see if the user has been to your site or not, and trigger the script accordingly.

Answer 2

Expounding on #Jacob's answer and my comment, you can do what you need to do with JavaScript and localStorage.
So something like this to add:
function setVisited() {
// object to be added to localStorage
let obj = {
timestamp: new Date().getTime()
// add more stuff here if you need
// someValue: "foo",
// anotherValue: "bar"
}
// add object to localStorage
localStorage.setItem(
"hasVisited", // key that you will use to retrieve data
JSON.stringify(obj)
);
}
and something like this to retrieve:
function getVisited() {
return JSON.parse(localStorage.getItem("hasVisited"));
}
// returns: {timestamp: 1533398672593} or null
Also, as an additional condition to your event, you can choose to "expire" the user's localStorage value by checking the timestamp against the current timestamp and comparing it against a predefined expiration duration.
For example, if I wish to consider a visitor who has not returned 7 days as a new visitor:
let expiration = 86400 * 1000 * 7; // 7 days in milliseconds
function isNewVisitor() {
// get current timestamp
let timeNow = new Date().getTime();
let expired = true;
// if getVisited doesn't return null..
if (getVisited()) {
let timeDiff = timeNow - getVisited().timestamp;
expired = timeDiff > expiration;
}
// if the visitor is old and not expire, return true
if (!getVisited() || expired) {
return true;
} else {
return false;
}
}
So, to integrate with your current function, we will just check the condition before setting the timeout:
// let timeout be 3000 if the visitor is new
let timeout = isNewVisitor() ? 3000 : 0;
setTimeout(function() {
$(".refference").css({paddingTop: "350px"});
$("#early-cta, #guarentee, #payments, #info, #details").fadeIn(3000);
}, timeout);
// set the visited object for new visitors, update for old visitors
setVisited();
Check out the fiddle here: https://jsfiddle.net/fr9hjvc5/15/