Google analytics App + Web slow send collect request - google-analytics

Question

I am trying to implement GTM and new Google analytics web + app and I can see its taking 5sec to push data to google analytics.
I have tested with a fresh site and simple tracking event on click in link.
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>
================================================
UPDATE::::
Thanks for your answer. I noticed its really fast if I set true for the GA debug https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna and the hit comes fast and first others hit.. but when its off the hit comes at then end after 5sec.
And here screenshot from console:
https://drive.google.com/file/d/1a4n1WldESjbwTYkwiQ9PPX9RijigDApt/view?usp=sharing
Here the push and hit
Here push =====>
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
And here the hit: ====>
~ 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

It looks to be "by design":
One thing you might have noticed is the delay it takes for the hit to
be sent. When you load the page, you can see how the browser waits a
few seconds before dispatching the hit to GA. This is because GAv2
batches requests automatically, which, again, is a great feature
upgrade.
One thing you might have noticed is the delay it takes for the hit to
be sent. When you load the page, you can see how the browser waits a
few seconds before dispatching the hit to GA. This is because GAv2
batches requests automatically, which, again, is a great feature
upgrade.
By batching multiple hits into a single request, browser resources are
saved for other things. The delay is due to the browser waiting to see
if other hits should be dispatched together with the Page View.
https://www.simoahava.com/analytics/getting-started-with-google-analytics-app-web/
Be confident that the hit will fire before the user leaves the page !

Answer 2

Ok, I did my best to fix the issue and I used fetch to send the data directly to google server and skip the dataLayer and by using Callback function and a bit delay 1sec to wait for GA to be loaded.
Here how I did it and I am not sure if this is the best way or not but its working 100% and I got exact data on both old and old data.
BounceOut is the old data GA1
Bounce_out and Bounce_out_source is the new one 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)