Reusable Functions in Google Tag Manager (GTM)

I often get requests to add third-party tracker code into GTM. The code usually has a base script and requires a code snippet to be sent with event details after the fact. Some injected code is loaded right away and makes injection of data possible, but some fail.

The tag firing priority may help in most cases, but may not always work accurately with deferred or asynchronous scripts. To solve for this problem I created a JavaScript based solution. I've created a function that will wait to detect the script until it is loaded, then it sends the data.

Note: In this example, I'll use Facebook analytics scripts as they are well documented and highly used. Meta may provide a valid tag in GTM library and you are welcome to use it, if it serves the purpose for your organization. I'll use this example to show how things can be set manually, which may be necessary for some advanced features. This code can be revised for any other third-party tracker. For simplicity, in this tutorial we are assuming that our website is already configured and it sends standard page view events to GTM, as well as a custom purchase event and product details when the transaction occurs. We also assume that all the event and product data are present in the GTM data layer in the standard format.

Configure Dependencies

Define Waiting Function

First things first, we'll create a function, that will return a promise. The promise will resolve once the specified condition is met.

  1. Login to GTM container, create a new variable, give it a name waitForCondition. Feel free to give it the name that matches your naming convention. I'm going to provide the exact names I use for ease or following the example.
  2. Paste the following code into the variable:
    function() {
  return function (condition) {
    var intervalId;
    var times = 0;

    return new Promise(function (resolve, reject) {
      intervalId = setInterval(function () {
        var isConditionMet = condition.call();
        if (isConditionMet) {
          window.clearInterval(intervalId);
          resolve(isConditionMet);
        }
        times += 1;
        if (times > 10) {
          window.clearInterval(intervalId);
          reject(isConditionMet);
        }
      }, 700);
    });
  }
}

Define Condition When the Script Is Ready

The function above accepts parameter condition which is supposed to be a function that evaluates to a boolean value. Let's define that function.
  1. In GTM create another variable. In this example, we'll be testing if Facebook code has loaded, so I'll name this variable isFacebookLoaded.
  2. Facebook scripts load the variable fbq for the tracker code. So our condition will test if this variable is available in the global scope. The body of our function will be as follows:
    function () {
  return function () {
    return typeof fbq !== 'undefined';
  }
}

Add Main Script Tag

On all pages we have to load the Facebook main JavaScript tag. To prevent code redundancies, let's create a separate tag for that and load it only once on the page load.

  1. Create a new tag in GTM call it Facebook - page view
  2. Add Custom HTML tag type and place the standard Facebook script into it, be sure to replace {your-pixel-id-goes-here} with your Facebook container id, or a name of the variable that stores the id: 
    <script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '{your-pixel-id-goes-here}');
  fbq('track', 'PageView');
</script>
  3. Add a trigger to the tag to fire on All Pages

Send Transaction Data

For this example, let's send a transaction data to Facebook. For the added challenge, let's say we need to include the names, ids, and the number of products as well, the most comprehensive list that Facebook accepts.

  1. Create a new trigger in GTM, if one doesn't already exist, call it purchase.
  2. The trigger type should be Custom Event and it should read Event namepurchase, the value will be read from the data layer.
  3. Create a new GTM tag, give it a name Facebook - purchase.
  4. The tag type should be Custom HTML, and the following code:
    <script>
var isFacebookLoaded = {{isFacebookLoaded}};
var waitForCondition = {{waitForCondition}};

function getProductIds() {
  var ids = [];
  var products = dataLayer.ecommerce.items;
  for (var i = products.length - 1; i >= 0; i--) {
    ids.push(products[i].item_id);
  }
  return ids;
}

function getProductNames() {
  var names = [];
  var products = dataLayer.ecommerce.items;
  for (var i = products.length - 1; i >= 0; i--) {
    names.push(products[i].item_name);
  }
  return names;
}

waitForCondition(isFacebookLoaded).then(function() {
  fbq('track', 'Purchase', {
    value: dataLayer.ecommerce.value,
    currency: dataLayer.ecommerce.currency,
    content_type: 'product_group',
    content_ids: getProductIds(),
    content_name: getProductNames(),
    num_items: dataLayer.ecommerce.items.length,
  });
});
</script>
  5. Add a trigger to the tag to fire on the custom trigger purchase.

Testing

Test your GTM container in preview mode and then publish and test it.

Parting Notes

For brevity I kept this example simple. If you want to track multiple commerce events in Facebook, then you can move function getProductIdsgetProductNames into variables as well.