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

0
votes

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.

2
timerconditional-statementsshopifyliquid
this is more of a javascript question than liquid. in fact i don't believe Liquid has any functions or hooks relating to returning visitors other than for analytics. set your tags to include javascript and you will get answers in no time. – Abu Uzayr

2 Answers

2
votes

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.

1
votes

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/