Andrew Welch · #frontend #devops #performance

Published , updated · 5 min read ·


Please consider 🎗 sponsoring me 🎗 to keep writing articles like this.

Tags Gone Wild! Managing Tag Managers

Tools like Google Tag Man­ag­er and Adobe Tag Man­ag­er offer won­der­ful capa­bil­i­ties, but they can be detri­men­tal to user experience

Tools like Google Tag Man­ag­er (GTM) and Adobe Tag Man­ag­er (ATM) are pro­lif­ic in the cor­po­rate world for the mar­ket­ing track­ing capa­bil­i­ties that they offer. But not prop­er­ly curat­ed, they can hurt web­site per­for­mance and user experience.

What these tools do is they allow you to man­age tags” which get inject­ed into a web­page, from a nice friend­ly con­trol pan­el web inter­face. Tags” in this con­text are arbi­trary JavaScript code that does some­thing (usu­al­ly some kind of tracking).

This is empow­er­ing for mar­ket­ing and ana­lyt­ics pro­fes­sion­als, because they can add things like con­ver­sion track­ing, remar­ket­ing, track­ing pix­els”, and so on to a web­page with­out need­ing a pesky devel­op­er to make it happen.

Once the Tag Man­ager’s JavaScript has been put on the page, it takes care of load­ing oth­er JavaScripts (aka tags”) for you.

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

Tag Man­agers emerged as a thing” out of a need for mar­ket­ing and ana­lyt­ics pro­fes­sion­als to do their job with­out need­ing to learn HTML, JavaScript, and so on.

They pro­vide a cen­tral­ized place where all sorts of won­der­ful and hor­ri­ble things can happen.

Link What could possibly go wrong?

As it turns out, a lot can go wrong. Mar­ket­ing-types gen­er­al­ly do not under­stand the impli­ca­tions of the tags” that they are adding to a page — and it’s some­what unfair to expect them to.

I want to reit­er­ate that wher­ev­er you see the word tag” used, it refers to arbi­trary JavaScript code that gets exe­cut­ed 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 oth­er tags. So you may have includ­ed just 5 tags, but each tag can then end up load­ing as many oth­er tags as it wants. Just like the 1980’s TV com­mer­cial, tags can spread like a social disease.

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

So why does this mat­ter? Who cares how many tags are being loaded?

Each tag that gets loaded is anoth­er brows­er request. Grant­ed, they are fair­ly small, but they add up, espe­cial­ly on high-laten­cy mobile connections.

They are also inevitably served up from a vari­ety of places, so there are addi­tion­al DNS lookups that need to hap­pen, and you are also at the mer­cy of the tag’s source web serv­er for their expires head­er caching policy.

Your web­site that you’ve care­ful­ly tuned as per the A Pret­ty Web­site Isn’t Enough arti­cle can dete­ri­o­rate into some­thing like this:

This is your web­page. This is your web­page on tags.

So this looks bad, but is it real­ly bad? After all, these tags are loaded asyn­chro­nous­ly, after the web­page has (most­ly) loaded. This is the argu­ment that I’ve heard from some peo­ple (who coin­ci­den­tal­ly are in the busi­ness of track­ing tags).

Tag sprawl like this is bad because while all of these tags are being loaded, your brows­er is work­ing to pull the requests in.

Ever see a web­page load, but the Google Chrome activ­i­ty indi­ca­tor is still swirling away long after it looks like the page has loaded?

The tags they are a loadin’

These are your tags loading.

It’s not just the DNS lookups and net­work band­width for down­load­ing the tags, it’s also the fact that each of these tags is JavaScript that needs to be exe­cut­ed. Have a look at this excerpt of a web­page water­fall show­ing tags loading:

Tag JavaScript executing

All of the pink blocks des­ig­nate CPU usage from tag JavaScript being exe­cut­ed. Imag­ine mul­ti­ply­ing this by each tag that’s loaded on your web­site, and it’s not too hard to see how this can impact performance.

The com­bi­na­tion of DNS lookups, net­work requests, and JavaScript exe­cu­tion — mul­ti­plied by each tag that’s load­ing — are an annoy­ance on desk­top com­put­ers, but they are debil­i­tat­ing on a mobile device.

