Dynamic Data Addition in Data Layer - Google Tag Manager

So far, we have looked at what Data Layer is and how Google Tag Manager can pull information from the Data Layer. We have dealt with a Data Layer that is static, i.e. that the values are coded by the developers. However, many times, the static values are not enough, and you have to change the values you store in the Data Layer, for example, in an eCommerce site, the number of products or cart values are dynamic and change as users add products, removes them, etc. In this case, you will need to manipulate the Data Layer values based on user interaction.

Google Tag Manager provides such functionality, and that’s what I will show you in this chapter.

Any action that needs to pass the value can use the following syntax

Data Layer .push({

'key1': 'value1’,

'key2’: ‘value2’,

‘keyn’: ‘valuen’

‘event’: ‘[name the event]’,

});

For example: If the site allows users to add a job ID to their favorite list, then you can use something like:

Data Layer .push({

'Action': 'Add To Favorite’,

'JobID’: ‘123’,

‘event’: ‘addtofavorite’,

});

Key and value pairs are the actual values in the Data layer, as we saw before. When you just add Key and values to Data Layer, Google Tag Manager has no idea that the values were changed or added. However, when we set the name of the event, e.g. ‘addtofavorite’, then we can configure Google Analytics to “listen” to that event. As soon as the event name is added, Google Tag Manage knows something changed, and it can take desired actions.

Here is how “Add to favorite” action is coded on the AnalyticsHire.com page,

By putting Google Tag Manager in preview mode and pressing the “Add to Favorite” Button shows me the following

Figure: Add to Favorite Button click in Preview Mode

Now, you should be able to listen to this event and capture these values in Google tag manager.

Configure the Variables to Capture These Values

Configure two new variables as we did in the previous chapter. The configuration is shown below. Remember, JavaScript is case sensitive, so the key names that you use should be exactly how it is in the Data Layer

Figure: JavaScript variables to capture Job ID

Figure: JavaScript variables to capture Job ID

Now that the variables are configured, we need to make sure that Google Tag Manager knows when the data layer is updated; else these variables will be empty. So, next, we have to do is listen to that event. For that, we will need a new trigger to listen to the event that was set in the Data Layer.

Configuring the Trigger

Create a new Trigger and select rigger type of Custom Event. We are using a custom event since it is not a standard event fired by the browser. Input the Event name – the name of the event that was set in the DataLayer. The final configuration will look like the following.

Figure: Custom Event

Save the trigger. It is now ready to listen to “addtofavorite” event.

Configuring the Tag

Now, you can attach any tags that you like. Same as before, we will attach Google Analytics Event Tag and pass the values of the variables to Google Analytics. The configuration will look like the following