How to Set Up Google Conversion Tracking on Shopify

Introduction

You can use conversion tracking to track when your customers visit your checkout and how often they make a purchase. Conversion tracking can help you learn more about purchasing trends on your store, like average order value and total sales per product. There are a few different platforms available that give you access to this data.

Requirements

Before setting up custom Google conversion tracking through edits to the theme code or through a third-party app, ensure that you don't already have conversion tracking events set up in your Google Analytics or/and Google Ads account. If you're using Shopify's Google & YouTube channel, then the channel automatically adds conversion tracking events to your Google Ads account during setup but until today (Feb 28, 2024) is not supporting Google Consent Mode v2.

If you set up custom tracking on top of an existing conversion tracking configuration, then your store might have duplicated conversion tracking events. Duplicated conversion tracking can cause inaccurate report data and problems with ad optimization. When you set up custom tracking, you can deactivate duplicated conversion tracking events from your Google Analytics or/and Google Ads account. If you need to deactivate duplicated conversion tracking events from your Google Analytics or/and Google Ads account, then make sure you deactivate only the duplicated tracking events. Deactivating non-duplicate conversion events can decrease ad tracking accuracy and efficiency.

Before following this guide, you need to:

Have a Google Analytics or/and Google Ads account

Tracking orders

Conversion tracking codes, such as a tracking pixel, can be added to your store to track customers purchasing from your store. Tracking codes are typically used on the order status page. These tracking scripts are provided by a third-party apps like our app, and are used as a snippet of code in your Shopify admin.

Example Tracking Code

<!-- To be used in the order status page -->
{% if first_time_accessed == true %}
  <script>
    const GA4_PROPERTY = 'G-XXXXXXXXXX'; // configure your GA4 property here
    /*
     * DISCLAIMER:
     * 
     * This code snippet is provided as-is, without any warranty or guarantee of any kind.
     * The author(s) of this code snippet shall not be held responsible for any damages or liabilities
     * arising from the use, misuse, or inability to use this code snippet.
     * Use at your own risk.
     */

    /**
     * Relevant articles
     * GA4 Purchase event: https://developers.google.com/analytics/devguides/collection/ga4/reference/events#purchase
     * Shopify Checkout Extensibility Upgrade Guide: https://help.shopify.com/en/manual/checkout-settings/checkout-extensibility/checkout-upgrade
     * Shopify Storefront Checkout Object Reference: https://shopify.dev/docs/api/liquid/objects/checkout
     */


    (function(){
      // these 3 settings are not to be modified
      const COOKIE_NAME = '_pandectes_gdpr';
      const GRANTED = 'granted';
      const DENIED = 'denied';

      // store specific settings - change accordingly
      const DEFAULT_POLICY = DENIED; // or GRANTED
      const ADS_DATA_REDACTION = false;
      const DEBUG_MODE = false;


      function getCookie(cookieName) {
          const cookieString = document.cookie;
          const cookieStart = cookieString.indexOf(cookieName + "=");
          if (cookieStart === -1) {
              return null;
          }
          let cookieEnd = cookieString.indexOf(";", cookieStart);
          if (cookieEnd === -1) {
              cookieEnd = cookieString.length;
          }
          const cookieValue = cookieString.substring(cookieStart + cookieName.length + 1, cookieEnd);
          try {
              const  decodedValue = atob(cookieValue);
              const parsedValue = JSON.parse(decodedValue);
              return parsedValue;
          } catch (error) {
              console.error("Error parsing cookie value:", error);
              return null;
          }
      }

      const getStorage = (cookie) => {
        let output = {
          ad_storage: DEFAULT_POLICY,
          ad_user_data: DEFAULT_POLICY,
          ad_personalization: DEFAULT_POLICY,
          analytics_storage: DEFAULT_POLICY,
          personalization_storage: DEFAULT_POLICY,
          functionality_storage: DEFAULT_POLICY
        };
        if (cookie && cookie.preferences !== null && cookie.preferences !== undefined) {
          const p1 = (cookie.preferences & 1) === 0;
          const p2 = (cookie.preferences & 2) === 0;
          const p4 = (cookie.preferences & 4) === 0;
          output = {
            ad_storage: p4 ? GRANTED : DENIED,
            ad_user_data: p4 ? GRANTED : DENIED,
            ad_personalization: p4 ? GRANTED : DENIED,
            analytics_storage: p2 ? GRANTED : DENIED,
            personalization_storage: p1 ? GRANTED : DENIED,
            functionality_storage: p1 ? GRANTED : DENIED
          };
        }
        return output;
      };

      // data layer initialization
      window.dataLayer = window.dataLayer || []; 
      function gtag() { dataLayer.push(arguments); }

      // add GA4 Script to the page
      const script = document.createElement("script"); 
      script.src = "https://www.googletagmanager.com/gtag/js?id="+GA4_PROPERTY;
      script.async = true;
      document.head.appendChild(script);

      const cookie = getCookie(COOKIE_NAME);
      const storage = getStorage(cookie);

      // initialize consent properties
      if (storage.ad_storage === DENIED && ADS_DATA_REDACTION) {
        gtag('set', 'ads_data_redaction', true);
      }
      gtag('consent', 'default', storage);

      // initialize GA4 config
      gtag('js', new Date());
      gtag('config', GA4_PROPERTY, { debug_mode: DEBUG_MODE });

      const checkout = window.Shopify.checkout

      const config = {
        send_to: [GA4_PROPERTY],
        affiliation: 'Shopify store',
        transaction_id: Number(checkout.order_id).toString(),
        currency: checkout.currency,
        value: checkout.total_price,
        items: checkout.line_items.map(function(item) {
          return {
            item_id: item.sku && item.sku.length > 0 ? item.sku : 'SHOPIFY_' + item.product_id + '_' + item.variant_id,
            item_name: item.title,
            item_brand: item.vendor,
            price: item.price,
            quantity: item.quantity,
          };
        }),
      }

      // push the conversion event
      gtag('event', 'purchase', config);

      if (DEBUG_MODE) {
        console.log(config);
        console.log(dataLayer);
      }
    }())
  </script>
{% endif %}

Steps

Copy the tracking code (from the previous section) to your clipboard with cmd + c on a Mac or ctrl + c on a PC.
Make sure you edit the code by replacing the G-XXXXXXXXXX with your G Property ID.
From your Shopify admin, go to Settings > Checkout.
In the Order status page section, go to the Additional scripts text box.
Paste the tracking code from your clipboard with cmd + v on a Mac or ctrl + v on a PC. In that text box, you are able to use the shop Liquid object, the order Liquid object, and the OrderStatus JavaScript asset.

Updated on: 01/03/2024