Tips for debugging your Google Tag Manager implementations

I’m going to share some of the tips and tricks I’ve learnt (and that I use on my daily basics work) in the almost past 3 years since Google Tag Manager was released.

Tip #1 – Grabbing a dataLayer value from the console

If we want to grab the current value in the Google Tag Manager’s dataLayer, it offers a built-in get method for it. When GTM loads a global object is created named google_tag_manager, that has a key that is the current GTM Id value.

google_tag_manager["GTM-XXXX"]

And it the we can get a dataLayer value using dataLayer.get(‘value’)

google_tag_manager["GTM-XXXX"].dataLayer.get('event')

This will return the current value for the ‘event’ key, at the time we execute it. As all sites have a different GTM Id string, we could use it this way to it works on any site, as the Id will be grabbed dinamically:

google_tag_manager[(Object.keys(google_tag_manager)[1])].dataLayer.get('event')

Tip #2 – Using console.table for a fancy view of your objects

Most common use of the “console” command is to print values into your console tab, but we can do some other nice things, like easily printing a full object in a table using the “console.table” command.

For example for printing the whole dataLayer into a fancy table like this:

console.table(dataLayer);

But this has became a must for me, when trying to debug my Enhanced Ecommerce implementations, for example for the products impressions, cart content, or for the transactions. We could view with a quick look if all our data is there, and in the format we really want. It’s so easy to detect any misspelling on the key’s, or some wrong typed key in some of the pushes, or whatever.

Combining it with the previous tip is even more helpful. Here is an example for checking the sent product items within an standard ecommerce push for Google Tag Manager:

console.table(google_tag_manager[(Object.keys(google_tag_manager)[1])].dataLayer.get('transactionProducts'))

Or here is goes an example to see all the product impression details sent within a category page using Enhanced Ecommerce:

console.table(google_tag_manager[(Object.keys(google_tag_manager)[1])].dataLayer.get('ecommerce.impressions'))

isn’t it nice, clear and helpful?

Tip #3 – Printing the dataLayer in a plain text format

Any browsers allows you to print your dataLayer just typing it into the console, but when you have a large pushes it’s a bit difficult to search for the data, or if we have a lot of pushes you may end going crazy trying to look for something.

All browsers have the JSON object that can easy and help us debugging and checking our dataLayer. We can get a plain text version of our dataLayer using the following command:

JSON.stringify(dataLayer,true,"\t")

Tip #4 – Beautifying JavaScript code with Chrome

Most of the actual scripts are minified to save space, and in some way to ofuscate the code. If you need to dig inside the pages code it’s difficult to find things if the code is ofuscasted/uglfied/minified, and till now I’ve been copying the JavaScript code, copying it on some online service like ( asdad ) and copying the returned code back to my editor, what takes a lot of time.

Today by a lucky change, I’ve found that Chrome DevTools already has an in-built code beautifier feature!.

Just found this little gem on Chrome DevTool #js #chrome #timesaver #tidy #debugging pic.twitter.com/BN151Hfm9G

— David Vallejo (@thyng) August 12, 2015

Do you have any other trick/tip that makes your daily work easier?, Please share them.
Did you find those tips are useful?, Let me know about it.