Introduction to Google Tag Manager (for web developers who know Google Analytics)

As a web developer, you know Google Analytics (GA). Probably you've dropped the GA snippet into more than one website, maybe you've even used its Javascript API to implement tracking at the event level.

Google Tag Manager (GTM) is a related tool, but on a higher level and thus with much more power. GTM is not a replacement for GA. Rather, it can make GA configurable without changing anything in the application's code base (and much more beyond, see below).

Only prefer GTM if the customer requests it, or if he is updating his tracking requirements frequently.

The idea behind GTM

The "tag" in "Google Tag Manager" has nothing to do with HTML tags, nor with word tags or tag clouds. In the ecommerce world, a tag is a little piece of software that gets tagged onto a visitor's client Show archive.org snapshot , similar to a name tag or airport bag tag on your luggage. These tags can be used for customer identification, conversion tracking, web analytics and more.

The classic Google Analytics tracking snippet is an example of such a tag: it is integrated into each page, executed in the client, and used for traffic analysis (page views or more, depending on how the web application makes use of it).

However, smart people figured needing to modify the source code of a web application each time a tag needs to be changed, added or removed, is annoying. That's why they built GTM: The inclusion of the GTM snippet is the last thing that needs to be changed in the application's code. All further tag management happens inside GTM (which makes GTM a huge XSS machine, actually).

This goes even beyond injecting Javascript snippets and tracking page views. Even event tracking can be modeled inside GTM, using a powerful system of a few models. The target website does not need to know anything about how it is tracked.

How does it work

GTM has a simple architecture of only three base models: tags, triggers, and variables.

You create a tag by selecting one tag type from a huge list (e.g. Google Analytics), and configure it appropriately (e.g. set GA tracking ID etc).

A tag does nothing until it is activated by a trigger. So you add a trigger (e.g. "page view") and connect it to the tag. More complex triggers (e.g. "external link clicked") need extra context information.

This is where variables are used. You can create new variables (e.g. "element src attribute") or use a large set of predefined variables (e.g. Click URL), which are then available to tags and triggers.

Tips for implementing tracking with Google Analytics

• Each kind of tracking calls needs its own tag, e.g. "filter toggled", "load more clicked", "page view" etc.

  • Create a "Google Analytics Settings" variable and use it across your GA tags

• Variables

  • To access element attributes (e.g. image src), create an "Auto-Event Variable" with variable type "Element attribute"
  • To access virtually anything, create a "Custom Javascript" variable. Define a function() { return ...; } that returns whatever you need. You can reference other GTM variables with {{<GTM variable name>}}.
  • You can read cookies with a "1st Party Cookie" variable

• Triggers

  • "Click - All Elements" triggers are handy when used with "some clicks" and the condition "click element matches CSS selector ..."
  • A "Custom Event" with ".*" regex matching can be used to trigger on any GTM event. Can be restricted with conditions.
  • A "Element Visibility" trigger can be used to track viewed images. Activate "Observe DOM changes" if you want to track images inside a lightbox.

• Tags

  • The "Custom HTML" tag injects arbitrary HTML into the page. Use <script></script> to inject Javascript. Useful for e.g. defining a GA Opt-Out function that can be called e.g. from a link with href="javascript:gaOptOut()"
  • Tracking tags should have an exception trigger that prevents tracking when the user has opted out of GA.