Shopify Web Pixels are Shopify's solution for tracking data on purchases such as conversion rates. There are two primary ways you will interact with them:

App Web Pixels
Custom Web Pixels

App Web Pixels

Some app pixels, (e.g. Omega Facebook Pixel) integrate directly with Shopify Web Pixels. These apps require no further setup to work with AfterSell.

Custom Web Pixels

Custom pixels allow for bespoke solutions if no app pixel can be found on the Shopify marketplace to meet your needs. The following details how to convert existing order status page tracking scripts to use custom pixels. Please note the potential risks of custom pixels before proceeding.

If you use Google Tag Manager specifically, then Shopify provides helpful documentation for completing this migration.

There are 3 core steps to creating a custom pixel for conversion tracking.

Preparing the 3rd party JavaScript SDK
Setting up conversion tracking using web pixels
Connecting your custom pixel

1. Preparing the 3rd party JavaScript SDK

You will want to remove any HTML present in the provided pixel code. Any JavaScript that is loaded through an HTML <script> tag should instead be loaded through a JavaScript-only approach.

This process is covered in more detail here.

An example using Google Tag Manager

Original pixel code:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', ''YOUR_PIXEL_ID'');
</script>

After removing HTML & reworking <script> tags:

const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');
script.setAttribute('async', '');
document.head.appendChild(script);

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

Note that Google's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

2. Setting up conversion tracking using web pixels

To track conversion using custom pixels, subscribe to the checkout_completed event provided by Shopify. This event is triggered either on the post-purchase page, if one is displayed to your customer, or on the thank you page if not. This event only triggers once in either case, so no extra logic is required to avoid double-counting a purchase.

analytics.subscribe("checkout_completed", (event) => {
  // process event using 3rd party pixel tracking code
});

Use this reference to see which data points you can retrieve from the event.

Shopify checkout_completed event

An example of a custom Meta pixel

Tracking code triggering when a checkout is completed:

!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

// replace YOUR_PIXEL_ID with the pixel ID provided by third-party
fbq('init', YOUR_PIXEL_ID);

analytics.subscribe("checkout_completed", (event) => {
  fbq('track', 'Purchase', {
    currency: event.data?.checkout?.currencyCode,
    value: event.data?.checkout?.totalPrice?.amount,
  });
});

3. Connecting your custom pixel

Before you add a custom pixel, remove or modify any existing pixels to ensure customer events aren't counted twice. Existing pixel code should be manually removed from any place it exists, such as theme.liquid, checkout.liquid (Plus merchants only), and the Additional scripts in your checkout settings.

Once that is done, follow these steps to connect a custom pixel to your store.

Navigate to Settings > Customer Events > Custom Pixels > Add Custom Pixel
1. Enter a name for your custom pixel.
Paste your custom pixel code in the "Code" section.
Ensure the customer privacy settings are properly configured.
Click "Save" on your custom pixel.
Click "Connect" to set your custom pixel live!

Conversion Tracking (Web Pixels)