The New Way of Shopify Tracking: Harnessing the Power of Customer Events

Introduction

Shopify’s recent introduction of Shopify Customer Events marks a significant shift in how store owners can track and understand customer behavior. This blog post delves into the new tracking paradigm, explaining why Shopify’s Checkout 2.0 mandates the use of Customer Events, the numerous benefits of this approach, how Shopify Pixels works, example integrations, and the challenges and solutions associated with Google Tag Manager (GTM) in this new context.

The Shift to Customer Events with Shopify Checkout 2.0

With the release of Shopify Checkout 2.0, Shopify has overhauled how tracking is managed, making Customer Events a crucial part of the process. Unlike previous versions, Checkout 2.0 is designed with a more sophisticated, customizable checkout experience that can only be accurately tracked using Customer Events.

Why the Change?
Shopify’s decision to move to Customer Events is driven by the need for more granular and reliable data collection during the checkout process, which is critical for understanding user behavior and optimizing conversion rates.

The Impact on Store Owners
For merchants, this means that traditional tracking methods, such as those solely relying on GTM, may no longer provide the complete picture needed to optimize sales funnels effectively.

Why Use Shopify Customer Events?

Building on the previous discussion of the advantages of Shopify Customer Events, let’s dive deeper into why they’re an indispensable tool for modern Shopify stores:

Seamless Shopify Integration
Because Shopify Customer Events are native to the platform, they ensure consistent and reliable data, reducing the risk of discrepancies that can arise with third-party tools.

Accurate, Granular Data
Customer Events capture detailed, specific interactions across your site, allowing for a better understanding of user behavior, particularly during the critical checkout phase.

Privacy Compliance
As privacy regulations tighten, Shopify’s built-in compliance features with Customer Events help store owners avoid the complexities of managing third-party tracking tools.

How Shopify Pixels and Customer Events Are Injected

Shopify Pixels, which are responsible for capturing Customer Events, are injected directly into your store via iFrames. This approach is designed to maintain a separation between your site’s content and the tracking scripts, which can provide several benefits:

Security
By using iFrames, Shopify ensures that the pixel code runs in an isolated environment, minimizing the risk of security issues that can arise from direct script injections.

Consistency Across Devices
The iFrame method ensures that pixels fire correctly across different devices and browsers, providing consistent tracking results.

Potential Drawbacks
However, this method can sometimes introduce challenges, such as the inability of some third-party tools to interact with the content within the iFrame, leading to issues like the one described below with Google Tag Manager.

The Google Tag Manager Issue: Limitations in Preview Mode

One of the current limitations that store owners face is the issue with Google Tag Manager’s Preview Mode. Unfortunately, GTM’s Preview Mode cannot fully measure Shopify Customer Events due to the way these events are tracked within the iFrame.

Why GTM Preview Falls Short
The Preview Mode of GTM isn’t designed to interact with content inside iFrames, meaning it cannot accurately display or test Shopify Customer Events. This can make debugging and ensuring proper setup more challenging for store owners who rely on GTM for their tracking needs.

Workarounds and Solutions
To verify that Customer Events are correctly installed, Shopify store owners should use Shopify’s native event reporting tools or third-party analytics tools that are fully compatible with iFrame tracking. Additionally, Shopify provides built-in tools to check the status and performance of your pixels, ensuring that your tracking setup is working as intended.

Measuring Customer Events: Ensuring Correct Installation

Given the GTM limitations, it’s essential to have alternative methods for verifying that Customer Events are correctly installed and functioning:

Using Shopify’s Built-In Tools
Shopify’s admin dashboard includes features that allow you to see a summary of Customer Events and Pixel activity. Regularly checking these reports can help you ensure everything is working as expected. Also, during setup the Test Mode within Shopify Pixels will allow you to preview the website and shows all fired events (like GTM assist preview mode used to do).

Third-Party Analytics Tools
Tools like Google Analytics, when properly configured, can still track data from Customer Events even if they can’t be fully previewed in GTM. A direct GA4 pixel can be setup next to the GTM pixel. This allows you to test the setup datalayers and events within the Google Analytics Real-time overview.

A Detailed Guide to Shopify Customer Events

Understanding what can be tracked with Shopify Customer Events is crucial for maximizing their effectiveness. Here’s a detailed look at the types of events that can be tracked:

