Data Layers Masterclass: Essential Guide for Tracking GA4 with GTM

Data layers are a critical part of tracking with Google Tag Manager (GTM), not only for GTM but also for other tag managers and applications. In this post, you will learn everything you need to know about data layers.

What is a Data Layer?

A data layer is a JavaScript object that sits on your pages as part of your HTML code. It contains all the data or information that you want to pass from your website to other applications that need it. For example, consider a web page that displays product details such as the name, price, color, and size. This information is often scattered throughout the page. If a tag manager like Google Tag Manager or Adobe's Launch needs that information, it would have to grab it from the page, which requires specific logic written by a developer.

Using a data layer centralizes this information into a single JavaScript object, making it easier for tools to access the data without worrying about how the product page is displayed. The data layer remains unchanged even if the layout of the page changes.

Data Layer Structure Example

Structure of a Data Layer

The format for a data layer script looks something like this:

script>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'event': 'pageview',
        'pageCategory': 'product',
        'product': {
            'name': 'Remote Control',
            'price': '19.99',
            'color': 'Black',
            'size': 'Medium'
        }
    });
    </script>

In this example, the data layer includes key-value pairs for product attributes. You can name the keys whatever you want, but consistency is key.

Complex Data Layers

Data layers can be more complex, such as when tracking multiple products in a shopping cart. For example:

window.dataLayer.push({
        'event': 'cartUpdate',
        'cart': [
            {
                'name': 'Remote Control',
                'price': '19.99',
                'color': 'Black',
                'size': 'Medium'
            },
            {
                'name': 'Wireless Mouse',
                'price': '29.99',
                'color': 'White',
                'size': 'Large'
            }
        ]
    });

This format allows you to track multiple items in a single data layer event.

How to View a Data Layer

To inspect a data layer on your site, you can right-click on the page, select "Inspect," and then go to the console. Type in dataLayer and hit enter. This will display all the data layer values.

Inspecting Data Layer in Console

Using Google Tag Manager to Access Data Layers

In Google Tag Manager, you will need to create custom variables to pull values from the data layer. Click on "Variables," then "New," and select "Data Layer Variable." You must provide the name of the variable you want to pull. For example, if you want to pull the 'currency code', simply type it exactly as it appears in the data layer.

Creating Data Layer Variable in GTM

Nesting and Accessing Values

To access nested values, you can use dot notation. For example, if you want to pull the currency code, your variable name would look like:

ecommerce.currencyCode

Ensure to save your variable and preview to see if the value is coming as expected.

Accessing Nested Values in GTM

Dynamic Data Layer Updates

In scenarios like e-commerce, when a user adds a product to their cart, the data layer values need to be updated. Developers can use a function called dataLayer.push to update the values dynamically. For instance:

window.dataLayer.push({
        'event': 'addToCart',
        'item': {
            'name': 'Wireless Headphones',
            'price': '89.99',
            'quantity': 1
        }
    });

Dynamic Data Layer Push

Conclusion

Data layers are essential for a robust tracking setup in Google Tag Manager. By understanding how to structure, access, and update data layers, you can optimize your tracking for better analytics.

If you want to dive deeper into JavaScript and its applications in marketing analytics, check out the JavaScript for Marketing Analytics course.

For a comprehensive guide to Google Tag Manager, consider enrolling in the Google Tag Manager Course.

Data Layer Video

And for access to all online Digital, Web, and Marketing Analytics courses, check out our All Access Pass.

Need Help with GA4?

Our team of experienced professionals are here to help you resolve all your GA4 issues and provide ongoing support so that you can focus on your job. Reach out to us for no obligation consultation.

Posts