How to Add a Load Listener to Script Elements in Google Tag Manager

google-analytics-explained-load-listener-script-elements

When you use Google Tag Manager or any other platform based on JavaScript, there is always the risk that a race condition may occur. This happens whenever two resources require execution in the browser at the same time. To make matters worse, it can be difficult to know which resource will succeed.

For instance, you most likely work with jQuery, one of the most popular JavaScript libraries, on a regular basis. You can run into trouble when working with jQuery because it often needs to be downloaded asynchronously. This means it may not be loaded when Google Tag Manager begins executing tags.

Adding a load listener to script elements solves this issue. It allows you to tell Google Tag Manager when a resource downloaded or requested asynchronously is available. There are two ways to add a load listener.

  1. Using a dataLayer Push

To use the dataLayer push method, you need to fire a Custom HTML tag as early as possible. This means you need to add the “All Pages” trigger to the tag to ensure that it fires at the moment the Google Tag Manager container is loaded.

Unfortunately, to complicate matters slightly, you cannot just add <script src=“url_to_jquery” async=“true”> to the tag. Rather, you need to use JavaScript to create the element, then add the listener to it, and finally inject it manually to the page.

One option is to use the “onload” attribute directly in the element, but this can lead to the overwriting of an existing “onload” attribute. It is better to manipulate the JavaScript DOM to avoid impacting any listeners you already have. This requires the following code:

<script>

 (function() {

   var el = document.createElement(‘script’);

   el.src = ‘http://code.jquery.com/jquery-3.2.1.js';

   el.async = ‘true’;

   el.addEventListener(‘load’, function() {

     window.dataLayer.push({

       event: ‘jQueryLoaded’

     });

   });

 })();

</script>

By running this Custom HTML tag, the browser creates an asynchronous request to download jquery-3.2.1.js from the Content Distribution Network. Once the process is complete, a dataLayer.push({event: ‘jQueryLoaded’}) fires. Then, to fire any tags that need the jQuery to be loaded, you can build a Custom Event trigger for this event name.

  1. Using Tag Sequencing

Tag sequencing is an option only if you have a single tag that needs the asynchronously downloaded resource. The method involves creating a custom HTML tag just for this code and adding it to the Setup tag in the sequence. This causes an asynchronous request to be executed in the Setup tag. Then, only once the process is finished, will the main tag fire.

For the Custom HTML tag, use:

<script>

(function() {

var el = document.createElement(‘script’);

   el.src = ‘http://code.jquery.com/jquery-3.2.1.js';

   el.async = ‘true’;

   el.addEventListener(‘load’, function() {

     window.google_tag_manager[{{Container ID}}].onHtmlSuccess({{HTML ID}});

   });

 })();

</script>

You also need to enable built-in variables for the Container ID and HTML ID.

Note that this method uses window.google_tag_manager[].onHtmlSuccess(). This is an internal function necessary for tag sequencing. It stops Google Tag Manager from immediately moving from the setup tag to the main tag, making GTM wait for a certain code to execute. Without this code, GTM may start the main tag before jQuery has finished downloading.

It is simple to add a load listener to script elements, and it immediately stops problems caused by race conditions. If you’re working with jQuery, consider that adding a load listener is essential.

If you like my articles,