Google Analytics App + Web 慢发送收集请求

Question

我正在尝试实施 GTM 和新的谷歌分析网络 + 应用程序，我可以看到将数据推送到谷歌分析需要 5 秒。 我已经测试了一个新的网站和点击链接的简单跟踪事件。

https://drive.google.com/file/d/1ILJLROq05OQwx3oXXCrOVXDeoxtbdKVw/view?usp=sharing

document.addEventListener('click', function (event) {
// If the clicked element doesn't have the right selector, bail
if (!event.target.matches('.btn-GA')) return;
// Don't follow the link
event.preventDefault();
// Log the clicked element in the console
console.log('Click......');
dataLayer.push({
"event": "wa_trigger",
"wa_event": "bounce_out",
"wa_action": "bounce_action",
"wa_label": "bounce_label"
});
}, false);

<a class="btn-GA" href="#">TEST CLICK</a>

================================================ =

更新::::

感谢您的回答。我注意到，如果我为 GA 调试 https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna 设置为 true 并且命中速度很快，并且首先其他人命中......但是当它关​​闭时，它会在 5 秒后结束。

这里是控制台的截图： https://drive.google.com/file/d/1a4n1WldESjbwTYkwiQ9PPX9RijigDApt/view?usp=sharing

这里的推和击 这里推=====>

a.js:6      Google - dataLayer.push():  event: wa_trigger
a.js:6 ~ Object: 
{
    event: "wa_trigger",
    wa_event: "logo-click"
}
Currently in memory:  {event: "wa_trigger", wa_event: "logo-click", eventCallback: ƒ}
a.js:6 ~ Call Stack
a.js:6 ~ 20.140 s since Document Start

这里是命中：====>

~ Data:  {
    events: [
        {
            en: "-logo-click",
            _et: "2258",
            ep.transport: "beacon"
        },
        {
            en: "page_view",
            _et: "36",
            ep.transport: "beacon"
        }
    ],
    v: "2",
    tid: "G-xxxxxx",
    gtm: "xxxx",
    _p: "109194814",
    sr: "1440x900",
    ul: "sv-se",
    cid: "2129079382.1587074095",
    dl: "http://www.site.lo/",
    dr: "",
    dt: "Site title",
    sid: "1587312754",
    sct: "5",
    seg: "1",
    _s: "2",
    statusCode: 204
}
~ Network Hit:  {frameId: 0, fromCache: false, initiator: "http://www.site.lo", ip: "216.58.207.206", method: "POST", …}
dlc.js:1208 ~ 26.208s since Document Start
dlc.js:1208 ~ 4.316s since last hit

Answer 1

它看起来是“设计的”：

您可能已经注意到的一件事是命中所需的延迟 被发送。加载页面时，您可以看到浏览器如何等待 在将命中发送到 GA 之前的几秒钟。这是因为 GAv2 自动批处理请求，这也是一个很棒的功能 升级。 您可能已经注意到的一件事是击中所需的延迟 被发送。加载页面时，您可以看到浏览器如何等待 在将命中发送到 GA 之前的几秒钟。这是因为 GAv2 自动批处理请求，这也是一个很棒的功能 升级。

通过将多个点击批处理到单个请求中，浏览器资源是 为其他事情而保存。延迟是由于浏览器等待查看 如果其他点击应与页面视图一起分派。

https://www.simoahava.com/analytics/getting-started-with-google-analytics-app-web/

确信点击会在用户离开页面之前触发！

Answer 2

好的，我已尽力解决问题，我使用 fetch 将数据直接发送到谷歌服务器并跳过 dataLayer，并使用回调函数和延迟 1 秒等待加载 GA。 在这里我是如何做到的，我不确定这是否是最好的方法，但它可以 100% 工作，而且我得到了旧数据和旧数据的准确数据。 BounceOut 是旧数据 GA1 Bounce_out 和 Bounce_out_source 是新的 GA2

 trackAndBounceOut(url, callback) {

        var action = this.state.bouncer.meta.partnerName
        var label = this.state.bouncerId
        var type = Session.page
        window.dataLayer = window.dataLayer || []

        var checkGA
        setTimeout(function () {
            if (ga && typeof ga.getAll == 'function') {
                checkGA = true
            } else {
                checkGA = false
            }

            if (checkGA) {
                var clientId = ga.getAll()[0].get('clientId');
                var adSenseId = ga.getAll()[0].get('adSenseId')
                var screenResolution = ga.getAll()[0].get('screenResolution')
                var userLanguage = ga.getAll()[0].get('language')
                var docReferrer = ga.getAll()[0].get('referrer')
                var docLocation = ga.getAll()[0].get('location')
                var debug = false       // Enable for debug!!
                var doctTitle = document.title

                var stringUrlData = {
                    v: 2,
                    tid: 'G-XXXXXXXXXX',
                    gtm: 'XXXXXX',
                    _p: adSenseId,
                    sr: screenResolution,
                    ul: userLanguage,
                    cid: clientId,
                    dl: docLocation,
                    dr: docReferrer,
                    dt: doctTitle,
                    _dbg: debug ? 1 : '',
                }

                var urlString = Object.keys(stringUrlData)
                    .filter(analyticsKey => stringUrlData[analyticsKey])
                    .map(analyticsKey => analyticsKey + '=' + encodeURIComponent(stringUrlData[analyticsKey]))
                    .join('&')

                var bounce_out = 'en=Bounce_Out&ep.Action=' + action
                var bounce_out_source = 'en=Bounce_Out_source&ep.Action=' + type + '_' + action + '&ep.Label=' + type

                fetch('https://www.google-analytics.com/g/collect?' + urlString + '&' + bounce_out, { method: 'POST' })
                fetch('https://www.google-analytics.com/g/collect?' + urlString + '&' + bounce_out_source, { method: 'POST' })

                if (Session.page == 'Partner') {
                    window.dataLayer.push(
                        { 'event': 'pageEvent', 'Category': 'Partner page', 'action': 'Bounce Out', 'label': Session.page + '_' + action },
                    )

                    var partner_bounce_out = 'en=Partner_bounce-out&ep.Action=' + action
                    fetch('https://www.google-analytics.com/g/collect?' + urlString + '&' + partner_bounce_out, { method: 'POST' })
                }
            }

            callback(action, type, label, url)
        }.bind(this), 1000);
    }

    trackAndBounceOutRedirect(action, type, label, url) {
        window.dataLayer.push(
            {
                'event': 'bounceOut',
                'action': action,
                'label': type + '_' + label,
                'eventCallback': () => {
                            window.location.href = url
                },
                'eventTimeout': 1000
            }
        )
    }

   // And here then we call the main function and send the callback one:
        this.trackAndBounceOut(this.state.bouncer.url, this.trackAndBounceOutRedirect)