如果用户访问 5 个页面或用户在网站上停留 2 分钟，如何显示弹出窗口

Posted 2023-03-10

【中文标题】如果用户访问 5 个页面或用户在网站上停留 2 分钟，如何显示弹出窗口

【英文标题】：How to display a popup if the user visits 5 pages or if the user stay 2 minutes on the website

【发布时间】：2021-12-25 17:04:30

【问题描述】：

我想在网站上显示弹窗，场景是这样的。

如果用户访问 5 个页面显示弹出窗口 如果用户停留在网站上并花费 2 分钟显示弹出窗口 如果用户关闭弹窗，下次就不会再出现了。

工作正常，但我不知道如何解决问题 2（如果用户停留在网站上并花 2 分钟显示弹出窗口）

我尝试使用本地存储，但没有帮助。

这里是代码...

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);

);

【问题讨论】：

在页面加载时启动计时器并在 2 分钟后打开弹出窗口。

如果用户在网站的特定页面停留 2 分钟

我不明白。计时器为每一页重新启动。点击链接将重置计时器。

如果我们在 cookie 的帮助下这样做将是最好的选择，因为它会影响每个页面。如果用户在网站上停留 2 分钟而不是在特定页面上

首先你写了“如果用户在特定页面上停留2分钟”然后你写“如果用户在网站上停留2分钟不在特定页面上”。这个问题我不清楚。

【参考方案1】：

您可以将beforeunload 的时间存储在本地存储中，并在页面加载时设置计时器

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>

【讨论】：

嗨，@jabaa 我使用了你的代码，它解决了大部分问题。但是 upesy-cookie 只有在用户加载主页时才会增加。如果他转到其他页面，则不会增加。

@ZiaUllahZia 你写的 “它工作正常，但我不知道如何解决问题 2（如果用户停留在网站上并花费 2 分钟显示弹出窗口）” 在你的问题中，我为这个问题写了一个解决方案。您应该能够将我的解决方案实施到您的项目中。

我根据您的解决方案编辑了问题，但访问 5 页的问题仍然存在。你能看到吗？我希望如果用户访问网站上的 5 个页面，则会显示弹出窗口。

@ZiaUllahZia 请不要那样做。这不是堆栈溢出的工作方式。为后续问题提出一个新问题。 Stack Overflow 是一个问答平台，可以帮助有类似问题的未来用户。用户提出特定的编程问题并获得特定的答案。不要以使有效答案无效的方式修改您的问题。

是的，但是如果用户访问 5 个页面并且问题中提到了，我想解决这个问题。如何解决？我可以再问一个问题吗？

【参考方案2】：

您可以在 javascript 中使用 setTimeout()。

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

【讨论】：

如果用户在网站上停留 2 分钟而不是在特定页面上