How to submit Shopify checkout data to Google Tag Manager for order tracking

Tracking orders from your Shopify store can be a bit tricky, but it’s essential for understanding your customers’ behaviour. By sending data from Shopify Checkout to Google Tag Manager (GTM), you can keep tabs on your orders more effectively. Here’s a simple guide to help you set this up.

How to set up custom pixel

The Shopify checkout is sandboxed, for security. Meaning we cannot add our own code in directly. Instead if we want to add tracking we must use Shopify Pixels. We can create a custom pixel within here and make it trigger when the checkout is completed.

1. To do this navigate to Customer Events in your Shopify settings menu.
2. And then create a new pixel.
3. You’ll now to configure some pixel code with your Google Tag Manager ID and you may also wish to configure what data is collected and passed to Google Tag Manager. We’ve provided some sample code below.

To explain in this custom pixel code, we are subscribing (telling Shopify we want to be notified) to specific customer events (actions on the store, like viewing a product or paying for an order happen). Because we want to track completed orders we are subscribing to the ‘checkout_completed’ event. Then we are using ‘window.dataLayer.push’ to send event data to the dataLayer where Google Tag Manager can access it.

Example pixel code

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

//Initialize GTM tag - add your Tag ID in 
(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 - Suggested to add and configure this
// Make sure this passes the correct values based on your user's preferences and local laws
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,
  });
});

How to set up Google Tag Manager to receive the data

With your pixel ready to send data, you need to set up GTM to receive it:

1. In GTM, create a new tag and trigger for your custom event (like ‘checkout_completed’).
2. Set up dataLayer variables for the event details you want to capture, such as order ID, currency, and price.
3. Make sure your trigger fires on all custom events and that your tag captures these dataLayer variables.

Conclusion

By following these steps, you’ll be able to track order data from Shopify Checkout using Google Tag Manager. This will give you valuable insights into your customers’ buying habits, helping you make better business decisions.

Remember, while this process might seem a bit technical, taking it step by step will make it manageable. And the payoff in terms of improved tracking and understanding of your orders is well worth the effort.