GTM Tag Sequencing: Keep it sequenced, keep it safe

What’s this Tag Sequencing feature I’ve heard so much about?

We’ve always let it be known that we’re big fans of Google Tag Manager (GTM) here at Merkle | Periscopix - we shout from the rooftops regularly about GTM's many great features that make life simpler in the world of website tagging. Today is no different - today we’re here to extol the virtues of a GTM feature known as Tag Sequencing.

As you may be aware, the tags that you fire using GTM (as with most tag managers) aren’t necessarily fired in sequence. GTM doesn’t wait for one tag to fully execute before starting to fire the next - instead, it will begin to fire each one as soon as it’s ready, meaning that different tags can overlap in their execution (the technical term for this is that tags fire asynchronously).

This is very useful for preventing delay in individual tag firing - if a key tag is at the very end of a long queue of tags, it will wait a fair amount of time before it fires (and everyone knows the frustration of waiting in a long line!), so asynchronicity in tag firing prevents that. However, it’s more of a pain if you’re firing a tag which depends on another tag having fired first.

So how do I manipulate the order of my tags?

Enter: Tag Sequencing!

The essence of the feature is that, for any tag that has a trigger, you can assign a setup tag and a cleanup tag. These tags will fire in their entirety, before (for the setup) or after (for the cleanup) the main tag. This firing will ignore any triggers on the setup or cleanup tag - all of this will occur as a result of the main tag’s trigger. That’s it! Simple, right?

Of course, there’s a little more to it than that. Come with us on a journey to explore the ins and outs of sequenced tags.

As a side note, there’s another feature that lets you manipulate the order of your tags in a different way - known as tag firing priority - but that’s a blog post for another day.

So how do I use it?

I’m so glad you asked!

Let’s start with a simple example - say you want to keep a record of how many events you’ve sent to Google Analytics (GA) per page. You could create your GA event tag as normal. Then you could add a custom HTML tag as a cleanup tag - here’s how (under ‘Advanced Settings’ in your tag setup):

This custom HTML tag should contain whatever you want to do after your tag fires - in this case, update the count of events by pushing a new object to the dataLayer. And we’re done! Regardless of what triggers you have on your custom HTML tag, with these settings, it will always fire after the GA tag does.

But what if the main tag fails?

Conveniently, GTM has an answer for that too. If you want to only fire the cleanup tag once your main tag has been successful, simply check the “Don’t fire [cleanup tag] if [main tag] fails or is paused” box, like so:

The process is also identical in the opposite direction (using a setup tag instead of a cleanup tag).

Can I see an example?

Of course, it’s all well and good knowing the theory behind a feature, but it’s useless unless there’s a reason to use it. Here’s one common use case that we encounter:

Let’s say that you have a marketing vendor which has one tag that they want on all pages, so that they can just have a blanket remarketing audience for anyone who’s visited your site at all. This tag loads in the vendor’s whole JavaScript library as well, and then fires off a hit to the platform using a function from that library.

Then, say they have more specific tags that they want fired on certain interactions, like an add to basket event. If you’ve already loaded in the vendor’s JS library once (in the all pages tag), you don’t want to do it again as it adds unnecessary load time. So you can just make another tag with just the function call, with the assumption that the library has already loaded.

Usually, the interaction we want to track occurs well after page load and we are all good. However, imagine that one of the interactions that you want to track here is a page view of a product details page (PDP). If you just set your interaction tag to fire on Page View, there’s no guarantee that this will fire before All Pages - they may fire in the opposite order, which will cause your interaction tag to fail.

So you could set up your Interaction Tag (with a trigger that fires on PDPs) to have its own setup tag: the All Pages tag. That way, the interaction tag will always fire after the All Pages tag is completely done, so you know the library has loaded in.

“But wait,” I hear you say, “won’t that mean the All Pages tag will fire twice on these pages?”

We can now go into the All Pages tag, under Advanced Settings > Tag Firing Options, and set it to only fire once per page:

Et voilà! Your All Pages tag will always fire before your interaction tag, but only ever once per page.

This is all well and good for templated tags, where GTM knows when the tag has succeeded and when it’s failed. How about if your setup tag uses custom HTML - how does GTM know whether it’s succeeded or failed?

Success and Failure Listeners

Heads up - it’s going to start to get a bit technical from here onwards!

Handily, the folks at Google seem to think of everything. You can add a line of code in your tag to indicate whether the tag succeeded or failed (technically speaking, it’ll invoke the success or failure callbacks). You’ll first need to enable the “HTML ID” and “Container ID” built-in variables. Here’s what the code looks like:

Successful:

 google_tag_manager[{{Container ID}}].onHtmlSuccess({{HTML ID}});

Failed:

 google_tag_manager[{{Container ID}}].onHtmlFailure({{HTML ID}});

Very simple - add the appropriate line at the appropriate point (for example, add the onHtmlFailure event in a catch block after an error has occurred). This will let your sequenced tags know whether they should fire (callbacks like this are actually the same behind-the-scenes method that GTM uses to know if your templated tags have succeeded or failed, but not-so-behind-the-scenes in this case).

Be careful, though. As soon as you call either onHtmlSuccess or onHtmlFailure, the tag sequence will start to work its magic - even if the tag hasn’t finished running. This means that you might still end up with both tags running at the same time, depending on where you put onHtmlSuccess. Let’s illustrate this with an example.

Say you have two tags: A and B. You set up tag sequencing, so that A is your ‘main tag’, and B is your ‘cleanup tag’. You also check the box that says “Don't fire Tag B if Tag A fails or is paused”.

Now, let’s say that your code for tag A calls the onHtmlSuccess event halfway through, while it’s still not finished running through every line. This will immediately trigger tag B to start, and depending on how quick each one is to run, might actually mean tag B finishes before tag A does. To see this visually:

Of course, part of the whole benefit of tag sequencing is being rid of that asynchronicity that I mentioned at the start - therefore, my recommendation is that unless you have a very good and very deliberate reason for doing so, always put your onHtmlSuccess and onHtmlFailure functions at the end of your tags!

Misusing Success and Failure Callbacks

This section is a very niche use case, so if you don’t think you’ll be writing complex custom HTML tags for use in tag sequencing, feel free to skip this bit!

Bearing in mind what I just said - always have those functions at the end of the tag unless you know what you’re doing - there are a couple of things to be aware of if you do choose to change the order around.

Firstly, related to the fact that calling onHtmlSuccess will immediately start the next tag: in a very similar way, calling onHtmlFailure will immediately prevent the next tag from firing. Admittedly if your tag has already failed, you’re unlikely to want to run much more code afterwards anyway, so it shouldn’t make much difference.

The one thing this does mean, though, is that if you call onHtmlFailure at some point, even if you then call onHtmlSuccess later in the same tag, it’s still considered to have failed, and your sequenced tag won’t fire. The first success/failure callback that is invoked is the one that determines whether the sequence continues. So another guideline: write your code such that you will only ever encounter either onHtmlSuccess or onHtmlFailure in the same block.

That’s all, folks!

And there it is - a quick (ish) rundown of what the Tag Sequencing feature does, a few quirks to be aware of, and a common use case. So, if you’d like one of our GTM wizards, tagging masters, and/or code gurus to help you out with your tag manager setup, please feel free to get in touch. We’d love to talk with you!