Andrew Welch

Andrew Welch · #frontend #devops #performance

Making the web better one site at a time, with a focus on performance, usability & SEO

2017.04.19 · 5 min read ·

Tags Gone Wild! Managing Tag Managers

Tools like Google Tag Manager and Adobe Tag Manager offer wonderful capabilities, but they can be detrimental to user experience

Buried In Tag Manager Tags

Tools like Google Tag Manager (GTM) and Adobe Tag Manager (ATM) are prolific in the corporate world for the marketing tracking capabilities that they offer. But not properly curated, they can hurt website performance and user experience.

What these tools do is they allow you to manage “tags” which get injected into a webpage, from a nice friendly control panel web interface. “Tags” in this context are arbitrary JavaScript code that does something (usually some kind of tracking).

This is empowering for marketing and analytics professionals, because they can add things like conversion tracking, remarketing, tracking “pixels”, and so on to a webpage without needing a pesky developer to make it happen.

Once the Tag Manager’s JavaScript has been put on the page, it takes care of loading other JavaScripts (aka “tags”) for you.

Non-developers can then inject arbitrary JavaScript code into every webpage on your site.

Tag Managers emerged “as a thing” out of a need for marketing and analytics professionals to do their job without needing to learn HTML, JavaScript, and so on.

They provide a centralized place where all sorts of wonderful and horrible things can happen.

What could possibly go wrong?

As it turns out, a lot can go wrong. Marketing-types generally do not understand the implications of the “tags” that they are adding to a page—and it’s somewhat unfair to expect them to.

I want to reiterate that wherever you see the word “tag” used, it refers to arbitrary JavaScript code that gets executed in the user’s browser.

When you include a tag on a page, it can do whatever it wants.

Tags can—and very often do—load other tags. So you may have included just 5 tags, but each tag can then end up loading as many other tags as it wants. Just like the 1980’s TV commercial, tags can spread like a social disease.

They Told Two Friends

..and they’ll tell two friends, and they’ll tell two friends and so on and so on…

So why does this matter? Who cares how many tags are being loaded?

Each tag that gets loaded is another browser request. Granted, they are fairly small, but they add up, especially on high-latency mobile connections.

They are also inevitably served up from a variety of places, so there are additional DNS lookups that need to happen, and you are also at the mercy of the tag’s source web server for their expires header caching policy.

Your website that you’ve carefully tuned as per the A Pretty Website Isn’t Enough article can deteriorate into something like this:

Tag Manager Tags Gone Wild

This is your webpage. This is your webpage on tags.

So this looks bad, but is it really bad? After all, these tags are loaded asynchronously, after the webpage has (mostly) loaded. This is the argument that I’ve heard from some people (who coincidentally are in the business of tracking tags).

Tag sprawl like this is bad because while all of these tags are being loaded, your browser is working to pull the requests in.

Ever see a webpage load, but the Google Chrome activity indicator is still swirling away long after it looks like the page has loaded?

Google Chrome Activity Indicator

The tags they are a loadin’

These are your tags loading.

It’s not just the DNS lookups and network bandwidth for downloading the tags, it’s also the fact that each of these tags is JavaScript that needs to be executed. Have a look at this excerpt of a webpage waterfall showing tags loading:

Tag Javascript Executing

Tag JavaScript executing

All of the pink blocks designate CPU usage from tag JavaScript being executed. Imagine multiplying this by each tag that’s loaded on your website, and it’s not too hard to see how this can impact performance.

The combination of DNS lookups, network requests, and JavaScript execution—multiplied by each tag that’s loading—are an annoyance on desktop computers, but they are debilitating on a mobile device.

Mobile devices have restricted CPU power that can be overwhelmed in a hurry by all of this activity, resulting in webpages that are jerky or unusable until after all of the tags have loaded.

Not to mention that we’re adding to the overall page weight, and chewing up their data plan.

This is bad. Google thought it was so bad that they created Google AMP specifically to address poor mobile web performance. Google’s initial target for AMP was news sites, because they are notoriously bad in terms of adding digital detritus in the form of tags to webpages.

How bad? Let’s have a look at the well-known news network CNN.com. There are a grand total of 254 requests on their home page, the overwhelming majority of which are tags.

