Shopify Customer Events (GA4) for Checkout Components by Anvil

Intro

Welcome to the documentation for integrating Shopify customer events with Google Analytics 4 (GA4) ecommerce events! This code snippet allows you to track customer events during the checkout process and upsell events (add to cart in checkout) on your Shopify store, powered by Anvil Checkout Components. You can easily copy and paste this code directly into your Shopify settings by following these steps:

Creating a Web Pixel on Shopify

Go to your Shopify admin panel.

Navigate to "Settings" and select "Customer Events" from the dropdown menu.

Before proceeding, please make sure you have access to your Google Tag Manager (GTM) ID, which you will need to insert into the code snippet.

Events

Now, let's understand the purpose of each function and event in the provided code:

ga4CheckoutEvents(event)

This function is responsible for extracting relevant information from a Shopify checkout event and formatting it into a structured object compatible with GA4 ecommerce events. It takes an event object as input, which contains data related to a checkout, including line items. It iterates over the line items and extracts details such as item ID, name, variant, brand, price, and quantity. The function returns an object with the checkout's currency, total value, and an array of line items.

analytics.subscribe("anvil_add_to_cart", callback)

This code subscribes to the anvil_add_to_cart event from an analytics service (not defined in the provided code) using the `analytics` object. When the event occurs, the callback function is executed. In this case, the callback pushes an event and its custom data to the window.dataLayer array. This event is likely triggered when a customer adds an item to the cart during the checkout process.

analytics.subscribe("checkout_started", callback) 

This code subscribes to the checkout_started event from the analytics service. When this event occurs, the callback function is executed. Within the callback, the previous ecommerce object in the window.dataLayer array is cleared, and the ga4CheckoutEvents function is called to retrieve the necessary checkout data. The formatted data is then pushed to the window.dataLayer

array with an event name of begin_checkout .

analytics.subscribe("payment_info_submitted", callback)

This code subscribes to the payment_info_submitted event from the analytics service. When the event occurs, the callback function is executed. Similar to the previous event, the previous ecommerce object is cleared, and the ga4CheckoutEvents function is called to extract the checkout data. The formatted data is then pushed to the window.dataLayer array with an event name of add_payment_info . This event likely represents the moment when the customer submits their payment information during the checkout process.

analytics.subscribe("checkout_completed", callback)

This code subscribes to the checkout_completed event from the analytics service. When this event occurs, the callback function is executed. Similar to the previous events, the previous ecommerce object is cleared. However, there seems to be an issue in this code block. It attempts to push an add_payment_info event to the window.dataLayer array, but the data variable used in the push statement is not defined. It appears that the data variable should be assigned the return value of the ga4CheckoutEvents function.

Overall, this code integrates with an analytics service to track customer events during the Shopify checkout process. It captures relevant data about the checkout, such as line items, currency, and total value, and sends that data to GA4 ecommerce events for analysis and reporting.

If you encounter any issues or have any questions during the implementation process, please don't hesitate to reach out to our support team at support@appsbyanvil.com. We're here to assist you and ensure a smooth integration of customer events with GA4 ecommerce events on your Shopify store.

Sample code

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-#########');

// GTM init
(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', 'G-########');



function ga4CheckoutEvents(event) {
  let checkout = event.data.checkout;
  let lineItems = [];

  for (const checkoutLineItem of event.data.checkout.lineItems){
    lineItems.push({
      item_id: checkoutLineItem.variant.sku,
      item_name: checkoutLineItem.title,
      item_variant: checkoutLineItem?.variant.title,
      item_brand: checkoutLineItem.variant.product.vendor,
      price: checkoutLineItem.variant.price.amount,
      quantity: checkoutLineItem.quantity
    });
  }
  
  return {
    currency: checkout.totalPrice.currencyCode,
    value: checkout.totalPrice.amount,
    items: lineItems
  };
}


// Subscribe from web pixel app extension
analytics.subscribe("CC_add_to_cart", (event) => {
  window.dataLayer.push({
   'event': event.name,
   'data': event.customData
  });
});


analytics.subscribe("checkout_started", (event) => {
  const data = ga4CheckoutEvents(event)
  gtag("event", "begin_checkout", {
    value: event.data.checkout.totalPrice.amount,
    currency: event.data.checkout.totalPrice.currencyCode,
    items: data
});
})

analytics.subscribe("payment_info_submitted", (event) => {
    const data = ga4CheckoutEvents(event)
    gtag("event", "add_payment_info", {
      value: event.data.checkout.totalPrice.amount,
      currency: event.data.checkout.totalPrice.currencyCode,
      items: data
  });
})

analytics.subscribe("checkout_completed", (event) => {
  const data = ga4CheckoutEvents(event)
    gtag("event", "purchase", {
        value: event.data.checkout.totalPrice.amount,
        tax: event.data.checkout.totalTax.amount,
        shipping: event.data.checkout.shippingLine.price.amount,
        currency: event.data.checkout.totalPrice.currencyCode,
        items: data
    });
});