I'm using Google Tag Manager and also javascript loaded by Webpack.

(In the head tag of my page, I first have the GTM loading script, and then I have the manifest.js, vendor.js, and page-specific.js piled by Webpack.)

If I'm loading a certain javascript library via GTM (in my case, I have the Facebook Pixel as a custom tag), how can I instruct a function in my page-specific.js to wait until the Facebook Pixel tag has been loaded by GTM?

(The function calls fbq('track', 'Purchase', {value: facebookTrackingPurchaseValue, currency: 'USD'});, which depends on the Facebook Pixel having been loaded already.)

Right now, it's a race condition.

And I'm handling it in a clunky way (by adding a 4-second timeout in my page-specific.js so that there is a decent likelihood that the Facebook Pixel within GTM has finished loading by then).

To be clear: I already know how to set multiple tags within GTM to wait for a GTM tag to load, but that's not what I'm trying to do here (since my page-specific.js is not inside GTM).

I have searched the documentation and tutorials everywhere, and I've never found anyone who describes how to manage this kind of dependency.

I appreciate your suggestions.

I'm using Google Tag Manager and also javascript loaded by Webpack.

(In the head tag of my page, I first have the GTM loading script, and then I have the manifest.js, vendor.js, and page-specific.js piled by Webpack.)

If I'm loading a certain javascript library via GTM (in my case, I have the Facebook Pixel as a custom tag), how can I instruct a function in my page-specific.js to wait until the Facebook Pixel tag has been loaded by GTM?

(The function calls fbq('track', 'Purchase', {value: facebookTrackingPurchaseValue, currency: 'USD'});, which depends on the Facebook Pixel having been loaded already.)

Right now, it's a race condition.

And I'm handling it in a clunky way (by adding a 4-second timeout in my page-specific.js so that there is a decent likelihood that the Facebook Pixel within GTM has finished loading by then).

To be clear: I already know how to set multiple tags within GTM to wait for a GTM tag to load, but that's not what I'm trying to do here (since my page-specific.js is not inside GTM).

I have searched the documentation and tutorials everywhere, and I've never found anyone who describes how to manage this kind of dependency.

I appreciate your suggestions.

• javascript
• dependencies
• google-tag-manager
• race-condition
• facebook-pixel

2 Answers 2

I solved this problem using a "cleanup tag". In my example code is for Hotjar, and the function in question is called hj().

Update: After contact with the Hotjar support I learned that the following line of code is enough for Hotjar: window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};. No Cleanup Tag necessary here, but Cleanup Tags as described below provide a more universal solution.

The code

Run this code on your site:

window.hjWrapperQueue = window.hjWrapperQueue || [];
function hjWrapper() {
  hjWrapperQueue.push(arguments);
}

Instead of calling hj(), call hjWrapper() instead.

Then, in Google Tag Manager (GTM), add a Cleanup Tag to the relevant Tag (instructions below) with the following code:

<script>
  // Re-define the wrapper function to simply call hj()
  function hjWrapper() {
    hj.apply(arguments);
  }

  // Call all the queued events
  if (window.hjWrapperQueue) {  
    window.hjWrapperQueue.forEach(function (hjArguments) {
      hj.apply(hjArguments);
    });
  }
</script>

How to add a Cleanup Tag to your Tag:

• Open your Tag (In the screenshots the Tag is called Hotjar)
• Open "Advanced Settings"
• Open "Tag Sequencing"
• Check "Fire a tag after Hotjar fires" (Hotjar will of course be replaced by whatever your Tag is called)
• Pick "Select Tag" in the "Cleanup Tag" select menu.
• A new pane opens. Click the "+" in the top right corner to add a new Tag. This will bee your Cleanup Tag.
• Choose a "Custom HTML" Tag and add your custom code here. Don't add a trigger (your Tag will be the trigger for your Cleanup Tag)
• Name your Cleanup Tag. I named mine "Hotjar Wrapper".
• Save.
• In your Tag pane, select the checkbox "Don't fire Hotjar Wrapper if Hotjar fails or is paused"
• Your Tag should now look something like this:

Usually you can't. Tag Priority and tag sequencing determine how GTM inserts the tags into the page, but do not tell you if the scripts have finished executing.

The only way to achieve something like that is if the tags can execute a callback when they have finished loading. At that point you can either push a custom event to the datalayer that triggers other tags, or you use tag sequencing and call

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

(where the respective variables must be enabled in the built-in variables) in the success callback and enable "do not fire of setup tag fails" in the sequenced tag (it then will wait for the success message).

But mostly you are out of luck I guess.