Update the dataLayer mid-tag with customTask

Subscribe to our monthly newsletter to get the latest updates in your inbox
With all of the API’s, UI changes, deprecations and other ways that Google keeps us on our toes, it can be easy to miss out on some the newest and coolest things that we can implement on our sites to help shape data into what we want. The latest release that popped up on our radar is the new customTask API , a feature in Google Tag Manager which lets you access the dataLayer object mid-tag. So, what does this mean? I’m glad you asked. Let’s dive in!

What is customTask?

By default, the task does absolutely nothing. That’s it. We are done. Let’s go home. Kidding! For those of you that stuck around…at a high-level, we can think of customTask as a keyword that we can tie any sort of functionality to and then intercept the tag, mid-execution, to impose our changes. This solves a number of problems and headaches we have with racing/timing issues and overriding dataLayer values (more on that later) and also gives us the ability to do some pretty cool things.  

Why do we care about customTask?

Earlier I said that custom task is just a keyword. While this is true, it’s wholly more than that. It allows us the ability to access the dataLayer object directly and modify the payload that is being shipped to Google Analytics. Picture a scenario when we need to overwrite values that are in the object. The values are hard-coded into the dataLayer directly but they are incorrect values, data types, or various things that we need to change before the hit is sent to Google Analytics. Solving this can be a difficult task—which, by the way, is different than customTask (don’t get confused). Whether it’s waiting on developers, changing variables in Google Tag Manager, or spending hours trying to troubleshoot a problem we can now solve it all with just a few simple steps. Let’s go back to our example and pretend that we have some incorrect STRING values of ‘undefined’ that are hardcoded into the dataLayer. Having this will cause the actual word 'undefined' to show up in GA reports, giving us inaccurate data and causing clutter in our reports. To fix this we need to overwrite and pass the data type of undefined into the dataLayer. Doing so informs GA this value doesn't exist, meaning it won't show up at all in GA reports, which is what we want.     Ready to get started?  

Create a new Custom Javascript variable

We're assuming you already have a GTM container with active/firing tags setup. Let's begin by creating a new custom JS var named demoJS.     This is the script that will run when we call customTask.  

Setup a function

    Nothing to see here. Let’s move on.  

Create an array and jump into the window object

First, we'll create an array of all the keys we know have been incorrectly implemented. Then, we'll reference the window + container + dataLayer and assign it to the variable dl. Doing this will give us super powers. Like access to the dataLayer.    

Iterate through, grab the keys in question and override the values

Inside our function we'll setup a basic for loop and iterate through our dlKeys array—each time using dl.get() to grab the key in the dataLayer.  Then, once we have the key, we check to see if it is of STRING type ‘undefined’. If it is, we use the set() method to set that key’s value to our new value of type 'undefined'.     We're done with the JS variable! Now that we’ve written the script that allows us to access the dataLayer and make some changes, how (and when) do we actually call this function? Well, let’s jump to the part where the wizardry happens (no NOT Hogwarts—I’m sorry to all you HP fans out there).  

Open the tag where we want to intercept the data

For this particular case I am using the Core Pageview Tag because I want to override the values as early as possible. Also note, you will need to set this up on all tags that require this functionality (i.e. if multiple page view tags exist with the same parameters, all pageview tags will need this implemented). Once I'm inside, it’s as easy as entering " customTask" into the field name and then using our newly created demoJS var in the values field.     To help illustrate our example, we'll then add a custom dimension with the index of in the tag. What we'll expect to see is the CD populate in the pageview tag as the type 'undefined'. Then, because undefined values drop and DO NOT get sent to GA as the hit goes out, we will not see CD 5 reflected in our network hit (the STRING ‘undefined’ DOES pass through to GA).   *This step is for illustration purposes and does not need to be done in order for this to work.   Once we preview our page, we can now see the dataLayer values have changed before the hit leaves to GA.       Then, we can verify that that none of the type undefined CD’s have populated the hit.     We're done! Just below is the code needed for injection. Let us know if you have any questions!   
//function(){
      var dlKeys = ['cName','counter','editorialType','formName','leadGenIdentity',
         'pageType','subRegion','region','userId'];

   var dl = window.google_tag_manager["GTM-XXXX"].dataLayer

   for (var i = 0; i < dlKeys.length; i++){
     if (dl.get(dlKeys[i]) === 'undefined'){
       dl.set(dlKeys[i], undefined)
         }
   }
 return;
}