Mastering Cart Tracking in Shopify with Google Analytics 4 using GTM

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.

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.

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:

liquid
<script type="text/javascript">
  console.log("datalayer-cart snippet is loaded")
  cart_data = {{ cart | json}};

  var product_details = cart_data.items.map((item, index)=>{
      return {
            item_id: item.id,
            id: item.id,
            item_name: item.product_title,
            item_brand: item.vendor,
            item_category: item.product_type,
            quantity: item.quantity,
            currency: {{ shop.currency | json }},
            google_business_vertical: 'retail',
            price: parseFloat(item.price / 100.0)
          }
      });

  // Calculate the total value of the cart
  var total_value = product_details.reduce((acc, item) => acc + (item.price * item.quantity), 0);

  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
      event: "custom_view_cart",
      currency: {{ shop.currency | json }},
      ecommerce: {
          value: total_value,
          currency: {{ shop.currency | json }},
          items: product_details
      }
  });
</script>

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.

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.