DataLayer Push in Google Analytics 4

Note: Empower yourself and others by sharing this insightful article on LinkedIn or social media. Let’s build a well-informed community together. Need help? Reach out anytime. 

INTRODUCTION

In digital analytics, the dataLayer is a critical component, serving as a channel for delivering structured data from a website or app to analytics platforms such as Google Analytics 4 (GA4). The dataLayer is a JavaScript object embedded within the source of a website or app that is commonly used by both developers and marketers. Its major job is to capture and organize essential user interaction data, such as page views and clicks, custom events, and e-commerce transactions.

 

Using dataLayer push, developers can dynamically attach data to this object, allowing real-time transfer of crucial user activities to GA4. This direct connectivity serves as the foundation for smooth data collection and analysis, resulting in a better understanding of user interaction.

 

Importance of dataLayer Push:

  • It enables developers to dynamically append structured data to the dataLayer, ensuring real-time transmission to GA4.
  • Through dataLayer push, developers can track custom events, user interactions, and e-commerce transactions with granular detail.
  • Businesses can implement event tracking without modifying existing website or app code.
  • It facilitates the transmission of metadata alongside user interactions.
  • It helps track complex user journeys and interactions across multiple touchpoints.

Understanding dataLayer Push

 

DataLayer push is a method used to inject structured data into the dataLayer object dynamically. This technique enables developers to programmatically pass data points to the dataLayer, where GA4 can record and process them in real time. Examples include user interactions, page views, and custom events.

Using dataLayer push, developers can ensure that crucial interactions and events are reliably captured and delivered to GA4, resulting in an extensive overview of user journeys.

 

Structure of dataLayer Push

1. Initialization of the dataLayer: The first line of code initializes the dataLayer object. It checks if ‘window.dataLayer’ already exists, if not, it creates an empty array.

2. dataLayer Push: The next line of code utilizes the ‘push()’ method to add structured data to the dataLayer object. In this example, we’re pushing an object containing key-value pairs representing the data we want to send to GA4.

3.‘event’ : ‘click’: This key-value pair indicates that an event of type ‘click’ occurred. In GA4, events are used to track user interactions, such as clicks on buttons or links.

4.‘formLocation’ : ‘footer’: This key-value pair provides additional context about the event. It specifies that the click event occurred in a form located in the footer section of the webpage.

 

After the data is pushed to the dataLayer, GA4 automatically detects and processes it. The ‘event’ parameter specifies the type of interaction, while ‘formLocation’ provides additional details about the interaction’s context. In summary, this code snippet demonstrates how dataLayer push is used to send structured data to GA4 for tracking and analysis. It captures a specific user interaction (click event) and provides additional information about where the interaction occurred (form location in the footer).

 

There are two ways by which you can push data into the dataLayer. Actually, there is only one that you should be utilizing, but for the purpose of knowledge, I’ll list both:

1.By adding a Data Layer snippet above the Google Tag Manager container snippet ( dataLayer = [] ). This method is also mentioned in the official GTM documentation. It’s called Data Layer declaration.

 

2.By pushing data with dataLayer.push method

Let’s compare both of them!

Data Layer declaration (not recommended)

This method directly involves declaring the dataLayer object in the HTML code without utilizing the Google Tag Manager (GTM) or another tag management system. While it might seem straightforward, this approach is not recommended due to potential issues.

Here’s an example of the dataLayer declaration method:

In the above example: The ‘dataLayer’ variable is directly declared and initialized as an array containing an object.

The object includes key-value pairs representing data to be sent to Google Analytics 4 or other analytics platforms.

The ‘event’ : ‘page_view’ key-value pair indicates a page view event, while ‘page_title’ : ‘Homepage’ provides the title of the viewed page.

Additional data such as ‘user_id’ can also be included.


However, this method has several drawbacks:

1.Timing issues: Since the dataLayer is declared inline within the HTML, there can be timing issues, especially if scripts relying on the dataLayer are loaded asynchronously. This can lead to data loss or inaccurate tracking.

2.Scalability: Managing a large number of dataLayer variables directly within HTML becomes cumbersome and error-prone. It’s challenging to maintain consistency and track changes across different pages or events.

3.Maintainability: Making updates or modifications to the dataLayer structure requires manual editing of HTML code, which is not efficient or sustainable, especially in larger projects with multiple contributors.


DataLayer push (recommended)

The second way for adding data to the data layer is dataLayer.push, which is preferred and should be your only option. Regardless of where you deploy it (below or above the Google Tag Manager container), dataLayer.push will work properly. Let’s take an example:

 

You have a newsletter registration form (which cannot be easily tracked with a default GTM’s form listener), therefore you decided to ask a website developer to trigger a Data Layer event once a new subscriber successfully entered his/her email address on your website.

