How To Load A number of Google Tag Supervisor Container IDs Correctly

As a lot as Google touts web page pace as a essential efficiency metric when figuring out the person expertise and its affect as a rating issue, it’s fairly ironic since their properties are ridiculously sluggish.

Typical Google Tag Supervisor Script

The standard implementation of Google Tag Supervisor requires you to load two scripts, one within the head and one on the finish of the physique. Instance:

<!-- Google Tag Supervisor -->
<script>(perform(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.begin':
new Date().getTime(),occasion:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l="+l:"';j.async=true;j.src="https://www.googletagmanager.com/gtm.js?id="+i+dl;f.parentNode.insertBefore(j,f);
})(window,doc,'script','dataLayer','GTM-XXXXXX');</script>
<!-- Finish Google Tag Supervisor -->

<!-- Google Tag Supervisor (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
top="0" width="0" fashion="show:none;visibility:hidden"></iframe></noscript>
<!-- Finish Google Tag Supervisor (noscript) -->

Nonetheless, some firms have to load a couple of GTM container and make the error of simply including the extra script tags. This methodology works however requires extra HTTP requests, impacting the positioning’s general efficiency. The correct methodology is to load a single script after which cross a number of container IDs inside them.

A number of Container Google Tag Supervisor Script

You’ll have to forego the usual copy-and-paste code offered by Google Tag Supervisor when passing a number of Container IDs. Within the following code pattern, I’m loading two completely different container IDs from Google Tag Supervisor:

<!-- Google Tag Supervisor -->
<script>
  dataLayer = {
    'gtm.begin': {
      'GTM-XXXXXXX': true,
      'GTM-YYYYYYY': true
    }
  };
</script>
<!-- Google Tag Supervisor script -->
<script src="https://www.googletagmanager.com/gtag/js"></script>
<script>
  gtag('js', {
    'gtm.begin': dataLayer['gtm.start']
  });
</script>
<!-- Finish Google Tag Supervisor -->

<!-- Google Tag Supervisor (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX,GTM-YYYYYYY"
top="0" width="0" fashion="show:none;visibility:hidden"></iframe></noscript>
<!-- Finish Google Tag Supervisor (noscript) -->

In case you have greater than two container IDs, add their Container IDs within the dataLayer array in your head tag and append it comma-delimited to the iframe path within the physique.

Take into account that this doesn’t save a whole lot of time. Because the script is executed, it should nonetheless set off every of your Google Tag Supervisor accounts’ tags. Nonetheless, it does prevent the spherical journey when executing every script and making every request for the preliminary script.