Window DataLayer Explained in Detail

In this comprehensive guide, we will explore the significance of the data layer in web analytics implementation. We will begin by demystifying the concept of window.datalayer, explaining its role in GTM’s process of data tracking. Furthermore, we will delve into the intricacies of window data layer, highlighting its importance, best practices, and the flexibility and scalability it offers. So, let’s get started on this informative journey.

What is Window DataLayer?

Window dataLayer acts as a temporary container or data collection layer for collecting and organising data on a web page in web analytics and tracking implementations. It allows developers to collect, store, and pass data between different scripts or tools on a website. This makes tracking and managing user interactions, events, and other data points easier for analytics or marketing purposes. Furthermore, it is specific to the browser’s window object, making it globally accessible across different scripts.

Let’s use a scenario to explain this further; imagine yourself as a website or application owner who has decided to implement GA4 tracking through Google Tag Manager to understand your user’s behaviour better. When a user visits your website or application, the actions he takes, such as page views and button clicks, the data layer collects these data within your browser, and from the data layer, it is sent to GTM and from GTM to GA4, where you get to have access to it for your analytics. The image below illustrates this clearly; each data movement stage can be considered a layer.

Window DataLayer provides a standardised way to collect data on a web page and share the data between the website and various tracking tools or marketing platforms. It acts as a bridge, allowing data to be easily collected and organised. Moreover, with the dataLayer, you can collect custom events that are unique to your website or application. 

Implementing the DataLayer typically involves utilising an array of JavaScript objects. In JavaScript, you can write a code to create an array like a list that can hold multiple items. Each item in the array can be a JavaScript object, which is a way to organise and store related information together. These objects can have different properties, like variables holding specific values. Using an array of JavaScript objects, the DataLayer can store and manage data in a structured and organised manner.

Think of a JavaScript object as a special container that can hold different pieces of information. It’s similar to a box that can store different toys. Each piece of information in the object is called a property, and it has a name and a value, which are its attributes, just like the name of a toy and what makes it unique. The object helps organise and keep track of all these pieces of information. So, a JavaScript object is like a special container that holds different pieces of information, just like a toy box that holds different toys. Each object represents a specific event or interaction on the website and contains various data attributes. These attributes can include page URLs, user actions, product details, or any other relevant data requiring tracking.

By using the DataLayer, website owners can track user behaviour, measure conversions, optimise marketing campaigns, and make data-driven decisions. It simplifies the process of data collection and integration with different tracking tools, providing a more efficient and streamlined approach to data management.

Adding a script tag in the head section of the web page source code initialises it on your webpage; this creates an empty array that will serve as the DataLayer container. Suppose you’re using GTM for your tagging implementation; there’s no need to initialise dataLayer as it would be done automatically by the GTM container tag script that you will add to the head section of your webpage.

The JavaScript push() method adds a JavaScript object representing the data whenever there is a need to send data to the DataLayer. This object contains key-value (variable-attributes) pairs that represent different data attributes. The DataLayer collects and stores the pushed data in the array, creating a record of events and interactions on the website.

When you deploy your tracking tools or marketing platforms scripts in your source code, these scripts listen for changes in the DataLayer and capture the relevant data based on the specified information in the data layer for analysis and reporting.

Businesses can utilise the data for various purposes, such as tracking user behaviour, measuring conversions, and optimising marketing campaigns. The tracking tools or marketing platforms use the data from the DataLayer to generate reports, provide insights, and enable data-driven decision-making.

Overall, the Window DataLayer provides a flexible and standardised data collection and integration approach.

Benefits of using window.datalayer

Using the Window DataLayer has several benefits; some of the benefits include:

1. Easy data collection: The DataLayer helps collect and organise data from a website or application, such as user actions or product details, and send it to multiple tracking tools or marketing platforms simultaneously. It acts like a container that holds all the important information.

2. Standardised format: The DataLayer ensures that the data is stored consistently and structured. This makes it easier for different tracking tools or marketing platforms to understand and use the data effectively.

3. Simplified integration: It acts as a bridge, allowing data sharing to be seamless between systems without complex coding.

4. Flexibility and customization: You can customise the DataLayer to include specific data attributes, such as custom events that are unique to your website or app. This allows website owners to track and analyse the data that matters most to their business.

Overall, the Window DataLayer simplifies the process of collecting, organising, and sharing data, making it easier for website or application owners to understand user behaviour, improve marketing efforts, and make data-driven decisions.

