How to display a popup if the user visits 5 pages or if the user stay 2 minutes on the website

Question

I want to display the popup on the website and the scenario is like that.

1. If the user visits 5 pages display the popup
2. If the user stays on the website and spends 2 minutes display the popup
3. If the user closes the popup it will not appear again next time.

It is working fine but I do not know how to solve problem 2 (if the user stay on the website and spend 2 minutes displaying a popup)

I tried it with local storage but did not help.

Here is the code...

var popup = '<div class="popup-cover" id="sub-popup">';
            popup += '<div id="subscribe-popup" class="popup">';
            popup += '<a class="close" onclick="closePopup()">&times;</a>';
            popup += '<h1 class="sub-title">Subscribe here!</h1>';
            popup += '<p class="sub-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>'
            popup += '<a class="btn sub-btn btn-nature" onclick="hidePopup()">Subscribe</a>';
            popup += '</div>';
            popup += '</div>';

function closePopup() {
    $('#sub-popup').remove();
    localStorage.displayPopup = 0;
}

function hidePopup() {
    $('#sub-popup').remove();
    localStorage.displayPopup = 0;
    window.open("https://upesy.us17.list-manage.com/subscribe/post?u=4f67f99a5b6bf0f744449df73&id=45f50ab267", "_blank");
}

jQuery(document).ready(function($) {

    function getCookieVal(offset) {
        var endstr = document.cookie.indexOf(";", offset);
        if (endstr == -1)
            endstr = document.cookie.length;
        return unescape(document.cookie.substring(offset, endstr));
    }

    function GetCookie(name) {
        var arg = name + "=";
        var alen = arg.length;
        var clen = document.cookie.length;
        var i = 0;
        while (i < clen) {
            var j = i + alen;
            if (document.cookie.substring(i, j) == arg)
                return getCookieVal(j);
            i = document.cookie.indexOf(" ", i) + 1;
            if (i == 0)
                break;
        }
        return null;
    }

    function SetCookie(name, value) {
        var argv = SetCookie.arguments;
        var argc = SetCookie.arguments.length;
        var expires = (2 < argc) ? argv[2] : null;
        var path = (3 < argc) ? argv[3] : null;
        var domain = (4 < argc) ? argv[4] : null;
        var secure = (5 < argc) ? argv[5] : false;
        document.cookie = name + "=" + escape(value) +
            ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
            ((path == null) ? "" : ("; path=" + path)) +
            ((domain == null) ? "" : ("; domain=" + domain)) +
            ((secure == true) ? "; secure" : "");
    }

    function displayPopup() {
        var expdate = new Date();
        var visit;
        expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));
        if (!(visit = GetCookie("upesy-cookie")))
            visit = 0;
        visit++;

        SetCookie("upesy-cookie", visit, expdate, "/", null, false);
        
        if (visit >= 4) {
            if(localStorage.displayPopup != 0) {
                setTimeout(function(){
                    $(document.body).append(popup);
                    SetCookie("upesy-cookie", 0);
                }, 2000);
            }
        }
    }
    
    //window.onload = displayPopup
    $(window).on("load", displayPopup);

});

Answer 1

You can store the time on beforeunload in local storage and set a timer on page load

if (localStorage.getItem('displayPopup') !== '0') {
  const openTime = Date.now();

  const totalVisitTime = +localStorage.getItem('totalVisitTime');
  document.getElementById('container').innerHTML = totalVisitTime;

  setTimeout(() => {
    alert('2 Minute Timeout');
    localStorage.setItem('displayPopup', '0');
    localStorage.removeItem('totalVisitTime');
  }, 12e4 - totalVisitTime);

  window.addEventListener('beforeunload', () => {
    if (localStorage.getItem('displayPopup') === '0') return;
    localStorage.setItem(
      'totalVisitTime',
      totalVisitTime + Date.now() - openTime
    );
  });
}

<div id="container"></div>

Answer 2

You can use setTimeout() in JavaScript.

setTimeout(() => {
    // Open popup
}, 120000); // Amount of time to wait, in miliseconds