In this tutorial, you will learn how to wire up, add, and debug custom data and events from your application into the Google Tag Manager (GTM) data layer. To install Tag manager on your site, you need to create an account here. After creating an account, you will be given access to a script that gets called on every page on your site. To pass tracking data back to GTM, you need to add data into the 'data layer'. The data layer object is simply a Javascript array that is created by the GTM script when the page loads. If you inspect the item in your browser, you will see on page load that it looks like this:
To push an event into the data layer, you could write some code similar to this:
The JSON you pass into it will be entirely up to you, so it could look like this:
When you need to pass events into the data layer it can be tricky to test if your code worked as expected. One useful debugging tip is that when data is successfully added into the data layer, GTM will make a request similar to the one below:
https://www.google-analytics.com/r/collect
Assuming you are using Chrome, open the dev-tools network tab. Filter all the requests by the termcollection. If everything is working you should be able to see the data being passed back to GTM:
Now you have a simple way to track what data is being sent back to GTM. If you want to track all user interactions then it is likely that you will need to track clicks. This poses a problem as it forces the page to reload and you lose the ability to see the data being passed back in the network tab. To prevent losing the request data for a page when a redirect is made, make sure you enable the preserve log option within the network and the console tabs, like so:
Now you can load your page, click on any element and even get redirected while still being able to test the GTM scripts are firing off correctly. Another handy tip is that within the collect response, if you scroll down to the query-string section, you should be able to see exactly what data is being passed back to the Tag manager server, like so:
Armed with this, you should have no trouble debugging Tag manager, happy coding!