How to set up window dataLayer correctly?

Now, let’s look at how to set up window dataLayer correctly for a website when implementing GA4 tracking through Google Tag Manager. To set up the Window DataLayer correctly, please follow these steps:

1. Initialization: When using GTM for tagging, GTM creates a dataLayer by default when you place your container tag in the head section of your website’s HTML code. For other tracking tools, add the following script tag to create an empty DataLayer array in the head section of your web page source code.

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

2. Push data to the dataLayer: Whenever you want to send data to the dataLayer, use the push() method to add a JavaScript object representing the data. You can customise the dataLayer to include additional relevant data attributes to your website including events for tracking specific actions. You can use events to track specific user actions like button clicks, form submissions, or video plays. When pushing data to the DataLayer, include an ‘event’ key with a descriptive name for the action. For example to track a button click event, you can push an object with the buttonName.

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'event': 'buttonClick',
    'buttonName': 'Sign Up'
  });
</script>

The “window.dataLayer = window.dataLayer || [];” line is an important piece of code as it checks if the “dataLayer” variable already exists in the global scope (window object). If it doesn’t exist, it creates it.

In this example, ‘event’ is the key while ‘buttonName’ is the value showing the key-value pair JavaScript object. The value collected changes as the user journey across your website changes. You can push data objects to the DataLayer from different parts of your website, such as user interactions, form submissions, or specific events. The Push method will preserve what is already in the dataLayer and add the new one indicated. It is essential to state here that you have to send your push code requirement, just like the one above, to your website developers to implement on the web page, ensuring dynamic data capturing.

3. In GTM, define the dataLayer variables you have pushed to the dataLayer. Use them to set up the necessary tags and triggers for your events.

4. Test and validate: After setting up the DataLayer and integrating tracking scripts, thoroughly test and validate the sent data to ensure accuracy. Importantly, utilise browser developer or debugging tools provided by the tracking tools to verify the accurate data capture.

5. Document and maintain: Document the data attributes and events you track in the DataLayer, along with their purpose and usage. This will help you maintain and update the DataLayer as your website evolves.

Remember, the specific implementation of the DataLayer may vary depending on your website’s technology stack and the tracking tools you use. It’s essential to refer to the documentation and guidelines provided by the tools you integrate for accurate implementation instructions. Visit link to view Google’s documentation on datalayer.

Window Datalayer.push examples

As previously emphasised, the window.dataLayer.push() method adds data to the window dataLayer object. It allows you to push new variables, events, or data objects into the dataLayer, enabling their access and utilisation for tracking, analytics, or other purposes. To better understand the window dataLayer concept, let’s examine some examples of using window.dataLayer.push(), this will further aid your understanding.

Sending GA4 Content Group

In GA4 (Google Analytics 4), a content group is a way to categorise and organise your website or app content into logical groups. It allows you to analyse and compare the performance of different content groups, such as product categories, article topics, or page types. 

To send GA4 Content Group data using the Window dataLayer’s push() method, you can include the relevant content group information in the data object. Here is an example:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'event': 'contentGroup',
    'contentGroup1': 'Category A',
    'contentGroup2': 'Subcategory B',
    'contentGroup3': 'Product C'
  });
</script>

In this particular example, the keys contentGroup1, contentGroup2, and contentGroup3 send the content group information. It is important to note that you should adjust the values to align with your specific content group structure and naming conventions.

For a comprehensive understanding of GA4 content groups, I highly recommend referring to our article on the topic. It provides detailed insights and explanations on what GA4 content groups are and how you can effectively utilise it.

Sending User ID in GA4

To send a User ID to Google Analytics 4 (GA4) using the Window DataLayer’s push() method, you can include the User ID information in the data object. Here’s an example:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'event': 'setUserID',
    'UserID': '123456789'
  });
</script>

In this example, the key UserID sends the User ID corresponding to ‘123456789’. Adjust the value to match the actual User ID of the logged-in user on your website.

Ensure to trigger this push() event when the user logs in or the User ID is available. In this example, you can customise the event name (‘setUserID’) to match your preferred naming convention.

It is important to state here that in GA4, the creation of the UserID is not automatic, unlike the user_pseudo_id. Instead, you need to generate a unique user identification ID for each signed-on user on your platform using your user authentication system. Once your development team has implemented a system to generate these IDs, you can push the User ID to the Data layer using the code above.

