谷歌分析应用程序+网络慢速发送收集请求

Question

我正在尝试实现GTM和新的谷歌分析web+应用程序，我可以看到将数据推送到谷歌分析需要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调试设置true，它会非常快https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna命中很快，其他人先命中。。但当它停止时，命中在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是旧数据GA1Bounce_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)