Shopify Implementation | Made With Intent Help Center

Steps required:

Pre-checkout, install the tag using the Tag SDK or through GTM
Add a custom web pixel for tracking the checkout and order success pages

1. Pre-checkout, install the tag using the Tag SDK or through GTM

For pre-checkout tracking, you can follow the guides below to install the Made with Intent script.

Note that you don’t need to implement Conversion events as that is taken care of by the shopify web pixel in step 2.

Install tracking through GTM

Install tracking using the SDK

2. Add a Web Pixel

Shopify checkouts are sandboxed, so you can just copy and paste the below code into a custom web pixel to ensure that checkout and order success pages are tracked.

Visit Settings > Customer Events
Add a new pixel
Copy and paste the Web Pixel Code below, updating the config with your own config
1. Replace <INGESTION_ID> with the ingestion ID given to you
2. Replace <COUNTRY_CODE> with your country code, e.g. US
3. Replace <LANGUAGE_CODE> with your language code, e.g. en
e.g.
```
var _config = {
    contextOverride: mainWindowContext,
    ingestionId: 'mwit-zd5w88gbk9bp-2d', // Replace with value given
    iso31661CountryCode: 'US',
    iso6391LanguageCode: 'en',
};
```
Save the pixel
Click on connect to connect the pixel to the store

Note: If you have checkout extensibility enabled then please install the second snippet in this section

You can find an example video of this process attached to this article

Web Pixel Code

Generic Web Pixel Code:

var mainWindowContext = api.init.context;

// Replace config with your own config values
var _config = {
    contextOverride: mainWindowContext,
    ingestionId: '<INGESTION_ID>',
    iso31661CountryCode: '<COUNTRY_CODE>',
    iso6391LanguageCode: '<LANGUAGE_CODE>',
};

var loadScript = function() {
  window.intent = window.intent || {};
  window.intent.dataLayer = window.intent.dataLayer || [];
  window.intent.config = _config;
  
  var scriptToLoad = "https://intentclientscriptslon.s3.eu-west-2.amazonaws.com/intent-v3.js";

  try{!function(){var t,e,c;t=scriptToLoad,e=function(){},(c=document.createElement("script")).setAttribute("src",t),c.setAttribute("async",!0),c.onload=e,document.body.appendChild(c)}()}catch(t){}
}

analytics.subscribe('page_viewed', (event) => {
  if(
    event.context.window.location.pathname.match(/checkouts/i) && 
    !event.context.window.location.pathname.match(/thank_you/i)
  ) {
    loadScript();

    window.intent.dataLayer.push({
      type: 'Pageview',
      data: {
        page_type: 'checkout'
      }
    });
  }
});

analytics.subscribe('checkout_completed', (event) => {
  loadScript();
  
  const data = {
    currency: event.data?.checkout?.currencyCode || 'GBP',
    shipping_fee: parseFloat(event.data?.checkout?.shippingLine?.price?.amount || '0'),
    tax_value: parseFloat(event?.data?.checkout?.totalTax?.amount || '0'),
    order_value: parseFloat(event?.data?.checkout?.totalPrice?.amount || '0'),
    order_quantity: event?.data?.checkout?.lineItems?.length || 1,
    order_items: [],
  };

  event?.data?.checkout?.lineItems?.forEach?.(item => {
    data.order_items.push({
      product_id: item.id,
      item_value: parseFloat(item?.variant?.price?.amount || '0'),
      quantity: item.quantity || 1
    });
  });

  window.intent.dataLayer.push({
      type: 'Pageview',
      data: {
        page_type: 'confirmation'
      }
  });

  window.intent.dataLayer.push({
    type: 'Conversion',
    data: data
  });
});

If you have checkout extensibility installed you can use the checkout_started event, so this is the custom webpixel code:

var mainWindowContext = api.init.context;

// Replace config with your own config values
var _config = {
    contextOverride: mainWindowContext,
    ingestionId: '<INGESTION_ID>',
    iso31661CountryCode: '<COUNTRY_CODE>',
    iso6391LanguageCode: '<LANGUAGE_CODE>',
};

var loadScript = function() {
  window.intent = window.intent || {};
  window.intent.dataLayer = window.intent.dataLayer || [];
  window.intent.config = _config;
  
  var scriptToLoad = "https://intentclientscriptslon.s3.eu-west-2.amazonaws.com/intent-v3.js";

  try{!function(){var t,e,c;t=scriptToLoad,e=function(){},(c=document.createElement("script")).setAttribute("src",t),c.setAttribute("async",!0),c.onload=e,document.body.appendChild(c)}()}catch(t){}
}

analytics.subscribe('checkout_started', (event) => {
  loadScript();
  
  window.intent.dataLayer.push({
      type: 'Pageview',
      data: {
        page_type: 'checkout'
      }
  });
});

analytics.subscribe('checkout_completed', (event) => {
  loadScript();
  
  const data = {
    currency: event.data?.checkout?.currencyCode || 'GBP',
    shipping_fee: parseFloat(event.data?.checkout?.shippingLine?.price?.amount || '0'),
    tax_value: parseFloat(event?.data?.checkout?.totalTax?.amount || '0'),
    order_value: parseFloat(event?.data?.checkout?.totalPrice?.amount || '0'),
    order_quantity: event?.data?.checkout?.lineItems?.length || 1,
    order_items: [],
  };

  event?.data?.checkout?.lineItems?.forEach?.(item => {
    data.order_items.push({
      product_id: item.id,
      item_value: parseFloat(item?.variant?.price?.amount || '0'),
      quantity: item.quantity || 1
    });
  });

  window.intent.dataLayer.push({
      type: 'Pageview',
      data: {
        page_type: 'confirmation'
      }
  });

  window.intent.dataLayer.push({
    type: 'Conversion',
    data: data
  });
});

Shopify Pixel Installation.mp4