If you wish, you can ask your developer for additional information (e.g., form location (because you might have more than one form on the same page)).

Note: the dataLayer name is case-sensitive. This means that only the letter L must be uppercase.
DataLayer.push will not work (because D is uppercase)
datalayer.push will also not work (all letters are lowercase, although L should have been uppercase)

More dataLayer.push() examples

The previously described dataLayer.push examples are rather simple, but if necessary, you can also push data as objects or arrays, such as:

  • The first line of code initializes the dataLayer object. It checks if window.dataLayer already exists, and if not, it creates an empty array.
  • The dataLayer.push() method is used to add an object containing information about transaction products to the dataLayer array.
  • transactionProducts’: This key specifies that the data being pushed represents information about one or more transaction products.
  • Array of product objects: Inside the ‘transactionProducts’ array, there are two product objects representing different items purchased in the transaction:
    Product 1 (T-Shirt):
    ‘sku’: The stock-keeping unit (SKU) code for the T-Shirt.
    ‘name’: The name or description of the T-Shirt.
    ‘category’: The category to which the T-shirt belongs (in this case, ‘Apparel’).
    price’: The price of the T-Shirt (11.99).
    ‘quantity’: The quantity of T-shirts purchased (1).
    Product 2 (Socks):
    ‘sku’: The SKU code for the socks.
    ‘name’: The name or description of the socks.
    ‘category’: The category to which the socks belong (in this case, ‘Apparel’).
    ‘price’: The price of the socks (9.99).
    ‘quantity’: The quantity of socks purchased (2).

Another code snippet we have is a bit more complicated than the above. So let’s break it down and understand.

  • The dataLayer.push() method is used to add an object containing information about a promotional view to the dataLayer array.
  • ‘ecommerce’: This key specifies that the data being pushed represents e-commerce-related information.
  • promoView’: This key specifies that the data pertains to the viewing of promotions.
  • promotions’: This key contains an array of objects, each representing a promotional item viewed by the user.
  • Promotion 1 (June Sale):

             ‘id’: The unique identifier for the promotion (‘JUNE_PROMO13’).

              name’: The name or description of the promotion (‘June Sale’).

             ‘creative’: The creative used for displaying the promotion (‘banner1’).           

              position’: The position of the promotion (‘slot1’).

  • Promotion 2 (Free Shipping Promo):

               ‘id’: The unique identifier for the promotion (‘FREE_SHIP13’).

               ‘name’: The name or description of the promotion (‘Free Shipping Promo’).

              ‘creative’: The creative used for displaying the promotion (‘skyscraper1’).

               ‘position’: The position of the promotion (‘slot2’)

Conclusion

In the vibrant landscape of digital analytics, dataLayer push emerges as the unsung hero, empowering seamless data transmission from websites or apps to analytics platforms like Google Analytics 4. This dynamic method ensures real-time capture of user interactions, enabling businesses to unlock invaluable insights and optimize strategies for unparalleled performance and user engagement. With dataLayer push, the journey from raw data to actionable insights becomes not just efficient, but downright transformative.

FAQs

 

  • Why is dataLayer push preferred over direct declaration?
    DataLayer push offers better timing, scalability, and maintainability compared to direct declaration. It allows for dynamic addition and modification of data points, ensuring accurate and efficient data transmission to analytics platforms like GA4.

  • Can I use dataLayer push with Google Tag Manager (GTM)?
    Yes, dataLayer push is fully compatible with Google Tag Manager. In fact, GTM provides a convenient interface for implementing dataLayer push and managing tags, triggers, and variables.

  • Is dataLayer push suitable for tracking complex user journeys?
    Yes, dataLayer push is well-suited for tracking complex user journeys across multiple                         touchpoints. Developers can capture detailed information about user interactions by                        dynamically appending data to the dataLayer object.

About Author

Ananya - Ananya Seth is a dynamic and skilled IT Professional specializing in Web Analytics and Data Visualization. Serving as a tech consultant, she is dedicated to solving technology-related business problems with innovative solutions. Ananya's expertise spans Core Java, Scripting Languages, Database Administration, Front-End Web Development, and Web Analytics Technologies. In the ever-evolving landscape of information technology, her interest in learning more ranges from Data Analysis to Networking to Cyber Security to Technology Research.

Share This Article:
Facebook
Twitter
LinkedIn
Email
Table of content

Related Stories

Tired of ambiguous direct traffic data skewing your GA4 insights? Dive into our guide as we...
Unlock the art of storytelling through data with our comprehensive guide to building and editing reports...
Embark on a journey of digital mastery as we delve into the dynamic duo of Microsoft...
Discover the ultimate synergy between Google Analytics 4 and Looker Studio, revolutionizing your data analysis journey....