Removing Values In The DataLayer ‑ Data Layer Best Practices Pt 4

We’ve collected a series of technical best practices designed to help you successfully interoperate with the Google Tag Manager Data Layer. These best practices are designed to help eliminate some of the peskier and harder-to-debug issues we run into when working with clients. This part will cover how to reset or purge values in the Data Layer properly. Before we go much further, I’d like to point out that this is territory that has been pretty well-covered by Simo Ahava, and I would highly recommend you read his posts on the subject.

Removing or Resetting Data Layer Values

Sometimes, we need to delete a value inside the dataLayer. This need can arise for a variety of reasons: we need to include the data in a particular tag on a conditional basis, or we want to purge a value between two tags that fire. When the need arises, we have three ways that we can purge data from internal GTM dataLayer. One really important thing to note – the value of your Variables will boil down to the Data Layer Variable version you’re using to access them. A quick primer, using a Variable named Balloons.

Version 1 Data Layer Variables will ignore dots in the name (gtm.element is treated as “gtm.element”: […], not “gtm”: { “element”: […] }). They overwrite values with identical keys.

Version 2 Data Layer Variables will treat dots as nested values (gtm.element is treated as “gtm”: { “element”: […] }, not “gtm.element”: […]). Most importantly, version 1 Variables will overwrite existing values, while version 2 Variables will try and merge new data with data that is already stored in GTM, e.g.:

dataLayer.push({
  'balloons': {
    'count': 99 
  }
},{
  'balloons': {
    'color': 'red'
  }
});

A version 1 variable for our balloons value would return { color: 'red' }. A version 2 variable would return { color: 'red', 'count': 99 }. Simo has a really great post going into the differences between these two.

Where this can be problematic is if multiple tags depend on a value, say, balloons.color, but that value changes between the tags that fire. If we’re not careful, we can accidentally inherit the balloons.color value in places we didn’t mean to, dirtying the data we collect. In order to prevent this from happening, we’ll need to reset the data stored in Google Tag Manager.

.push()ing In undefined

One way we can reset values is to push in an object where we set our value to undefined. This method works when we’re interested in clearing the value between two distinct events that are pushed to the dataLayer. Like before, we might do this when we want to reset a value conditionally between two tags that we fire.

For example, let’s pretend we’re tracking the balloon game that Jerry, of Rick and Morty fame, likes to play.

Let’s also pretend we’re firing a Google Analytics Event tag every 5 seconds with a count of the number of balloonsPopped that Jerry pops in that 5 second interval. Finally, let’s pretend that whenever he beats a level, we again fire the same Event, this time with the count of balloons he’s popped between the last interval and the completion of the level. Knowing what we know now about how dataLayer values persist when not overwritten, if we’re not resetting the count of balloonsPopped between events, we could end up double counting his score when:

• Jerry doesn’t pop any balloons between the last interval and the end of the level, thus persisting his score from the previous interval
• Jerry completes a level and starts a new level within the same five-second interval, again persisting his score incorrectly

In order to reset Jerry’s score, we’ll want to use a Sequence and add the following Custom HTML Tag after we fire our balloonsPopped Event:

<script>
  (function() {
    dataLayer.push({
      'balloonsPopped': undefined
    });
  })();
</script>

As a result, our balloonsPopped count will be reset between any events that we fire.

Where this doesn’t work is in Sequences where we’re trying to reset a value between tags that fire in the same sequence. This is because the values of our Variables will not change as a result of a dataLayer.push(), within the context of the same event. So, if we were to try and fire our clearing tag as at the beginning of our sequence, we would end up continuing to double-count.

.set()ing Values to undefined

We can also reset the values of Variables manually by using .set() of our container’s dataLayer. This is different than the globally used window.dataLayer array, where we push in interaction information; the container-specific dataLayer is accessed through the globally declared google_tag_manager. You can access it with some help from the Container ID and HTML ID Variables, a Built In Variable you can enable in the interface.

This can be helpful if you’re not interested in pushing an additional event to the dataLayer, or you’ve got a conditional need to alter this value within a Sequence. In our above example, instead of our interim dataLayer.push(), we could do this:

<script>
  (function(window) {
    var gtm = window.google_tag_manager[{{Container ID}}];
    try {
      gtm.dataLayer.set('balloonsPopped', undefined);
      // Notifies GTM our HTML Tag has finished
      gtm.onHtmlSuccess({{HTML ID}});
    } catch(e) {
      if({{Debug Mode}}) throw e;
      // Notifies GTM our HTML Tag has failed
      return gtm.onHtmlFailure({{HTML ID}});
    }
  })(window);
</script>

This method allows us to update the value of Variables while still within the same sequence, however, Version 1 Data Layer Variables will still evaluate to their previous values. This is especially important when trying to use this method to reset the ecommerce data stored in GTM – if you’re using the Use Data Layer option, which I would generally discourage you from doing, you’ll wind-up still getting the same ecommerce data.

To avoid this, use the Custom Javascript Variable option for your ecommerce data and access that data via a Version 2 Data Layer Variable. You’ll also have to be wary of unintended inheritance, though. Your mileage may vary, so make sure you test and model everything thoroughly and pick the solution that works best for you.

reset()ing the Whole Thing (The Nuclear Option)

Finally, you may wish to completely wipe the dataLayer, and start with a clean slate. Maybe you’ve got a complicated front-end application pushing lots of data into the dataLayer in unpredictable ways, and you’re worried about accidental inheritance between sections of your app. You can set all values of the dataLayer to undefined by invoking the following:

window.google_tag_manager[{{Container ID}}].dataLayer.reset();

I have yet to put this into use in the wild, but it is a method worth mentioning in this post. If you find a use for it, I’d be interested to hear more; please let me know in the comments.

For more best practices, check out our previous posts below.

Have you run into issues with persistent dataLayer values? Share your problems in the comments below.