In an earlier post, you learned how to create your first data layer event. As a refresher, the basic template is:

dataLayer.push({'event': 'insert_event_name_here'});

As an example, we were able to create a button that pushes an event called "happiness" every time a user presses the button.

As you can imagine, you can build on this basic template and add a lot more data to the data layer.

Adding Parameters to the Data Layer

Now, let's say you have an eCommerce store selling tea 🫖. You'd probably want to know what products your visitors are looking at. In doing so, you might learn about the preferences of your store's visitors. By tracking product detail pages, you might also be able to retarget green tea ads on people who had previously visited your store and visited a green tea product page.

What might the data layer have for someone who has just landed on one of your tea shop's product detail pages? A few could be:

• product id

• product name

• price

In the data layer event, we could add these data as accompanying parameters. Parameters give extra information about how visitors are interacting on your eCommerce store and in the case of a data layer push, they are characterized by a key-value pair. We can include the above-mentioned parameters in a data layer event like this:

dataLayer.push({
  'event': 'product_view',
  'ecommerce': {
      'products': [{
        'name': 'Yummy Green Tea',
        'id': 'TEA888',
        'price': '88.80',
       }]
     }
});

As you can see, in addition to 'event': 'product_view', we have another key-value pair consisting of 'ecommerce' and an object containing 'products', plus more key-value pairs nested within. These provide us with data about the product that the product detail page concerns.

Now that we have these data in the data layer, we can access them on GTM and pass the data to marketing channels or analytics tools such as Google Analytics.

Using the Data Layer on Google Tag Manager

Now that I have the above-mentioned dataLayer.push() set up on my product detail pages, when I visit the page for "Yummy Green Tea", the data layer event 'product_view' will fire. When I preview this scenario on GTM, I will be able to see this in action on my Tag Assistant:

You will also be able to see in the API call the JavaScript that made this happen (does it look familiar?).

Now let's say I want to send this data to Google Analytics 4. (Side note: If you haven't started learning how to set up Google Analytics 4, now is the time. Universal Analytics sunsets on July 1, 2023.) I can create a Google Analytics 4 (GA4) tag that is triggered when the product_view data layer event fires, like this:

When configuring the GA4 tag template, I can add the event name, product_view as well as any parameters I want such as product name, ID, and price. Leveraging the data layer, I also created GTM variables for the value of these parameters, as represented by the text in the curly braces.

As an example of how this was done for {{Product Name}}, I first had to create a GTM data layer variable and access what I wanted using dot notation.

This gave me access to the array of products and all the accompanying parameters in the data layer. I can now use this variable {{DLV - Products}} ("DLV" just stands for data layer variable) to create other variables - to access specific product parameters, for instance. In this case, I used a custom JavaScript variable to access the name of the first product in the products array

This variable, {{Product Name}}, is what I used to pass the name parameter value in the GA4 tag above. The same process was carried out to create the {{Product ID}} and {{Product Price}} variables.

Now when I go back to GTM preview mode and visit the "Yummy Green Tea" product detail page, I can see that the GA4 tag successfully fires, triggered by the product_view data layer event.

Did the data actually reach Google Analytics? Well, let's check on GA4 debug mode:

There it is! We see the product_view event together with the custom parameters we added, which we pulled from the data layer. (If you click the triangular dropdowns, you will be able to see the values of the 'name' and 'price' keys.)

Wrapping Up

The purpose of this post was to demonstrate how to add more data to the data layer and leverage it on GTM so you can send it to marketing and analytics platforms. In this example, we successfully sent an event and its parameters to GA4. This means that going forward, we will be able to see all product views on GA4 reporting including what exact product was being viewed, the product ID, and the product price. You will now be able to use the same techniques to send data to other marketing and analytics platforms.