GTM Tips

A Content Security Policy (CSP) is something you’ll configure your web server with to add an additional layer of protection, especially from harmful scripts loaded from third-party vendors. Once you have a CSP in place, all resources loaded and executed by the web page need to pass the CSP directives. For Google Tag Manager, this is very relevant. If you have a CSP in place, you will need to modify it so that Google Tag Manager functions properly.

I’ve spent a considerable amount of time talking and writing about how to improve the granularity of your Google Analytics data, especially when using Google Tag Manager. I’ve also gone on and on and on (and on) about customTask, which makes adding metadata to the Google Analytics hits dispatched from your website a breeze.

In this article, I’ll introduce a simple way to add yet another level of detail to your GA hits, using customTask as the method of choice. The piece of data we’ll add is the hit type of the hit (e.g. pageview, event, and timing) which, for some ludicrous reason, is not a default dimension available in Google Analytics reports.

When working with the analytics of single-page applications (SPA), there are a number of things to pay attention to. For example, you need to make sure that Google Analytics doesn’t break your session attribution, and that you are not inadvertently inflating your page speed timing metrics. Actually, there are so many “gotchas” when it comes to SPA tracking in tools like Google Analytics that you just can’t get by with a plug-and-play implementation.

See Dan Wilkerson’s excellent article, which sums nicely the can of worms involved with tracking an SPA.

Here’s a quick tip in response to a query in Twitter by Riccardo Mares. By making a small change to the Google Tag Manager container snippet, you can have the <script> element generated by the snippet notify the page as soon as the Google Tag Manager library has downloaded.

What you do with this information is up to you. If you are working directly with the google_tag_manager interface, for example, it might make sense to not act until the interface has been established.

Here’s a hacky #GTMTips tip for you. Have you ever had a Google Tag Manager container, where you’ve been updating your Google Analytics tags over the years? And perhaps these tags (and, today, Google Analytics Settings variables) have been updated with an ever-expanding list of Custom Dimensions? And perhaps this list of Custom Dimensions is sorted willy-nilly, because once you have 50+ rows, it just doesn’t seem like a fun thing to do to go over each row and update them so that they are sorted by Custom Dimension index?

When using the All Elements trigger in Google Tag Manager, it’s easy to overlook the fact that it captures all clicks on the page. It’s also brutally accurate - it captures clicks on the exact element that was below the mouse button when a click happened. This means that when working with the All Elements trigger, you need to be more careful when identifying the correct element you actually want to track clicks on.

A while ago, I published a #GTMTips article, where I showed how you can add HTML elements to the page programmatically using Google Tag Manager. This is relevant because GTM’s validators prevent you from adding custom parameters to HTML elements that are injected directly via the Custom HTML tag. To circumvent this validation, you need to create the element programmatically, before appending it to the document.

A while ago, Matteo Gamba asked me a question related to the Facebook Customer Chat Plugin. This plugin lets you add the Messenger chat of your own Facebook application directly to the website. It’s pretty cool, but the problem is that you are instructed to embed the plugin using custom HTML attributes, and these will not pass validation.

When you use the dataLayer.push() command on a page with a Google Tag Manager container, you pass information to GTM’s internal data model and potentially fire tags (if the push() contained an event key). You can also add the eventCallback key to these pushes. The value of this key should be a function, and this function is then executed once the container finishes processing any tags that might have fired on that dataLayer.push().

This is useful if you want to give Google Tag Manager time to complete its operations before proceeding with other actions on the page, for example.

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.

This is one of those #GTMTips posts that I was certain I’d already written. So it came as a mild surprise when I realized I’d never tackled this aspect of Google Tag Manager.

It’s a short and sweet tip again. Today we’ll learn how to check if a variable is undefined using Google Tag Manager.

Tip 73: Check for undefined variable values

If a variable is undefined, it means that a variable with the given name does not currently have any valid value in memory. In JavaScript, the typical check for undefined is done like this: