[GA4] How to figure out Events and the DataLayer in Google Analytics 4

Posted June 30, 2024 by Jasper Poon

In the dynamic world of eCommerce, understanding user behaviour is essential.

Google Analytics 4 (GA4) offers a comprehensive way to track the eCommerce journey, providing insights into the event funnel. It helps identify where users drop out and how they engage with your site, from product views to purchases.

With the data collected by GA4, you can define steps to avoid or minimise user drop-out at certain checkout stages. For example, you could provide a coupon or extra loyalty points at a step that is associated with the most drop-offs; further, you can enhance those pages to make the checkout process more attractive.

What are Events on GA4?
What is a DataLayer and how does it associate with Google Analytics 4 events?

So, what are Events on GA4?

Google Analytics 4 (GA4) is based on an event-driven model. Simply speaking, events refer to any user activities or interactions with the website or application.

To understanding this model easily, these events can be categorised into three levels of interaction:

Level 1: Page Load

Definition: When the page is loaded.
Event Example: page_view

Level 2: Impression

Definition: When a component on the website is displayed, such as a website banner or pop-up box.
Event Examples: view_promotion, view_item_list, ad_impression

Level 3: Interaction

Definition: When the user interacts with a website component, such as by clicking, scrolling or form submission.
Event Examples: select_promotion, select_item, scroll, form_submit

Google Analytics 4 provides basic event tracking once you connect your website or application, covering actions such as scrolling or file downloads. However, if you wish to understand user behaviour in a more comprehensive manner, particularly for eCommerce-related interactions, additional steps are required.

Google Analytics 4 has created a list of recommended events. These events are related to eCommerce activities, such as viewing a product list or adding an item to the shopping cart.

You can use an eCommerce platform like Shopify or BigCommerce, which can automatically generate some eCommerce-related events. This setup is straightforward, but if an event encounters an error, you may need to contact customer support, giving you less control over event measurement.

Plus, the automatically-generated events are limited in scope. If you need to track specific user interactions, or if your website isn’t built with these eCommerce platforms, you will need to set up customised user events using DataLayer implementation.

What is a DataLayer and how does it associate with Google Analytics 4 events?

A DataLayer, is a JavaScript feature, which is an object used in Tag Management System (e.g. Google Tag Manager) or gtag.js to pass information to tags, allowing events or variables to be used for setting triggers.

// Clear the previous ecommerce data
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  ecommerce: null
});

// Push add_to_cart event with relevant data
window.dataLayer.push({
  "event": "add_to_cart",
  "ecommerce": {
    "currency": "USD",
    "value": 28.00,
    "items": [
      {
        "item_id": "SKU_12345",
        "item_name": "Google Eco Tee White",
        "affiliation": "Google Merchandise Store",
        "discount": 0,
        "index": 0,
        "item_brand": "Google",
        "item_category": "Apparel",
        "item_category2": "Adult",
        "item_category3": "Shirts",
        "item_category4": "Crew",
        "item_category5": "Short sleeve",
        "item_variant": "SM",
        "location_id": "product_detail_page",
        "price": 28.00,
        "quantity": 1
      }
    ]
  }
});

In simple terms, an event DataLayer for GA4 typically consists of:

Event Name: To define the type of the interaction
Variable: To specify the additional information associated with the event.

*For definitions of each item variable and the event, please view here.

Please also find the data pipeline below:

Here, when you click the “add to cart” button, a DataLayer will be triggered simultaneously, containing the event details and product information. Through this DataLayer, this user interaction information will be passed to Google Analytics 4 (assuming the implementation on Tag Manager is properly configured).

So, what next?

In my next article, I will use Google Merchant Store as an example to explain the function of each eCommerce user interactions. Dive in to see how GA4 can support and improve your eCommerce strategy.

Blog