If you’re into gore, have a look at the full CNN.com page waterfall. Hide the women & children.

So are tags evil?

Tags are not evil; they are actually fantastic in terms of the power that they put into the hands of your marketing and analytics folks. 

It’s also important to note that there’s nothing wrong with Tag Managers themselves; they are excellent and useful tools. It’s a person (or multiple people) who ultimately are publishing these tags, and need to ensure they are doing so responsibly.

At the risk of looking silly and quoting a comic book:

With great power comes great responsibility.

I liken tags to prescription drugs; used appropriately, they can perform miracles. If they are abused, however, they can be detrimental.

Tags Are Prescription Drugs

The great irony here is that tags are most often added to a website to track conversion performance. But as we talked about in the A Pretty Website Isn’t Enough article, poor website performance negatively impacts conversions. In a big way.

This reminds me of the Observer Effect from physics:

In physics, the term observer effect refers to changes that the act of observation will make on a phenomenon being observed.

So by cramming all of these tags onto our webpage to measure conversions, we may be lowering our conversion rate. Ooops.

Taming Your Tags

So what can we do about all of this? What we need is a person as a Tag Manager for our Tag Manager, to whip our tags into shape. A digital lion tamer, if you will.

Taming Tags Whip

This person should establish a tag policy for their organization. Here’s what I suggest:

  • Every tag should have an owner, in terms of a person who takes responsibility for that tag
  • Every tag should be documented, stating what it does, and justifying its existence
  • Tags should appear only on the pages where they are actually needed, not globally on every page on the website
  • Tags that coincide with a marketing campaign should be set up to expire at an appropriate date
  • Tags should be audited on a regular basis, and pruned back regularly

I’ve worked with more than one organization where they didn’t even know what all of their tags were doing. In cases like this, I’ve found the Tag Inspector service to be a good first step at getting a handle on your tag sprawl.

It’s also eye-opening to audit your webpage’s loading waterfall via WebPageTest.org to see what is actually loading when someone visits your website.

And make sure your tags are actually accomplishing your goals!

In addition, pay attention to the logistical side of things:

  • You don’t need 5 different tags tracking the same thing.
  • If your tags are intended to track conversions, make sure that they aren’t inhibiting conversions themselves!
  • Be sure that there aren’t better ways to track what you’re trying to track, such as server-side tracking via the Google Analytics Measurement Protocol
  • If you’re using the Tag Manager to implement A/B testing, be sure you’re doing it right
  • If your A/B testing is negatively affecting your website performance or UX, your A/B test results may be suspect

In a nutshell, tag responsibly. And understand that there is a cost associated with the tracking that you’re doing.

Developers need to make the marketing & analytics folks aware of the cost of tags, and marketing & analytics folks need to make developers aware of what they are trying to accomplish.

This conversation is what is going to help you make something truly fantastic.

Happy tagging!

Create Craft Cms 3 Plugin

Insights · 2017.05.24

So you wanna make a Craft 3 plugin?

#Craft 3 #PhpStorm #homestead

Ab Split Testing Second Image Deux

Insights · 2017.05.10

A/B Split Testing with Nginx & Craft CMS

#devops #frontend #split testing

Homestead Sharing

Insights · 2017.05.06

Mobile Testing & Local Dev Sharing with Homestead

#devops #homestead #sharing

Coffee Beans Static Asset Versioning

Insights · 2017.05.05

Simple Static Asset Versioning in Craft CMS

#frontend #devops #craftcms

Buried In Tag Manager Tags

· 2017.04.19

Tags Gone Wild! Managing Tag Managers

#frontend #devops #performance

Homestead Prairie Schooner

Insights · 2017.03.31

Local Development with Vagrant / Homestead

#devops #frontend #homestead

Tidal Wave Disaster

Insights · 2017.03.20

Mitigating Disaster via Website Backups

#backups #devops #craftcms

Web Host Server

Insights · 2017.03.09

How Agencies & Freelancers Should Do Web Hosting

#devops #hosting #vps

Critical Css Stopwatch

Insights · 2017.02.28

Implementing Critical CSS on your website

#critical-css #frontend #performance

${ category } · ${ blog.postDate }

${ blog.title }

#${ tag }