追踪返回按钮点击事件

Question

作为我们新产品指标的一部分，我们需要衡量页面上的后退按钮点击次数。

由于该网站不是AJAX并且我们没有使用“pushState”，所以在浏览器中单击后退时，“popState”没有触发。

捕获后退按钮事件的唯一目的是注册分析事件。

经过几个小时的谷歌搜索和尝试多种不同的解决方案，我却一无所获 - 奇怪的是，JavaScript似乎没有为这样的任务提供适当的工具。

话虽如此，这并不是一个有效的回答 :) 您会如何处理这样的要求？

请注意 - 赏金奖励的答案没有解决我的问题，但由于付出了努力，我已授予了赏金。这是最佳答案的情况下。

- Noy

---

我认为你需要实现History API，并将谷歌分析的track函数用作回调。 - Toni Michel Caubet

可以在localStorage中存储一堆URL，然后将当前页面的location、referrer以及堆栈中最后访问的URL进行比较，以推断用户是否从网站中的另一个页面返回。请注意，在翻译过程中保持原文意思不变。 - pawel

我认为只使用历史记录 API 更简单，正如你所说；否则你可能会将后退按钮与自愿点击链接混淆（再次）。 - Toni Michel Caubet

@ToniMichelCaubet 是的，这取决于目标是测量用户从页面返回（无论如何）还是比较后退按钮与其他导航方式的使用情况（即导航模式与UI交互）。 - pawel

我想知道如果不是 AJAX，您如何区分浏览器的后退按钮和其他点击？您是否可以“混合”您的技能/技术/应用程序？ - Micromega

Answer 1

你可以捕获 window.onbeforeunload() 事件并使用 cookies 存储每次后退按钮点击的数量，你可以更新 cookie。试一下。

---

使用 popstate 和 cookies 可以实现这一点，我使用了一个名为 cookie 的插件。

同时将它们导入到你的页面中。

以下是导入代码：

<script src="/jqueries/jquery.cookie.js"></script>

这是我使用的代码。

$(window).on('popstate', function () {
    var val = 1;
    if (typeof $.cookie('example') === 'undefined') {
        //no cookie
    } else {
        //have cookie
        val = parseInt($.cookie("example")) + 1;
        $.removeCookie("example");
    }
    $.cookie("example", val, { expires: 7 });
    //alert($.cookie("example"));
});

这只是一个粗糙的代码，您可以按照需求进行修改。它将会创建 pushstate。

将此代码添加到脚本中...

HTML 中仅含 DEMO 内容。

<input type="text" id="t1" />
<input type="text" id="t2" />
<input type="text" id="t3" />
<input type="text" id="t4" />
<input type="text" id="t5" />

以下是不带AJAXify的HTML5 pushstate脚本。请尝试使用这些脚本...

    $('#t1').click(function () {
        if (window.history.replaceState) {
            window.history.pushState('', 'Title', '/YourPagename/123/1234');
        }
    });
    $('#t2').click(function () {
        if (window.history.replaceState) {
            window.history.pushState('', 'Title', '/YourPagename/123/12345');
        }
    });
    $('#t3').click(function () {
        if (window.history.replaceState) {
            window.history.pushState('', 'Title', '/YourPagename/123/123456');
        }
    });

很快。像这样为其他人声明

通过这样做，是有可能的。

这部分是为了获取传递的URL值，t1、t2将获得与URL相关联的值。

var ourl = "", t1 = "", t2 = "";
if (window.history.replaceState) {
    ourl = document.URL.toString();
    var url = document.URL.toString().replace('http://', '');
    var cnt = 0;
    for (i = 0; i < url.length; i++) {
        if (url[i] == '/') {
            cnt++;
        }
        else if (cnt == 2) {
            t1 += url[i];
        }
        else if (cnt == 3) {
            t2 += url[i];
        }
    }
}

- Ganesh Gaxy

---

据我所知，window.onbeforeunload()在离开页面时触发，而不仅仅是在点击返回按钮时触发。 - Noy

好的，据我所知并且实验过，'popstate' 只有在 pushstate 之前触发 - 你的处理程序永远不会触发。 - Noy

不需要将导航AJAX化，我更新了代码，它具有pushstate但没有AJAX化，并且支持popstate。请稍等一分钟。 - Ganesh Gaxy

@NoyGabay，我做到了，请看一下修改后的代码。我让它变得简单了。你可以按照你想要的方式进行修改。 - Ganesh Gaxy

非常抱歉我的评论表达不够清晰 - 我知道解决方案需要我在所有导航元素中使用'pushstate'（这是很多的）。我正在寻找一种不那么侵入式的方法。话虽如此，感谢你的回答！即使只是为了努力，我也会给你点赞。 - Noy

Answer 2

我不确定是否有任何快捷方式，但如果没有其他方法可行，您可以尝试以下逻辑。

如果您无法直接测量浏览器返回按钮的点击次数，则可以测量网站中总后退和前进按钮的点击次数。您可以减去这个值并得到您想要的结果。

使用以下代码。

$('a').on('click', function(e) {
        if ($(this).attr('href') != 'javascript:void(0)') { // condition to check if its redirect href 
            e.preventDefault();
            localStorage.setItem('website_called', true);
            location.href = $(this).attr('href');
        }
    });

    window.onload(function() {
        if ((document.referrer).indexOf('yoursite.com') != -1 && localStorage.setItem('website_called') == false) {
            var backButtonUsed = localStorage.setItem('backButtonUsed');
            backButtonUsed = backButtonUsed + 1;
            localStorage.setItem('backButtonUsed', backButtonUsed);
        }
        localStorage.setItem('website_called', false);
    });

- Sauryabhatt

---

我已经添加了代码到我的答案中，这可能会有所帮助。请检查语法并根据您的要求进行修改。 - Sauryabhatt

我也可以从服务器访问日志中推断出来 - 组装流程并确定用户是否倒退 - 但这不是我要找的。我想知道用户何时点击了后退按钮，而不是使用站点内置导航。 - Noy

我不确定你想要什么，但如果你想知道浏览器返回按钮被点击的次数，你可以在localStorage->backButtonUsed中检查它，因为只有在浏览器返回按钮被点击时website_called标志为false时才会增加。 - Sauryabhatt

如果您想要追踪返回按钮被点击的页面，您可以在window.unload事件中编写window.load代码，并在本地存储值增加的位置编写您的代码。 - Sauryabhatt