Mobile devices have restrict­ed CPU pow­er that can be over­whelmed in a hur­ry by all of this activ­i­ty, result­ing in web­pages that are jerky or unus­able 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 cre­at­ed Google AMP specif­i­cal­ly to address poor mobile web per­for­mance. Google’s ini­tial tar­get for AMP was news sites, because they are noto­ri­ous­ly bad in terms of adding dig­i­tal detri­tus in the form of tags to webpages.

How bad? Let’s have a look at the well-known news net­work CNN​.com. There are a grand total of 254 requests on their home page, the over­whelm­ing major­i­ty of which are tags.

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

Link So are tags evil?

Tags are not evil; they are actu­al­ly fan­tas­tic in terms of the pow­er that they put into the hands of your mar­ket­ing and ana­lyt­ics folks. 

It’s also impor­tant to note that there’s noth­ing wrong with Tag Man­agers them­selves; they are excel­lent and use­ful tools. It’s a per­son (or mul­ti­ple peo­ple) who ulti­mate­ly are pub­lish­ing these tags, and need to ensure they are doing so responsibly.

At the risk of look­ing sil­ly and quot­ing a com­ic book:

With great power comes great responsibility.

I liken tags to pre­scrip­tion drugs; used appro­pri­ate­ly, they can per­form mir­a­cles. If they are abused, how­ev­er, they can be detrimental.

The great irony here is that tags are most often added to a web­site to track con­ver­sion per­for­mance. But as we talked about in the A Pret­ty Web­site Isn’t Enough arti­cle, poor web­site per­for­mance neg­a­tive­ly impacts con­ver­sions. In a big way.

This reminds me of the Observ­er 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 cram­ming all of these tags onto our web­page to mea­sure con­ver­sions, we may be low­er­ing our con­ver­sion rate. Ooops.

Link Taming Your Tags

So what can we do about all of this? What we need is a per­son as a Tag Man­ag­er for our Tag Man­ag­er, to whip our tags into shape. A dig­i­tal lion tamer, if you will.

This per­son should estab­lish a tag pol­i­cy for their orga­ni­za­tion. Here’s what I suggest:

  • Every tag should have an own­er, in terms of a per­son who takes respon­si­bil­i­ty for that tag
  • Every tag should be doc­u­ment­ed, stat­ing what it does, and jus­ti­fy­ing its existence
  • Tags should appear only on the pages where they are actu­al­ly need­ed, not glob­al­ly on every page on the website
  • Tags that coin­cide with a mar­ket­ing cam­paign should be set up to expire at an appro­pri­ate date
  • Tags should be audit­ed on a reg­u­lar basis, and pruned back regularly

I’ve worked with more than one orga­ni­za­tion where they did­n’t even know what all of their tags were doing. In cas­es like this, I’ve found the Tag Inspec­tor ser­vice to be a good first step at get­ting a han­dle on your tag sprawl.

It’s also eye-open­ing to audit your web­page’s load­ing water­fall via Web​PageTest​.org to see what is actu­al­ly load­ing when some­one vis­its your website.

And make sure your tags are actually accomplishing your goals!

In addi­tion, pay atten­tion to the logis­ti­cal side of things:

  • You don’t need 5 dif­fer­ent tags track­ing the same thing.
  • If your tags are intend­ed to track con­ver­sions, make sure that they aren’t inhibit­ing con­ver­sions themselves!
  • Be sure that there aren’t bet­ter ways to track what you’re try­ing to track, such as serv­er-side track­ing via the Google Ana­lyt­ics Mea­sure­ment Protocol
  • If you’re using the Tag Man­ag­er to imple­ment A/B test­ing, be sure you’re doing it right
  • If your A/B test­ing is neg­a­tive­ly affect­ing your web­site per­for­mance or UX, your A/B test results may be suspect

In a nut­shell, tag respon­si­bly. And under­stand that there is a cost asso­ci­at­ed with the track­ing that you’re doing.

Devel­op­ers need to make the mar­ket­ing & ana­lyt­ics folks aware of the cost of tags, and mar­ket­ing & ana­lyt­ics folks need to make devel­op­ers aware of what they are try­ing to accomplish.

This con­ver­sa­tion is what is going to help you make some­thing tru­ly fantastic.

Hap­py tagging!