How to update a dataLayer variable?

Question

We initially push an object containing variables to the dataLayer:

dataLayer.push({
    'environment': {
        'userName': 'abc',
        'id': 123,
        'clicks': 0
    }
});

We now want to increase the value of environment.clicks with every click a user makes. How to do that? When we push it via

dataLayer.push({
    'environment': {
        'clicks': 123
    }
});

The dataLayer Array may get 10.000s of entries. How to properly update the variable?

Answer 1

The way to update a datalayer variable is to push a variable, either when a "native" GTM event occurs or alongside a custom event. So basically you are it right.

As for your worries that the DL might get to many entries - the dataLayer gets a new entry on every click in any case (GTM adds that itself), so the additional entries for your variable will probably do not matter that much.

If you still want to avoid this you can update a global Javascript variable and use that in GTM. Google Tag Manager has access to all variables on your page (you will still get all the click events in your dataLayer).

The dataLayer also has a set method that allows you to write to the Datalayer directly, which is apparently what you are looking for. You need to acquire your GTM instance and then you can set values:

 var gtm = window.google_tag_manager[{{Container ID}}];
     gtm.dataLayer.set('balloonsPopped', undefined);

Details are e.g. here in a Bounteous article. You could use this in a custom HTML tag to update the click count before the click event fires your tag.

Also the dataLayer is reset on page load. It would take a hell of a single page app to collect 10 000s of clicks per pageview.

This is tagged Google Analytics. If you plan to track the clicks in GA remember that a GA session expires after 500 clicks, so the results might not be what you expect (also the free version only has only 10M hit per month, click tracking will quickly exhaust this). And of you want to track the number of click in GA then you would need an event or something to track the click, so the number of events is basically the metric you are looking for, or you could create a custom metric and set it to "1" in your GA call (meaning that it will be incremented by one on every call).

Answer 2

Quoting from the documentation:

It's important to note that pushing a variable of the same name as an existing variable to the data layer will cause the existing value to be overwritten by the new value

Simply pushing an entry with the same variable name and the updated value should work.

Answer 3

Couldn't you use a holder? Something like:

var click_value_holder = dataLayer.environment.clicks;
dataLayer.push({
  'environment': {
    'clicks': (click_value_holder + 1)
  }
});