GA4 AddToCart Event on Shopify using Google Tag Manager

by ShahzadaAliHassan - 2nd November 2023

Google Analytics 4

Shopify

Google Tag Manager

Add to Cart

Introduction

In this blog, we will walk through the process of configuring the 'add_to_cart' event for a Shopify store using Google Tag Manager (GTM) and Google Analytics 4 (GA4).

Prerequisites

Before we jump in, ensure you have the following:

• A Google Tag Manager and Google Analytics 4 account.
• A Shopify store with the Google Tag Manager web container already installed.

If you haven't set these up yet, you can refer to this page.

Sections Covered

This blog is divided into four main sections, aiming to cover everything from basic event tracking setup to the specifics of configuring 'add_to_cart' events.

1. Web Configuration Tags: This covers how to track basic events like page views, user engagement, and session starts.
2. Configuring Add to Cart Event on Button Click: A deep dive into setting up the event triggered by a button click.
3. Using Data Layer: How to directly trigger the add to cart event from Shopify and send enhanced e-commerce data to Google Analytics 4.
4. Configuring GTM for dataLayer event & Testing: Ensuring everything has been configured correctly and publishing the Google Tag Manager containers.

Section 01: Web Configuration Tags

To start tracking basic events on your site, follow these steps:

1. Head to analytics.google.com and navigate to Admin located at the bottom left corner. Under the Property column, you'll find the option for Data Streams. These streams act like pipelines connecting your website to Google Analytics 4.
2. If you have an existing web stream, great! Otherwise, create a new one.
3. Copy the Measurement ID as you'll be referencing it multiple times in the Google Tag Manager.
4. Switch over to tagmanager.google.com and navigate to the Variables section. Here, create a constant variable named G4 Measurement ID to store the copied ID. This makes it easily accessible throughout the setup.
5. Next, head to the Tag section. Create a new tag named GT G4 Configuration Tag to track all website pages. Under Tag Configuration, select the Google Tag option. This new method replaces the old Google Analytics 4 configuration tag. Point the Google ID field to the G4 Measurement ID you just created.
6. Once the tag is created, hit Preview to connect it to your website. You should now be able to see the tag firing on your site. In the Debug View, confirm that the configuration tag is triggered and a page event (page_view) is sent.

Section 02: Configuring 'Add to Cart' Event on Button Click

1. Identifying the Button: First, head over to any product page on your Shopify store. You'll typically see a button labeled "Add to Cart". When a user clicks on this, ideally, an event should trigger in the GTM container.

2. Creating the Trigger in GTM: If you've noticed that the event hasn't triggered upon button click, it's likely because there isn't an active trigger set up in GTM for this action. Navigate to the triggers in GTM and create a new trigger for button click events. Initially, you might not want to be specific; instead, create a general button click trigger. Name it something like "All Elements" and preview it.

3. Gathering Additional Information: Clicking the "Add to Cart" button after previewing the trigger will allow you to see additional information about the event in GTM's debug view. Here, you might notice that details like click ID and click Text are missing. This is because the relevant variables haven't been enabled yet.

4. Enabling Button Element Variables in GTM: Within GTM, head to the variable section and enable built-in variables like button element classes, target URLs, and especially click text. Once enabled, re-preview and click the "Add to Cart" button again. Now, you should see that the click Text variable has captured the "Add to Cart" action.

5. Creating a Specific Trigger: With the new information gathered, modify the generic button click trigger you created. Instead of having it fire on all clicks, specify it to trigger only when the click Text contains "Add to Cart". This ensures the trigger is only activated for the desired action.

6. Creating a Tag for the Event in GTM: Now, create a tag that will fire upon this trigger. Use a GA4 event tag, and for the event name, use the standard "add_to_cart". This naming convention follows GA4's standards. Name this tag something indicative, like "GA4 EEC AddToCart".

7. Testing Your Configuration: After saving, re-preview and test the configuration by heading back to your Shopify store, selecting a product, and clicking "Add to Cart". Ideally, the "Add to Cart" event should trigger in the debug view of GTM. Furthermore, you can validate this event in your GA4 property's debug view or real-time report.

