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

Typical Google Tag Supervisor Script

The everyday 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"
peak="0" width="0" type="show:none;visibility:hidden"></iframe></noscript>
<!-- Finish Google Tag Supervisor (noscript) -->

Nevertheless, some corporations must load a couple of GTM container and make the error of simply including the extra script tags. This technique works however requires extra HTTP requests, impacting the positioning’s total efficiency. The right technique is to load a single script after which go 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"
peak="0" width="0" type="show:none;visibility:hidden"></iframe></noscript>
<!-- Finish Google Tag Supervisor (noscript) -->

If 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 numerous 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.