Page Views
Track when customers view specific product pages, categories, or your homepage. This helps in understanding which products or content draw the most attention.

Add to Cart
Monitor when customers add items to their cart, providing insights into product interest and the effectiveness of product descriptions and images.

Remove from Cart
Understanding when and why customers remove items can help identify potential issues with pricing, shipping costs, or product descriptions.

Begin Checkout
Track when customers start the checkout process, allowing you to see how many customers drop off before completing a purchase.

Purchase
This critical event captures when a purchase is completed, providing the most direct correlation to revenue and allowing for detailed sales reporting.

Search Events
Track when customers use the search function on your site, which can inform you about the most sought-after products and help optimize your search functionality.

GTM Pixel Code Example

This example showcases a custom Google Tag Manager (GTM) pixel designed for use with Shopify’s Customer Events API. This pixel will track specific events within your Shopify store and send the data to Google Tag Manager. You can customize this code to track various events that are crucial to your store’s analytics.

Step-by-Step Implementation

1. Replace GTM ID: Make sure to replace ‘GTM-XXXXXXX’ with your actual Google Tag Manager ID in the script.

2. Insert the Pixel Code: Add this code to the Shopify Customer Events section within your Shopify admin. This allows the pixel to listen to specific events on your Shopify store and push data to the dataLayer.

Pixel Code Example

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

//Google Consent Mode v2
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  window.dataLayer.push({
    event: "payment_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  window.dataLayer.push({
    event: checkout_shipping_info_submitted,
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_address_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_contact_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_started", (event) => {
  window.dataLayer.push({
    event: "checkout_started",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.id,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
    total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
  });
});

analytics.subscribe("cart_viewed", (event) => {
  window.dataLayer.push({
    event: "cart_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    total_cost: event.data?.cart?.cost?.totalAmount?.amount,
    quantity: event.data?.cart?.totalQuantity,
    cart_id: event.data?.cart?.id,
  });
});

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data?.productVariant?.product?.id,
    product_title: event.data?.productVariant?.title,
    product_sku: event.data?.productVariant?.sku,
  });
});

analytics.subscribe("search_submitted", (event) => {
  window.dataLayer.push({
    event: "search_submitted",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    query: event.data?.searchResult?.query,
  });
});

analytics.subscribe("collection_viewed", (event) => {
  window.dataLayer.push({
    event: "collection_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    collection_id: event.data?.collection?.id,
    collection_title: event.data?.collection?.title,
  });
});

For more information see the official documentation of Shopify here

1. Replace GTM ID: Make sure to replace ‘GTM-XXXXXXX’ with your actual Google Tag Manager ID in the script.

2. Insert the Pixel Code: Add this code to the Shopify Customer Events section within your Shopify admin. This allows the pixel to listen to specific events on your Shopify store and push data to the dataLayer.

Measuring If the Pixel Is Working Correctly

After implementing the code, ensure the pixel is firing correctly by using tools like Google Analytics Realtime, or GTM’s debug mode, even though it may have limitations when dealing with iFrames. You can also verify pixel activity directly in Shopify’s admin under “Pixels” or use Chrome’s Developer Tools to inspect network requests.

This detailed guide should help you set up and implement the GTM pixel code effectively on your Shopify store. Be sure to replace placeholder values with your actual Google Analytics tracking ID and any other specific identifiers relevant to your setup.

Conclusion: Embracing the Future of E-Commerce Tracking

The shift to Shopify Customer Events represents a major evolution in how store owners can track and optimize their businesses. While there are some challenges, such as the GTM Preview issue, the benefits far outweigh the drawbacks. By fully embracing Customer Events, Shopify store owners can gain deeper insights, ensure better data accuracy, and create more personalized customer experiences, all while staying compliant with evolving privacy laws.

For store owners looking to stay ahead, now is the time to transition to this new tracking method and fully leverage the powerful tools that Shopify offers.

If your team would rather have this configured correctly the first time, our ecommerce agency sets up Customer Events and server-side tracking as standard practice on every Shopify build.

This outline should help you structure your blog post effectively, ensuring that it is both informative and useful for your audience. Be sure to include examples, screenshots, and possibly even video content to enhance the guide and make it more engaging for your readers.