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

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

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>(operate(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" model="show:none;visibility:hidden"></iframe></noscript>
<!-- Finish Google Tag Supervisor (noscript) -->

Nevertheless, some firms have to load multiple GTM container and make the error of simply including the extra script tags. This technique works however requires further HTTP requests, impacting the location’s total efficiency. The right technique is to load a single script after which move 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 supplied 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" model="show:none;visibility:hidden"></iframe></noscript>
<!-- Finish Google Tag Supervisor (noscript) -->

When 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.

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