GTM

3 Ways to Control Marketing Script Sort Order in GTM (and why it’s important)

Learn how to control when marketing scripts are executing on your site and how it impacts your remarketing audience data.

3 Ways to Control Marketing Script Sort Order in GTM (and why it’s important)

One of my top benefits to Google Tag Manager is the ability to manage all marketing scripts in one place.

It makes the process of adding, editing, removing, and QA’ing marketing scripts so much easier!

But, there are risks associated with this transition.

If you don’t plan carefully or have oversight on changes made to your GTM container then you might not be sending all of your potential audience data to platforms like Facebook, Google, etc.

“Install This Script”

If you’ve ever received instructions from a marketing partner on how to implement their global javascript code or pixel on your website, it likely contained something like:

“place immediately after the opening <head> tag in you source code”

The reason most install instructions say this is because the marketing partner needs to ensure that their code has the highest chance of executing without being blocked or delayed by other code or third party scripts running on the site.

However if every script is a priority then none are a priority.

If you’ve tested your site speed with Google before then you’ve probably seen an example of the “waterfall” loading of different elements on your website. For example here is a snapshot of our site:

elevar-js-loading I’ve circled a few third party scripts like Google Analytics, Segment, Quora, and Twitter.

You can see as time goes on (the waterfall chart to the right) scripts start and end loading later and later.

Now consider a page that has ~ 200 elements (which I’d consider normal based on what we see) and this is what leads to the 5-10+ second page loads. All of these site elements can’t and don’t load instantly or asynchronously (in parallel).

Why Marketing Scripts Sort Order is a Problem

Many of our customers compare transactions from their Shopify store to conversions in Facebook, Google Analytics, AdWords, etc.

Why?

Let’s take Facebook:

The reason you want all conversions going to Facebook is to maximize the amount of purchaser data that Facebook can use to find new potential customers for you via lookalike audiences.

If Facebook is not receiving the majority of your conversion data then you might be missing out on profitable lookalike audiences.

So if your Facebook script is loading last amongst all of your other onsite scripts then it’s likely the Facebook script won’t catch all of your transactions.

Thus less conversion data events sent to Facebook impacting your lookalike audiences.

How to Test When Your Tags Fire

There are a few ways to go about this process – like using page performance testing tools (Google Lighthouse, Pingdom), etc.

However using your browser dev tools will allow you to see first hand where you are before and after any changes you make.

On any webpage (including transactions) you need to have your dev tools open in your browser. You can right-click on your page and click “inspect element” to do this.

Once open then click on your Network tools as shown below and refresh your page. Then type in Facebook (or any other script you want to test) and you should see something like this:

nordstrom-fb

From here you will see all of the Facebook scripts that are executing on the page and where they fall in the waterfall view on the right.

In this Nordstorm example you’ll see the first FB script starts executing 4.21 seconds after the page begins loading. That’s a long time!

Here’s an example from Rothy’s where it’s quite a bit less:

rothys-fb

Now if you wanted to see what was executing before Facebook then simply remove the filter in the top left and scroll up to see what else is firing:

other-scripts-loading

In this example you can see Gorgias is loading in 1.72 seconds (before Facebook) along with a few others.

Creating a list of tags like this can take time, however if you are concerned about your audience data then it’s an important exercise to truly understand what is firing when.

Plus you’ll be surprised what scripts are executing early on your page that you might not expect (or need to!).

How to Control Marketing Tag Sort Order

Now I’m going to show you three ways that you can control when your marketing scripts are executing.

Option 1: Placement of GTM Script on Page

Ensure that your GTM code is placed as high on the page as possible.

For example, if you are using our GTM App for Shopify then you’ll see the GTM script is placed right after the opening <head>:

gtm-top-of-head

If it is not firing near the top of the <head>, and you have other scripts loading above the GTM script, then your tags inside of GTM will load after these other scripts that are above GTM.

You also need to review placement in the checkout thank you page script setting as well.

For example, is it loaded at the top above your other scripts or at the bottom below everything else?

additional scripts

Finally if you are on Shopify Plus then you should also look at your checkout.liquid to verify where your GTM code is placed. I’ve seen this moved around and loaded in the <body> which will cause delays in GTM initiating.

Option 2: Tag Priority Setting

This is the easiest setting!

Inside of each tag in GTM you can set a numeric value to assign loading priority:

tag-firing-priority

The higher the value then the more importance it will receive in executing.

So if you had 3 tags with the following values:

  • Google Analytics: 500
  • Facebook: 800
  • Twitter: 100

Then the order that GTM will start executing these tags is: Facebook, then Google Analytics, then Twitter.

Option 3: Trigger Selection

This is one that still gets me at times.

Here’s the scenario:

The GTM script is placed at the top of the page.

A Facebook tag has the highest priority order out of any other tag firing from GTM…

…but it’s still loading last. Well after other tags that are a lower priority order.

WTF?

This happens because the trigger assigned to the Facebook tag fires after other trigger events. And these other trigger events have the rest of the tags assigned to them that are firing before the Facebook tag.

Let me explain:

A trigger is dependent on an event executing in GTM. An event can be a pageview, click, scroll, or any other custom event that you define.

For example we fire a productDetailView event from our Shopify app dataLayer that we use to trigger other tags:

custom-event-gtm

In this example if our Facebook tag was assigned to productDetailView but a Twitter tag was assigned to fire on DOM Ready, then the Twitter tag would fire before the Facebook tag.

Make sense?

This is most important to verify on purchases. We see GTM accounts where some marketing conversion tags are set to fire on a DOM pageview event while others are set to fire on a custom transactionComplete event.

This can cause a discrepancy in sort order expectations. And possibly undefined variables – but that’s a story for another day 🙂

Let me know of any questions you have in the comments below!

Get Exclusive Elevar Insights directly to your inbox.

Get free analytics tips and resources delivered directly to your inbox.

3x Your Marketing ROI

Use data to help your team scale with confidence.

Download Now

Brad Redding

Brad, co-founder of Elevar, has lived in eCommerce for over 12 years. He's helped design, build, and optimize over 100 websites in his career. From new retail startups to well-known brands like Le Creuset, Signature Hardware, Rebecca Minkoff, Char-Broil and more, he specializes in data analytics and conversion optimization to help achieve business goals.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Articles