GA4 ViewItemList Event on Shopify using Google Tag Manager

by ShahzadaAliHassan - 28th November 2023


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:

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


Implementing GTM Snippets on Shopify

Verifying GTM Setup on Shopify

Google Analytics 4 Configuration Tag Setup

Previewing GA4 Configuration in GTM

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:

  1. It first detects the current variant of the product.
  2. Constructs an itemObject containing comprehensive product details.
  3. Adds this information to the dataLayer object once the document loads.
  4. 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:

  1. Create a Backup: Always start by backing up your current theme for safety.

  2. Access Theme Files: Log in to your Shopify Admin, go to Online Store > Themes, select your active theme, click "Actions," and choose "Edit code".

  3. Insert Head DataLayer Script: In the theme.liquid file found in the sidebar, insert the "Head DataLayer Script" within the <head> tags.

  4. 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.

  5. 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.

  6. 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

Testing & Publishing Changes in GTM

Verifying Event Data in GA4 Debug View


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.