Advanced Google Tag Manager — Part 11 Review
By: Giacomo Verde
Tags: Data Analysis, Google Tag Manager, Google Analytics, Data Analytics, Marketing Analytics

Custom event listeners

With auto-event tracking, one of the more difficult aspects of web analytics, tracking user interactions beyond the page load, was greatly simplified.

But the online community worked a lot in the past to find ways to track custom event in GTM. That’s how custom event listeners were born.

The prototype of the custom event listener will require two components:

A Custom HTML Tag for each listener type you want to activate (e.g. change, blur, copy) A generic Custom JavaScript Macro, which returns the handler function that pushes the event into the dataLayer

The macro returns a function, which serves as the handler for the listener you’ll create next.

After you have the handler, the next step is to create a tag which sets up the listener. The key here is recognizing just which listener you want to set up.

So, a custom event listener is a handler you write with JavaScript. It lets you handle any JavaScript DOM events, such as click, form submit, mouse hover, drag, touch, error, page load and unload, and so many more.

The solution comprises the following items: a Custom HTML tag firing with the page load, and a Custom JavaScript variable providing the callback. You’ll also need a bunch of Data Layer variables to fetch the values pushed into dataLayer by the callback.

Tracker object

One of the problem of the tracker object is that you cannot access it in real time using Google Tag Manager.

This is because all of the set commands you add to a Universal Analytics tag template take place before the analytics.js is loaded and the tracker object is properly created.

It exist a method you can use to actually mine the tracker object for whatever information you want, and at the same time ensure that the data is usable by the time your all-important Page View Tag fires.

For this you first need a custom HTML code. All you need the Custom HTML code for is to setup the tracker object, and then push an initialization event in to dataLayer , which will subsequently fire your actual Page View Tag.

So, start by creating a new Custom HTML Tag, and make sure it fires on the earliest possible Trigger — usually the All Pages Trigger.

The two other things you’ll need are a Data Layer Variable for the Client ID, and a Custom Event Trigger for the trackerReady event.

Once you have these two setup, all you need to do is modify your existing Page View Tag to accommodate these changes.

Custom Task

The customTask API is a feature of the Universal Analytics library (used by Google Tag Manager’s tags, too). It lets you get and set values from and to the (Measurement Protocol) hit as it’s being generated.

How does this task work?

When you run the ga('send', 'pageview') command either directly in your site JavaScript or indirectly via Google Tag Manager’s Google Analytics tags, you actually request that the Universal Analytics JavaScript library (analytics.js) compile an HTTP request to the Google Analytics servers.

The endpoint to which the hits are sent is typically /collect on the Google Analytics collector domain. The process of building and sending hits to the GA servers is also known as Measurement Protocol (MP).

When you use the GA tag in Google Tag Manager, you are starting a sequence. This sequence comprises a number of tasks, of which customTask is the first one that is executed.

The custom task has no functionality of its own, but can be used to manipulate the model object before it is processed by the other tasks.

The beauty of customTask is that because it runs before any of the other tasks, you can use it to overwrite behavior of these other tasks.

So, this is the importance off the custom task, the ability to modify the other tasks.

In this list compiled by Simo Ahava, you can check for the different things you can do with the custom task.

Google Tag Manager API

The API exposes multiple Google Tag Manager configuration entities, organized hierarchically. Each user’s Account can have one or more Containers, each of which can have one or more Workspaces. A Workspace allows multiple concurrent modifications to a container’s Variables, Built-In Variables, Triggers, Folders, and Tags. Once you have made the desired modifications to your workspace, you can create, preview and publish a Version.

The Google Tag Manager API allows you to create scripts that handle account / container management operations programmatically.

For example, you can update tags across 100 containers in an automatic way creating lines of code for this.

Or for example, you can decide to list all the containers of an account.

Custom templates

Custom Templates, in short, are tag, variable, and Client templates that you can create and configure. In other words, if you have an idea for a tag, a variable, or a Client, you can now turn them into reusable templates which can, in turn, be shared with other users and containers via template export and import.

Google Tag Manager’s Custom Templates offer a way to build a user interface around the custom code you might want to run on the site using Google Tag Manager. The user interface is what you’ve come accustomed to when using GTM’s tags and variables. It comprises text input fields, settings, tables, labels, drop-down menus, and so forth.

However, the templates have another, less apparent (but no less impactful) function. They add layers of protection and security to the code they abstract.

My thoughts about this course

In this eleventh course in the Digital Analytics Minidegree provided by CXL Institute, I had the possibility to deep dive into Google Tag Manager.

In this advanced course, functionalities like custom event listener, API, custom task are explained with examples and in a more detailed way.

I have to admit that this is probably the most difficult course of all the mini degree, but it is a must-have if you really want to become an expert in Google Tag Manager and the ways that is possible to use this tool to collect meaningful data for your business.

Highly recommended course, like all the rest provided by CXL.

For this part is all and see you in the next course!