Section 03: Advanced Tracking with Enhanced E-Commerce Data

This section is for those who wish to capture more data, like the item ID, name, value, quantity, etc., when the "Add to Cart" event is triggered.

DataLayer Code Snippets Overview

This section provides instructions for incorporating Google Tag Manager's dataLayer object into a Shopify store. The primary objective is to track the custom_add_to_cart event when a user clicks the AddToCart button on a product page in Shopify.

Initialization of DataLayer in Head Section

This script sets up the dataLayer array, if not already in place. It specifically targets 'product' page templates to activate a unique snippet, termed 'datalayer-product'.

Main Product Page DataLayer Script

This portion of code is crucial for updating the dataLayer object with detailed product information when a product page is accessed:

1. It captures the currently selected product variant.
2. It creates an itemObject filled with extensive product information.
3. Upon the loading of the document, this information is pushed into the dataLayer object.

Theme-Level DataLayer Script

This snippet, which typically resides in the head-datalayer, is included here. It should be added to the GTM Body Code section within your Shopify theme.

Steps for Integrating DataLayer Scripts into Shopify:

1. Backup First: Ensure you back up your existing theme before making modifications.

2. Enter Theme Files: Log in to the Shopify Admin panel. Navigate to Online Store > Themes. Use the "Actions" dropdown for your active theme and choose "Edit code".

3. Insert Head DataLayer Script: Find theme.liquid in the left sidebar and place the "Head DataLayer Code" within the <head> tags.

4. Incorporate Product DataLayer Script: Select "Add a new snippet" in line with your Shopify version. Name it datalayer-product.liquid and paste the "Product DataLayer Code". Save the updates.

5. Place Theme DataLayer Script: Identify the appropriate location for this script (usually in the <head> tags of theme.liquid). Add the "Theme DataLayer Code" there and save.

6. Verification: Open a product page on your Shopify site and access the browser's developer console. Check if the custom_add_to_cart event triggers and the dataLayer shows accurate product data.

Note: These steps are based on a standard Shopify configuration. Custom themes might necessitate a different approach. Always conduct extensive testing before and after applying these changes.

Section 04: Setting Up Google Tag Manager for Enhanced Event Tracking

Modifying the Existing Trigger

1. Navigate to your GTM web container.
2. Find the existing tag related to the GA4 'Add to Cart' event.
3. Modify the trigger:
   • Instead of a button click event, we'll leverage custom events.
   • Adopt a naming convention, preferably starting events with "custom_". For instance, our 'Add to Cart' event could be named custom_ADD_to_cart. This ensures there are no naming conflicts with other potential events or plugins.

Refining Event Settings

With GA4, you can provide additional details such as currency, items added, and their values. These details offer deeper insights into customer behaviors.

1. In the GTM tag setup for the 'Add to Cart' event, navigate to event properties.
2. Here, create an event settings variable. This is analogous to how Universal Analytics has a settings variable.
3. Configure the necessary parameters, ensuring they align with what's available in GA4.
   • For instance, parameters like "items", "currency", and "value" should ideally have a checkmark next to them, signifying their availability in GA4.

Validating Events in Google Analytics 4

After setting up your events in GTM, it's crucial to ensure that they're being captured correctly in GA4.

1. Trigger the 'Add to Cart' event on your website, either by adding a product to the cart or simulating the event.
2. Open GA4 and navigate to the 'Real-time' tab.
3. Here, you should see the 'Add to Cart' event being registered.
   • Delve deeper by checking the specifics of the event. This includes the product name, ID, currency, and any other parameters you've set up.

Conclusion

Setting up enhanced event tracking using Google Tag Manager and Google Analytics 4 is an invaluable asset for e-commerce retailers. It provides insights into customer behaviors, preferences, and potential bottlenecks in the buying process. As always, regular validation ensures you're on top of any changes or issues that might arise. Happy tracking!