Track Interactions in the Shadow DOM Using Google Tag Manager

The shadow DOM is a way to add HTML structures to the web page so that they remain isolated from the rest of the document object model (DOM). It’s a popular concept with web components, as it allows for encapsulation of web structures so that they aren’t affected by style declarations of the parent tree, for example.

However, being such a “hidden” structure, anything that happens in the shadow DOM is also hidden from Google Tag Manager’s listeners. Or, the click does get registered, but the event target ({{Click Element}}) is the node on the parent structure that hosts the shadow DOM rather than the element that was clicked within the shadow DOM.

Read More…

#GTMTips: Send Page Visibility State to Google Analytics

One of my pet peeves about Google Analytics has to do with nomenclature. For example, a User isn’t really a user but a browser instance, and Direct traffic isn’t necessarily “direct” at all, but rather just traffic that has no discernible source. But being so invested in content analytics, my biggest gripe has to do with Pageviews.

A Pageview in Google Analytics is collected when a hit with the hit type pageview is received successfully by the Google Analytics endpoint. This hit is dispatched most often with a JavaScript library such as Google Tag Manager or gtag.js.

Read More…

Google Tag Manager and JQuery

The jQuery JavaScript library is by almost any means of counting the most popular JavaScript library used in websites around the world. It’s so influential, in fact, that its evolution is tightly bound to the JavaScript standardization effort itself, and it’s an integral part of the JS Foundation’s efforts to build a community for JavaScript developers.

Google Tag Manager, similarly, is the most popular tag management system used in websites, globally. Thus, by way of weak correlation, it makes sense to expect some synergy between the two.

Read More…

#GTMTips: Trigger Javascript Function Without Using a Custom HTML Tag

Last updated 9 October 2020: customTask updated to a more stable version.

The Custom HTML tag in Google Tag Manager is splendid. It’s your go-to tool when you need to run arbitrary JavaScript on the webpage. Some might even use it to actually add HTML elements to the page, but I’m willing to bet running JavaScript is its most common use.

However, there’s a downside to Custom HTML tags, which is only made more apparent on single-page apps which do not clear the full page when transitioning from one state to another. Custom HTML tags are injected to the end of <body>, which means you might end up with a lot of clutter in your Document Object Model.

Read More…

#GTMTips: Search DataLayer for a Key-Value Pair

One of the difficulties of working with Google Tag Manager and the dataLayer structure is that GTM doesn’t preserve history of the items collected into its data model. Or, at least, it doesn’t preserve it in a manner that would let us access it.

This is typically a very niche problem, but it does surface every now and then. For example, say you wanted to query whether an event with some specific value has already been pushed into dataLayer. Well, this is impossible, since any event you use to trigger this check would overwrite this previous event value in the data model (since any given key can only have one value at a time).

Read More…

Customize the Scroll Depth Trigger in Google Tag Manager

Last updated 9 March 2018 with some new tips.

The Scroll Depth trigger in Google Tag Manager has a lot going for it. Tracking how far users scroll down a given page has long since been recognized as an important cog in the engagement tracking machine, and there have been really great solutions for implementing scroll depth tracking for web analytics over the years.

With Google Tag Manager’s native Scroll Depth trigger, it’s tempting to think we now have a be-all end-all solution that covers all the bases. However, as with everything else in analytics, the native scroll depth trigger does require customization to provide you with relevant information about your content and the visitors interacting with it.

Read More…

#GTMTips: Add HTML Elements to the Page Programmatically

One of the annoying quirks of Google Tag Manager is that it strips out any non-standard HTML attributes from elements you add to Custom HTML tags. I’m using “non-standard” as a qualifier here, because I don’t have an exhaustive list of attributes that are ignored. But at least data attributes (e.g. data-id) and attributes with custom names (e.g. aria-labelledby) are either stripped out upon injection, or GTM might actually prevent you from even saving the container if the Custom HTML tag has elements with these attributes.

Read More…

#GTMTips: Simple Custom Event Listeners With Google Tag Manager

First of all, check out this article for an overview of how custom event listeners work in Google Tag Manager. The reason I’m writing this #GTMTips article is that I want to upgrade the solution slightly, and I want to bring it back into the spotlight. Why? Because it’s still one of the most effective ways to customize your Google Tag Manager implementation.

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. It also lets you leverage the useCapture parameter which will prove very helpful if you have other JavaScript on the site interfering with GTM’s default event triggers.

Read More…

#GTMTips: Add a Load Listener to Script Elements

One of the challenges in working with Google Tag Manager (or any JavaScript-based platform for that matter) is what to do with race conditions. A race condition emerges when you have two resources competing for execution in the browser, and there is a degree of unpredictability to which “wins” the race.

A prime example is working with jQuery. It’s one of the most popular JavaScript libraries out there, and websites utilize it for a multitude of things, many useful for Google Tag Manager, too. For example, jQuery trivializes asynchronous HTTP requests and DOM traversal, both of which can cause headaches to GTM users.

Read More…

#GTMTips: Remove PII From Google Analytics Hits

Sending personally identifiable information (PII) to Google Analytics is one of the things you should really avoid doing. For one, it’s against the terms of service of the platform, but also you will most likely be in violation of national, federal, or EU legislation drafted to protect the privacy of individuals online.

In this #GTMTips post, I’ll show you a way to make sure that any tags you configure this solution with will not contain strings that might be construed as PII. The tip is for Google Tag Manager, but with very little modifications it will work with Universal Analytics, too.

Read More…