In this tutorial, you will learn how to debug and test that the analytics event your fire into the datalayer are being triggered correctly. As some quick-background, to get tag manager to work you add the correct script to your webpage. To pass data back to Tag Manager, you need to add data into the 'data layer'. The data layer is a simple array contained on your page, like so:
To push an event into the data layer, you would do something like this:
The JSON you pass into it will be entirely up to you, so it could look like this:
When you pass events into the data layer it can be tricky to test if things have been pushed correctly and in the correct format. The first useful debugging tip that you need to know is that when data is successfully added into the data layer, Tag Manager will make a request similar to the one below:
In the Chrome network tab if you filter all the web page requests by the term collection, you can see if and what is being sent back to tag manager:
Now you have a simple way to track what data is being sent back to tag manager. When tracking event, it is likely that you will need to track clicks. this poses a problem as it forces the page to reload and you lose all the page data. To prevent this happening, 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 components contained within it and test to make sure the tag Manager scripts are firing off correctly. One useful thing to note 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 server, like so:
Armed with this, you should have no trouble debugging tag manager, enjoy!