GA4 ViewItem Event on Shopify using Google Tag Manager

by ShahzadaAliHassan - 1st November 2023

Google Analytics

Shopify

Google Tag Manager

Tutorial

View Item

Introduction

In this blog, we will walk you through the process of configuring the 'view_item' event for GA4 using Google Tag Manager, so you can track user visits to your product pages, the items they view, and various event details. This will be achieved using Google Tag Manager with a Shopify store and Google Analytics 4.

Pre-requisites

Before we dive in, ensure you have the following:

1. Google Tag Manager container set up on your Shopify store.
2. An active Shopify account.
3. A Google Analytics 4 property created.

Configuring Google Analytics 4 with Google Tag Manager

• Go to your Google Analytics property.
• On the bottom left corner, select "Admin".
• Under the property column, navigate to "Data Streams".
• Data stream acts as a connection between your Shopify store and Google Analytics property.
• If you haven't set up a web stream, do so now. Otherwise, find your "Measurement ID".

Set up Variables in Google Tag Manager:

• Go to Google Tag Manager.
• Create a user-defined constant variable.
• Paste the copied Measurement ID and rename it to "G4 Measurement ID".

Creating the GA4 Configuration Tag:

• In Google Tag Manager, navigate to the tags section.
• Create a new tag that will track common events such as page views, user engagement, and session starts.
• Previously, we had the G4 configuration tag, but now it's replaced by Google tag. Use your G4 Measurement ID as the tag ID.
• Rename the tag for clarity, for example, "gtag G4 configuration tag".

Setting up the View Item Trigger

1. In Google Tag Manager, navigate to the triggers section.
2. Create a custom event named "custom view item" (to avoid potential issues with other integrations or apps).
3. Next, create a tag in GTM to send this view item event to GA4. Make sure the event name is the standard "view item".
4. To test the integration, use the GTM preview mode and visit one of your product pages. Ensure the "view item" event is triggering correctly.

Shopify Store Configuration for the Event

To successfully trigger the "view item" event, the Shopify store must also be configured. This requires some coding:

1. Go to your Shopify store backend.
2. Navigate to the online store and themes section.
3. Before making any changes, create a duplicate of your theme for backup purposes.
4. Add the necessary JavaScript code for the event, from the next section.
5. The code snippet will trigger the view item event. However, to execute this on your website, you must include the snippet in your main theme file.
6. Once done, refresh your product page and validate that the custom event triggers correctly.

Certainly! Let's break down the code snippets and provide a detailed explanation along with steps on how to add these snippets to a Shopify store.

Implementing View Item Event Data Layer Code for Shopify

This section outlines the process of setting up and integrating the dataLayer object on a Shopify site for effective data tracking and analytics, particularly for view item events.

Initializing the Data Layer

The initial step involves a code snippet that activates the dataLayer array. This snippet also checks if the page is a product page. On identifying a product page, it triggers a special code segment, 'datalayer-product'.

Gathering Product Information

The core functionality of the 'datalayer-product' snippet lies in capturing key product data when a user lands on a product page. It performs the following:

1. Recognizes and captures the selected product variant.
2. Builds an itemObject containing detailed product information.
3. Pushes this data into the dataLayer upon the document’s load.

Embedding Theme-Level Data Layer Code

For complete integration, include the 'head-datalayer' snippet in your theme. Typically, this part of the code is placed in the GTM Body Code area, depending on your Shopify theme's configuration.

Steps for Data Layer Implementation in Shopify:

1. Backup Your Theme: Start by backing up your existing theme.

2. Navigate to Theme Files: Log into your Shopify Admin, head to Online Store > Themes. Under "Actions," select "Edit code" for the active theme.

3. Incorporate Head Data Layer Code: Locate theme.liquid in the sidebar. Insert the "Head DataLayer Code" within the <head> section.

4. Insert Product Data Layer Code: Create a new snippet (name it datalayer-product.liquid if necessary) and add the "Product DataLayer Code" there. Save your changes.

5. Apply Theme Data Layer Code: Determine the appropriate spot within the <head> section of theme.liquid for the "Theme DataLayer Code." Place it there and save.

6. Verify Functionality: Test by visiting a product page. Open the developer console in your browser and confirm that the custom_view_item event activates and the dataLayer displays accurate product details.

Following these instructions will ensure your Shopify site is well-equipped to capture and leverage data for tracking and analysis.

Integrating Enhanced E-commerce Parameters with GTM

Although the basic "view item" event is now configured, to get detailed e-commerce metrics such as item id or item name, further integration is needed.

1. In GTM, under variables, create a new setting variable.
2. Use the Google tag event settings and add an event parameter for items.
3. Create a data layer variable to fetch the items array.
4. Save and rename it for clarity.

Conclusion

Configuring the "view item" event using Google Tag Manager, Shopify, and Google Analytics 4 can provide detailed insights into user behavior on your product pages. By following this tutorial step-by-step, you can effectively set up and track this crucial e-commerce event.