Shopify & Google Tag Manager

First complete tag installation following our Google Tag Manager guide, then use this guide to integrate with Shopify.

The Setup and Pageview Corvidae scrips are set up in the normal way, following our Google Tag Manager guide. However for privacy, and to protect your customers' information, Shopify require tracking scripts during checkout to be run from a “Sandbox Pixel.” Shopify have published a full guide to creating a Google Tag Manager custom pixel here: https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial

Steps to installing your Corvidae Conversion Pixel using the Google Tag Manager custom pixel are as follows.

In Shopify

• Create a custom pixel for Google Tag Manager in Shopify Admin > Settings > Customer Events

• Within that pixel, subscribe to checkout_completed events passing the Order ID, Price, Shipping, and Tax. Then push a custom event to GTM which you will later use to trigger the Corvidae Transaction Pixel.
  
  Google Tag Manager custom pixel code example
  In this example the event is named shopify_transaction_event however you can choose your own event name. This creates a custom event in the datalayer which can be converted to a Trigger in Google Tag Manager, and the variables associated with that event can be converted to Variables in Google Tag Manager.

  CODE

  // 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: "shopify_transaction_event",
      orderId: event.data?.checkout?.order?.id,
      value: event.data?.checkout?.totalPrice?.amount,
      shipping: event.data?.checkout?.shippingLine?.price?.amount,
      tax: event.data?.checkout?.totalTax?.amount,
    });
  });

In Google Tag Manager

• Create a trigger for the new custom event shopify_transaction_event

  

• Set up GTM variables for the values mentioned in the Shopify Custom Sandbox Pixel

  • orderId

  • value

  • tax

  • shipping

    

• Associate the Corvidae Conversion tag with this new Trigger