Google Tag Manager is a great solution for implementing Web analytics on AJAX-heavy apps. But at times it may seem like it adds more complexity than it relieves. Synchronizing data and events in the dataLayer is an example of this. Sometimes you will want to fire a tag that aims to send data that will show up in the dataLayer after an AJAX call and because you don’t have any guarantee about the timing of this AJAX call you may run into a bit of a race condition.
Fire Events With Data
In the world of javascript you might rely on a call back function to solve this problem. This same idea works with Google Tag Manager, but it has its own way of going about it. The Google Tag Manager solution to this type of problem is to push an event to the dataLayer with the new AJAX delivered data and then set firing rules for any beacons that depend on that information to said event. For instance:
dataLayer.push({
"newDataAboutX" : {
"thing1" : "xyz",
"thing2" : 12
},
"event" : "dataAboutXReceived"
});Then you would set all beacons that require data about X to fire when:
{{event}} Equals dataAboutXReceived
You can then use dataLayer variables, {{newDataAboutX.
Google Tag Manager ‘eventCallback’ Function
If that isn’t enough, Google Tag Manager offers an ‘eventCallback’ function for any object that is pushed to the dataLayer. This is a callback function that is called once all tags that are triggered by this rule are fired. This is often used to navigate to another page after capturing data about the event that would normally cause a URL change. ie: outbound link clicks, navigation clicks or Enhanced Ecommerce promotion clicks, product listing clicks and product adds to cart.
For example:
dataLayer.push({
'event':'productClick',
'ecommerce':{
'click':{
'actionField':{'list':'Search Results'},
'products':[{
'name': productObj.name,
'id': productObj.id,
'price': productObj.price,
'brand': productObj.brand,
'category': productObj.cat,
'variant': productObj.variant
}]
}
},
'eventCallback':function(){
document.location = productObj.url
}
});