GA4 ViewItemList Event on Shopify using Google Tag Manager

by ShahzadaAliHassan - 28th November 2023

Introduction

This blog post will guide you through configuring the "View Item List" event in Google Analytics 4 (GA4) using Google Tag Manager for your Shopify store. This new event, introduced in e-commerce tracking, resembles the impression event from Universal Analytics. GA4 simplifies the process, making it more intuitive to build different reports. This Blog is divided into four sections:

Configuring Google Tag Manager (GTM) Container on Shopify: We'll set up the GTM container on Shopify to track events across various pages.
Configuring Google Analytics 4 Property: We'll configure the GA4 property in GTM to track basic events like page views and user engagement.
Setting Up Data Layer Event Scripts in Shopify: Scripts will be configured to fire the "View Item List" event.
Creating Tracking Scripts in Google Tag Manager: We'll finalize the tracking scripts in GTM to send the event to GA4.

Prerequisites

Google Analytics 4 and Google Tag Manager accounts.
A Shopify store.

Implementing GTM Snippets on Shopify

Create a Container: In GTM, create a container named "trackingacademy.com" for your Shopify web store.
Install Head and Body Snippets: Add the GTM head code right under the opening head tag in the Shopify theme.liquid file. Similarly, paste the body code right after the opening body tag.

Verifying GTM Setup on Shopify

Use GTM's preview mode to verify the setup. A debug window will attach to your Shopify store for monitoring changes.

Google Analytics 4 Configuration Tag Setup

Creating a Web Data Stream in GA4: In GA4, create a web data stream for your Shopify store. Copy the unique measurement ID.
GA4 Measurement ID Setup in GTM: In GTM, create a variable for the measurement ID for reuse.
Firing GA4 Configuration Tag on All Pages: Create a tag in GTM that fires the GA4 configuration tag on all Shopify store pages.

Previewing GA4 Configuration in GTM

Use GTM's preview mode to ensure that the GA4 configuration tag is firing correctly on all pages.

Setting Up Data Layer Event Scripts in Shopify

Head DataLayer Code

This script initiates by setting up the dataLayer array. It detects if the user is on a product page and, in such cases, activates the 'datalayer-collection' snippet.

Collection Page DataLayer Code

This script’s main role is to enhance the dataLayer object with detailed information about products on a collection page:

It first detects the current variant of the product.
Constructs an itemObject containing comprehensive product details.
Adds this information to the dataLayer object once the document loads.
The file should be saved as datalayer-collection.liquid.

Theme DataLayer Code

This script activates the head-datalayer snippet, a crucial component in the head section for integrating head datalayer code in your Shopify theme. Include it in the GTM Body Code.

Guidelines for DataLayer Script Implementation in Shopify:

Create a Backup: Always start by backing up your current theme for safety.
Access Theme Files: Log in to your Shopify Admin, go to Online Store > Themes, select your active theme, click "Actions," and choose "Edit code".
Insert Head DataLayer Script: In the theme.liquid file found in the sidebar, insert the "Head DataLayer Script" within the <head> tags.
Add Product DataLayer Script: Choose to "Add a new snippet" (this option varies in different Shopify versions). Name it datalayer-product.liquid and input the "Product DataLayer Script". Remember to save your changes.
Place Theme DataLayer Script: Identify the best place (typically within the <head> section in theme.liquid) for the "Theme DataLayer Script". Insert and save it.
Confirm Integration: Test the setup by visiting a product page on your Shopify store. Use the developer console in your browser to ensure that the custom_view_item event is triggered and the dataLayer object shows accurate product data.

Creating Tracking Scripts in Google Tag Manager

Setting Up Data Layer Variables in GTM: Create data layer variables in GTM to extract values for items array and item list names.
Assigning Currency Parameters in GTM: Set up a variable for the currency parameter.
Finalizing GA4 Event Tag Configuration: Create a GA4 event tag in GTM that sends the "View Item List" event to GA4. Use the previously configured variables and triggers.

Testing & Publishing Changes in GTM

Test the setup using GTM's preview mode and then publish the container to apply the changes.

Verifying Event Data in GA4 Debug View

Checking Event Firing: In GA4's debug view, verify that the "View Item List" event is firing correctly with all parameters.
Reviewing in Real Time Reports: Confirm the event data in GA4's real-time reporting section.

Conclusion

Once published, the GA4 event tracking will be active on your Shopify store, capturing "View Item List" events. These data points will be available in custom reports and Google Looker Studio after processing. For more detailed, step-by-step instructions, refer to the linked blog post and PDF in the description.