使用 Google Tag Manager (GTM) 在单页应用程序 (SPA) 网站上的 beforeunload 事件答案

我想在 SPA 网站上跟踪 beforeunload 事件，因为我想通过 GTM 将数据发送到数据层。我想跟踪视频观看时间（HTML5 播放器）并在用户离开当前页面之前将数据发送到同一网站上的另一个页面或完全不同的页面。

有没有办法通过 GTM 自定义 HTML 完成这项工作？

【问题讨论】：

标签： google-analytics react-router single-page-application google-tag-manager onbeforeunload

【解决方案1】：

假设您有办法在变量中捕获视频时间，您可以使用 beforeunload 事件的事件侦听器将该信息发送到 Google Analytics。我在我的一个网页上这样做是为了了解用户打开页面的时间。

这是我正在使用的代码：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
    // Disable tracking if the opt-out cookie exists
    if (document.cookie.indexOf("ga-disable-GA_MEASUREMENT_ID=true") > -1) {
        window["ga-disable-GA_MEASUREMENT_ID"] = true;
    }

    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag("js", new Date());
    gtag("config", "GA_MEASUREMENT_ID", { "anonymize_ip": true, "cookie_flags": "SameSite=None;Secure" });
</script>

<script> 
    window.addEventListener("beforeunload", function (e) {
        gtag('event', 'Time_Spent', {
            'event_category': 'Time_on_page',
            'event_label': e.timeStamp.toString,
            'value': 1,
            'transport_type': 'beacon'
        });

        delete e.returnValue;
    });
</script>

第一部分在头部，第二部分在身体末端。

我将 event.timeStamp 值放在 event_label 中；您也可以将您的视频时间（按您喜欢的格式）放入该字段。

我不确定是否需要可选值字段，但我有。

transport_type 信标告诉 Google 在用户代理有机会时异步传输数据，而不会延迟卸载或下一次导航。

要查看人们打开我的页面的时间，我会转到：

Google Analytics -> 行为 -> 事件 -> 概览

我单击事件类别（在我的例子中为 Time_on_page），然后单击事件标签以获取所有值的列表。

【讨论】：