By incorporating this code, you can ensure the User ID is properly captured and associated with user interactions and events within GA4.

Please refer to our article to understand how to set UserID in GA4.

Sending GA4 Enhanced Ecommerce

To send GA4 Enhanced Ecommerce data using window.dataLayer.push(), you can use the following code as an example:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'view_item',
  'ecommerce': {
    'items': [{
      'item_id': 'ABC123',
      'item_name': 'Example Product',
      'item_category': 'Example Category',
      'item_variant': 'Example Variant',
      'price': 9.99,
      'currency': 'USD',
      'quantity': 1
    }]
  }
};
</script>

In the above script, we are pushing an event called ‘view_item’ to the dataLayer, along with the relevant ecommerce data for a specific item. Notably, this includes details such as the item ID, name, category, variant, price, currency, and quantity. Adjust the values according to your specific use case and repeat the window.dataLayer.push() for other events or data you want to send to GA4 Enhanced Ecommerce.

Other Examples

In addition, let’s examine other examples of utilising window.dataLayer.push() to send data to the dataLayer:

Example: Sending File Download Event

<script>
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
        'event' : 'file_download',
        'user_id' : '{{unique userId}}',
        'file_extension' : '{{file type}}',
        'file_name' : '{{file name}}'
    });
</script>

Example: Sending User SignUp 

<script>
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
        'event' : 'sign_up',
        'user_id' : '{{unique userId}}',
        'method' : 'Email'  (or Google Auth, Facebook Auth)
    });
</script>

Example: Sending Form submission

<script>
 window.dataLayer = window.dataLayer || [];
 dataLayer.push({
   	  'event':'form_submitted',
   	  'form_id': '3A-12',
   	  'form_name':'Contact Form',
   	  'form_destination': '/thank-you-page/',
   	  'form_submit_text': 'Send a Message',
   	  'submission_id': 4148,
});
</script>

Why datalayer push is not working?

There could be several reasons why dataLayer push is not working. Here are some common issues to consider when this happens:

1. Incorrect placement of the DataLayer script: If you are using GTM, this shouldn’t come up as an issue. But for other instances, ensure that the DataLayer script is placed correctly in the head section of your website’s HTML code. You should place it before any other scripts that rely on the DataLayer.

2. Typo or syntax error: Double-check the syntax of your DataLayer push code to ensure there are no typos or syntax errors. Ensure all opening and closing brackets, parentheses, and quotation marks are properly balanced.

3. Missing or incorrect event name: If you use an event-based approach, ensure that the event name used in the DataLayer push matches the event name expected by your tracking tool or marketing platform. Verify that the event name is spelled correctly and consistently across your code.

4. Timing issue: If you push data to the DataLayer before the DataLayer script has loaded or initialised, it may not work as expected. Ensure the DataLayer script is loaded and available before pushing data.

5. Conflicting scripts or integration issues can arise. So, ensure there are no errors or conflicts in the browser console that could prevent the DataLayer push from executing. Additionally, ensure proper integration of the tracking tool you are attempting to send data to. Use browser developer or debugging tools provided by your tracking tool to inspect the DataLayer and confirm the accurate data pushing. Look for any error messages or warnings that may indicate the cause of the issue.

By considering these potential issues and troubleshooting accordingly, you should be able to identify and resolve the problem with your DataLayer push.

Do you need help to set up Window DataLayer?

Remember, a properly implemented DataLayer can help you collect and utilise data effectively for analytics, tracking, and marketing purposes. If you require professional assistance setting up Window DataLayer or any other web analytics services, don’t hesitate to contact us, as we specialise in analytics and tracking implementations. We will provide hands-on assistance and ensure the DataLayer is implemented correctly according to your requirements.

LEVEL UP YOUR ANALYTICS

We will help you set up analytics and find business insights to improve the bottom line.

CONTACT US

Final Word

In conclusion, the Window DataLayer is a powerful JavaScript object that is fundamental in a GTM setup. It serves as a temporary storage container for data within a web browser. It acts as a bridge between a website and various tracking tools or marketing platforms, allowing for data collection, organisation, and sharing in a standardised format. By implementing the DataLayer, website owners can easily track user behaviour, measure conversions, and optimise marketing campaigns. Its flexibility and accessibility across different scripts make it an essential tool for effective data collection and integration. With the Window DataLayer, businesses can make data-driven decisions and enhance their overall analytics and tracking implementations.

Frequently Asked Questions