Google analytics 使用Google Tag Manager(GTM)在单页应用程序(SPA)网站上卸载事件之前

Google analytics 使用Google Tag Manager(GTM)在单页应用程序(SPA)网站上卸载事件之前,google-analytics,react-router,single-page-application,google-tag-manager,onbeforeunload,Google Analytics,React Router,Single Page Application,Google Tag Manager,Onbeforeunload,我想在SPA网站上跟踪beforeunload事件,因为我想通过GTM将数据发送到数据层。我想跟踪视频观看时间(HTML5播放器),并在用户离开当前页面之前将数据发送到同一网站上的另一个页面或完全不同的页面 有没有办法通过GTM自定义HTML实现这一点?假设您有办法在变量中捕获视频时间,您可以使用beforeunload事件的事件侦听器将该信息发送到Google Analytics。我在我的一个网页上这样做是为了了解用户打开页面的时间 以下是我使用的代码: <!-- Global site

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


有没有办法通过GTM自定义HTML实现这一点?

假设您有办法在变量中捕获视频时间,您可以使用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>

//如果存在退出cookie,则禁用跟踪
if(document.cookie.indexOf(“ga-disable-ga\u MEASUREMENT\u ID=true”)>-1){
窗口[“ga-disable-ga_测量_ID”]=真;
}
window.dataLayer=window.dataLayer | |[];
函数gtag(){dataLayer.push(参数);}
gtag(“js”,新日期());
gtag(“配置”、“GA_度量_ID”、{“匿名化_ip”:true,“cookie_标志”:“SameSite=None;Secure”});
window.addEventListener(“预卸载前”,函数(e){
gtag(‘事件’、‘花费的时间’{
“事件类别”:“页面上的时间”,
“事件标签”:例如timeStamp.toString,
“值”:1,
“传输类型”:“信标”
});
删除e.returnValue;
});
第一部分在头部,第二部分在身体末端

我将event.timeStamp值放在event_标签中;你可以把你的视频时间,格式,但你喜欢进入该领域以及

我不确定我是否需要可选值字段,但我有它

transport_类型的信标告诉Google,当用户代理有机会异步传输数据时,Google将异步传输数据,而不会延迟卸载或下一次导航

要查看人们打开我的页面花了多长时间,请转到:

谷歌分析->行为->事件->概述

我单击事件类别(在我的例子中,单击页面上的时间),然后单击事件标签以获得所有值的列表