How to set up and use data layer variables in Google Tag Manager

Author:

Setting up and using Data Layer Variables in Google Tag Manager (GTM) is a powerful way to pass dynamic information from your website to GTM. The data layer is a JavaScript object that stores and organizes key pieces of data (such as page information, user interactions, or eCommerce details) in a structured way, allowing GTM to easily access and use it for tracking purposes.

This guide explains how to set up and use data layer variables in GTM to enhance your tracking and measurement capabilities.

What is the Data Layer?

The data layer is essentially a container or array that stores information about the page or user interactions in a format that can be easily read and used by Google Tag Manager. It’s typically implemented as JavaScript code on your website.

Example of a data layer object in JavaScript:

javascript
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'purchase',
'transactionId': '12345',
'transactionTotal': 100.00,
'transactionProducts': [
{
'productId': '56789',
'productName': 'Cool T-Shirt',
'productPrice': 20.00
},
{
'productId': '67890',
'productName': 'Jeans',
'productPrice': 80.00
}
]
});

In this example, data like the purchase event, transaction ID, total amount, and products purchased are pushed into the data layer. GTM can then read this data and use it for tracking events, such as eCommerce tracking.

Why Use Data Layer Variables?

Using Data Layer Variables in GTM offers several advantages:

  • Dynamic Data Access: You can capture dynamic information (e.g., user IDs, product details, form submissions) from the website that may not be directly available in the page’s HTML.
  • Better Tag Management: Data is structured in a consistent way, which makes it easier to pass information to multiple tags (e.g., Google Analytics, Facebook Pixel) without having to manually configure each tag.
  • Event Tracking: It allows for advanced event tracking beyond simple page views, such as tracking form submissions, purchases, or button clicks with more detailed context.
  • Flexibility: Data Layer Variables can handle custom events, complex eCommerce transactions, or any other site-specific behavior.

Step-by-Step Guide to Set Up and Use Data Layer Variables

Step 1: Implement the Data Layer on Your Website

Before setting up the Data Layer Variables in Google Tag Manager, you need to implement the data layer code on your website. The data layer can be initialized and updated with specific data relevant to your tracking needs.

Example: If you’re tracking product purchases, your developer needs to add the following data layer code to your checkout confirmation page:

javascript
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'purchase',
'transactionId': '12345',
'transactionTotal': 100.00,
'transactionProducts': [
{
'productId': '56789',
'productName': 'Cool T-Shirt',
'productPrice': 20.00
}
]
});

This data layer code will push a “purchase” event along with relevant details (transaction ID, total, and product info) into the data layer.

Step 2: Access the Data Layer in Google Tag Manager

Now that the data is available in the data layer, you need to create variables in GTM to capture and use this data.

  1. Open Google Tag Manager: Go to your GTM workspace.
  2. Navigate to Variables: From the left-hand menu, click on Variables.
  3. Create a New Data Layer Variable:
    • Scroll down to the User-Defined Variables section and click New.
    • Choose Variable Configuration.
    • Select Data Layer Variable from the list of variable types.
  4. Configure the Data Layer Variable:
    • In the Data Layer Variable Name field, enter the name of the data layer variable you want to retrieve from the data layer. The name you enter here must match the key name used in your data layer.

For example, if you want to capture the transactionTotal, your variable configuration might look like this:

  • Data Layer Variable Name: transactionTotal
  1. Set a Default Value (Optional): You can specify a default value that will be used if the data layer variable isn’t available. This is helpful in preventing errors if the data isn’t always present.

Step 3: Use the Data Layer Variable in Tags

Once you’ve created a data layer variable, you can use it in your tags, triggers, or other variables. Here’s how you would apply it:

  1. Using the Variable in a Tag:
    • Go to Tags in GTM and either create a new tag or edit an existing one (e.g., Google Analytics event tracking tag).
    • In the Tag Configuration section, set up your tag as usual.
    • When configuring the tag fields (e.g., category, action, label), you can use your data layer variable by clicking the variable button (the lego brick icon) and selecting the variable you created earlier.

Example: For a Google Analytics event tracking tag, you could use the transactionTotal data layer variable for the Event Value field:

  • Category: Purchase
  • Action: Completed
  • Label: {{transactionId}} (another data layer variable you can create)
  • Value: {{transactionTotal}}
  1. Use in Triggers:
    • If you want to fire a tag when a specific event occurs, you can use a data layer event trigger.
    • Example: To trigger the tag only when a purchase occurs, you can create a trigger that listens for the purchase event in the data layer:
      • Trigger Type: Custom Event
      • Event Name: purchase

Step 4: Preview and Test

Before publishing your tags and variables, always test them in GTM’s Preview mode to ensure they’re working as expected.

  1. Enter Preview Mode: Click the Preview button in GTM, and your website will open in debug mode.
  2. Check Data Layer Variables: Navigate through your site, perform the actions that would trigger the relevant data (e.g., a purchase or form submission), and check the GTM Debug Console.
    • In the Variables tab of the debug console, verify that the data layer variables are pulling in the correct data.
    • In the Tag Assistant, ensure that the relevant tags are firing correctly based on the triggers and variables you set up.

Step 5: Publish Changes

Once you’ve tested your variables and confirmed everything is working, publish your container:

  1. Exit preview mode.
  2. Click Submit in GTM.
  3. Name your version (e.g., “Data Layer Variables for Purchase Tracking”) and publish it.

Example Use Cases for Data Layer Variables

  1. eCommerce Tracking:
    • Capture and send transaction details like product IDs, names, and prices to Google Analytics for eCommerce tracking.
    • Example: Use transactionId, transactionTotal, and transactionProducts data layer variables to track order completions.
  2. User Information:
    • Pass user-specific data (like user IDs or user roles) into the data layer to track user behavior across your site.
    • Example: Use a userId data layer variable to track logged-in users.
  3. Form Submissions:
    • Track specific form submissions and form field values through the data layer.
    • Example: Capture form IDs or field input values like formEmail or formPhone and send them to analytics or CRM systems.
  4. Enhanced Link Clicks:
    • Capture detailed information about button or link clicks.
    • Example: Use a data layer variable to track the text or URL of a clicked button.

Conclusion

Setting up and using Data Layer Variables in Google Tag Manager unlocks advanced tracking capabilities by enabling you to capture and utilize dynamic, detailed information from your website. By pushing structured data into the data layer and creating corresponding variables in GTM, you can efficiently manage complex tracking needs, such as eCommerce transactions, form submissions, and custom user interactions. With proper testing and monitoring, you can ensure your tags are firing correctly and data is being sent to the appropriate platforms for analysis.

Categories: Digital Marketing