Mastering Cart Tracking in Shopify with Google Analytics 4 using GTM

by ShahzadaAliHassan - 8th November 2023

Introduction

Welcome to our detailed guide on configuring the "View Cart" event in Shopify using Google Analytics 4. This functionality is a game-changer for e-commerce reporting, allowing you to track how many visitors are engaging with your cart page and the items they're considering purchasing. Let's dive into the process.

Prerequisites

Before we begin, ensure you have the following:

A Google Tag Manager container
A Google Analytics 4 property
A Shopify store

Setting Up the Base Configuration Tag

Our first step is to set up the base configuration tag for Google Analytics. This allows us to track events such as page views, user engagement, and more.

Navigate to your Google Analytics 4 property.
Locate the 'Data Streams' section under the property column.
If you don't have a data stream, create one by clicking 'Add Data stream'.
For existing streams, click on your web data stream.
Copy the 'Measurement ID' from the top right corner.

Tip: Remember to create a user-defined constant variable for your Measurement ID in Google Tag Manager to avoid repeated copying and pasting.

Now, let's create a variable in Google Tag Manager to hold our Measurement ID, which is unique for each data stream.

Managing DataLayer Scripts:

Send specific instructions and a script to your developer. This script will add the necessary data layer event to the cart page for tracking the purchase event.
You can find the script and instructions below. Make sure to download the PDF and forward it to your developer.

Tip: Ensure that your developer follows the instructions carefully and tests the implementation to confirm that the data layer event is firing correctly on the cart page.

Instructions for Developer

Send over this document to the developer else following the blog below

Adding the Code Yourself

In the next section, we write the script that will trigger the "View Cart" event on the Shopify store.

Go to the Shopify admin and navigate to the 'Online Store' section under the 'Sales Channels'.
Click on the 'Actions' button and select 'Edit code'.
Find the Google Tag Manager code snippet and paste the view cart event script below it.

DataLayer Snippet for View Cart Events

Here's the script you'll be adding:

Tip: It's essential to format your code correctly to ensure it runs without issues. Use the 'Format code' option in Shopify's code editor.

Creating Tags and Triggers in GTM

The third step involves creating tags and triggers in Google Tag Manager to capture the view cart event.

Create a new trigger for the custom_view_cart event.
Define the event parameters such as items, currency, and value.
Use the Data Layer Variable to access e-commerce object details.

Don't forget to rename your variables and tags for clarity and consistency.

Testing and Verifying the Setup

Finally, it's time to test everything to ensure proper tracking.

Use the preview mode in Google Tag Manager to debug the setup.
Visit the cart page on your Shopify store to trigger the event.
Check the Google Analytics 4 debug view to confirm the event is captured.

Tip: Use the Real-Time report in Google Analytics to verify if the event is firing correctly, especially when you have low traffic.

Conclusion

Configuring the view cart event in Google Analytics 4 is a significant step towards understanding your customers' behavior on your Shopify store. By following these steps, you've learned how to set up the base configuration tag, write and implement the necessary scripts, and ensure that everything is functioning as it should.

Remember to check back in the Google Analytics and Google Tag Manager interfaces to ensure data is being tracked and reported correctly. With these tools at your disposal, you're well on your way to gaining valuable insights into your e-commerce performance.