How it works: Google Tag Manager

What is Google Tag Manager (GTM)?

Essentially, GTM is a javascript library that is included on your website in the same manner as one would include jQuery. When you add the Google Tag Manager container snippet to the page, all it does is load a library from Google servers.

According to Simo Ahava, an analytics expert, “Google Tag Manager is a tool through which you can run your Google Analytics tracking code. It is NOT Google Analytics, nor is it any type of analytics tool. Google Tag Manager is a wrapper for sending commands to Google Analytics”.

Analytics tools, like Google Analytics (GA), measure data in your marketing channels. They don’t create data, nor do they feed anything back into the site. Google Analytics is an excellent tool for reading into user behaviors and determining trends. The data collected from these trends covers everything from organic search terms to products viewed or added to cart. Google Analytics enables you to collect all this data for easy analysis.

You can accomplish the same things with GTM that you can by using the GA _gaq.push() and ga(‘send’) commands, for example sending a pageview event when the user visits a particular page or a tracking event when a user clicks a specific element. However, using GA, we cannot do the same things that GTM can do.

The Power of Google Tag Manager

GTM allows you to insert snippets of javascript that execute on your site. Those snippets can execute based on specific triggers (e.g. selecting a shipping method) or simply when the page loads. Also, GTM triggers utilize conditionals that allow you to execute only on specific pages, or when certain criteria are met.

Additionally, leveraging GTM and the dataLayer gives you the ability to supplement trend data available in GA with more granular information that can provide deeper insight into end-user behavior patterns. This supplemental information could be used to suggest more accurate and targeted marketing campaigns and UI usability enhancements.

One important distinction is that GA commands are delivered via committed javascript code that must be merged, built, and deployed before accomplishing the desired outcome. But using GTM, we can add, delete, or edit a command and have that change instantly reflected on any environment (sandboxes, staging. production)*.

*One HUGE caveat on that last part: Yes, you can add javascript to a site directly from the GTM interface without committing javascript code, but to really get the most out of GTM, it is common to harness the power of the ‘Data Layer’ which does require committed code changes. More on the Data Layer in a bit.

In this way, GTM is a double-edged sword. It provides a quick way to update tagging commands in near real-time but also can introduce nasty bugs if not used properly. Keep in mind that, with javascript, you can fully manipulate the DOM by adding or removing DOM nodes, changing element styles, and causing errors that stop the execution of other javascript on the page…yikes!

The Data Layer

Now that we have discussed what GTM is, let’s discuss its most useful feature, the Data Layer. Again, quoting Simo Ahava, “A Data Layer is a data structure which ideally holds all data that you want to process and pass from your website… to other applications that you have linked to.”

Basically, it is a javascript array. Inside this array, information about the user’s interactions or the product catalog can be stored and sent to GA or to any other 3rd party entity. This is the real super-power of GTM. Instead of having to scrape the DOM for flat information about what’s going on on the page, the dataLayer array can be filled with information from the server side before the page even loads. Often this server-side data is not available to be scraped from the markup (e.g. user ID, product variant ID, geolocation info, etc.). Also, data pulled from the backend is less prone to error caused by the markup being changed.

The most common use case for the GTM dataLayer I have seen is implementing enhanced eCommerce tracking in GA. Using the dataLayer, we can gain much greater insight from our GA data, especially in the checkout funnel.

To verify the implementation of dataLayer information, you can inspect the dataLayer in your browser console, or you can use chrome browser plugins to see the events and subsequent data firing in real time. There are many of these browser plugins available, such as: DataLayer Checker, Tag Assistant (from google), and Dataslayer. Using these browser plugins allows developers and QA staff to verify work without having to gain access to a client’s GTM/GA accounts and/or having to wait for events to propagate into those systems for verification.

To wrap up, I want to again call out Simo Ahava (www.simoahava.com) who I previously described as an analytics expert. This doesn’t begin to explain the depths of knowledge he possesses on the topics of GTM and GA. If you ever have questions about how to do something with dataLayer, GTM, or GA, his blog should be the first place you visit. I referenced information from his blog while creating this post and have learned so much in the past from reading his excellent work.

References: