How to implement dataLayer.push for advanced tracking in Google Tag Manager

Author:

Implementing dataLayer.push for advanced tracking in Google Tag Manager (GTM) allows you to send dynamic data to GTM that can be used for triggering tags, setting variables, and tracking user interactions on your website. This approach is essential for advanced tracking needs like tracking custom events, ecommerce data, user interactions, or other custom analytics needs.

Here’s a step-by-step guide to implement dataLayer.push for advanced tracking in GTM:

1. Understanding the dataLayer

The dataLayer is a JavaScript array used by Google Tag Manager to store data that can be read and used by GTM tags and triggers. By pushing data into this array, you can send information about pageviews, events, or custom variables that GTM can use for tracking.

Here’s an example of how the dataLayer looks:

javascript
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'pageview',
'pageCategory': 'homepage',
'userId': '12345'
});

2. Adding dataLayer.push to Your Website

First, you need to add the dataLayer snippet to your website. This is typically done within the <head> section of your HTML or just before the GTM container script, which is usually placed in the <body> tag.

Example of the dataLayer snippet in your website’s HTML:

html
<script>
window.dataLayer = window.dataLayer || [];
</script>

3. Pushing Data into the dataLayer

Once the dataLayer is initialized, you can use dataLayer.push to send data. The data can include event names, ecommerce transaction details, user data, or any other information that you need to track.

Example 1: Basic Pageview Tracking

Let’s say you want to track a pageview along with additional custom information about the page. You can push this information into the dataLayer:

javascript
window.dataLayer.push({
'event': 'pageview',
'pageCategory': 'homepage',
'pageTitle': 'Welcome to Our Website',
'userLoggedIn': true
});

Example 2: Tracking User Interactions (e.g., Button Click)

If you want to track a specific user action, such as a button click, you would use the dataLayer.push inside an event listener. For instance, when a user clicks on a “Sign Up” button, you can push data related to that event.

javascript
document.getElementById('signup-button').addEventListener('click', function() {
window.dataLayer.push({
'event': 'signupClick',
'signupButtonText': 'Start Free Trial',
'userType': 'new'
});
});

4. Setting Up Tags and Triggers in GTM

Once you push the data into the dataLayer, you need to set up tags and triggers in Google Tag Manager to capture and send the data to tools like Google Analytics, Google Ads, or any other third-party tool.

Step 1: Create a Trigger

In GTM, you’ll create a trigger based on the event name or the data you pushed into the dataLayer. For example, if you pushed an event like signupClick, you can create a trigger based on this event.

  1. Go to Triggers in GTM.
  2. Click New and select the Custom Event trigger type.
  3. Set the event name to match the event you pushed in the dataLayer (e.g., signupClick).
  4. Define any additional conditions if necessary (e.g., userType is ‘new’).
  5. Save the trigger.

Step 2: Create a Tag

Next, create a tag that uses this trigger. If you’re using Google Analytics, for instance, you might want to send this event to Google Analytics as a custom event.

  1. Go to Tags in GTM.
  2. Click New and select the tag type (e.g., Google Analytics: Universal Analytics).
  3. For Track Type, select Event.
  4. In the Category, Action, and Label fields, use the variables from the dataLayer to dynamically pass values. For example:
    • Category: Signup
    • Action: Button Click
    • Label: {{signupButtonText}}

    You can use GTM variables to dynamically pull values from the dataLayer.

  5. Choose the trigger you created in Step 1 (e.g., signupClick).
  6. Save the tag.

5. Using Variables in GTM

To dynamically pull values from the dataLayer and use them in tags, you can create Custom Variables in GTM.

  1. Go to Variables in GTM.
  2. Click New and select Data Layer Variable.
  3. In the Data Layer Variable Name, enter the name of the variable you pushed into the dataLayer (e.g., signupButtonText).
  4. Save the variable.

Once the variable is created, you can use it in your tags (e.g., in the event tracking fields for Google Analytics).

6. Testing and Debugging

Before deploying the changes to your live site, always use GTM’s Preview Mode to test your tags, triggers, and variables:

  1. Click Preview in GTM and enter your website URL.
  2. Open your website in the preview mode and perform the actions you want to track (e.g., clicking the “Sign Up” button).
  3. Check the GTM Debug Console to see if the event and associated data are correctly pushed to the dataLayer and that your tags fire properly.

You can also use browser developer tools to check the dataLayer content by entering the following command in the browser’s console:

javascript
console.log(window.dataLayer);

7. Deploying the Changes

Once you’ve confirmed everything is working correctly in Preview Mode, you can publish your container in GTM to make the tracking live.

Conclusion

Implementing dataLayer.push for advanced tracking in Google Tag Manager is a powerful way to manage and capture dynamic data for your website. It gives you the flexibility to track specific user interactions, ecommerce transactions, custom events, and much more. By pushing the relevant data into the dataLayer, you allow GTM to trigger specific tags based on that data, ensuring accurate and comprehensive tracking for analytics and marketing purposes.

By following the steps outlined above, you can easily set up and implement advanced tracking on your site using GTM and dataLayer.push.

Categories: Digital Marketing