Adding custom pixels

If there's no app to track the specific customer events that you want to collect data for, then you can add a custom pixel that runs in a lax sandbox environment.

When you add a custom pixel, you specify the following information:

  • the third-party JavaScript pixel
  • the behavioral events you want to track

Preparing third-party pixel code

The third-party service you're working with provides you with the code that is integrated with the pixel. A pixel usually has two components, an SDK and the tracking code. Any HTML in the third-party service code needs to be removed, as the Shopify pixel sandbox only supports JavaScript.

Here is an example of a Meta pixel. Note that pixels will differ slightly from one company to the next.

​​<!-- Meta Pixel Code -->
<script>
!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');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->

After removing the HTML from Meta's code, you're left with Meta's pixel SDK and code to initialize it. The PageView event tracking code has also been removed, because it'll be added in the next step.

​​!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');
fbq('init', YOUR_PIXEL_ID);

You may come across pixels that are loaded using script src=. HTML isn't supported in Shopify's pixels, so you'll need to replace this with the JavaScript equivalent.

Here's a sample Google Analytics pixel:

<!-- 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>

The script src= portion can be replaced by the following JavaScript equivalent. Always ensure your src attribute matches the HTML version:

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');

Subscribe to standard events

After loading and initializing the pixel's SDK, you need to pass events into it for tracking. This is done by subscribing to events, and then passing the event data into the pixel's SDK to be processed by the third-party service.

Shopify offers a standard set of events, which makes it easy to ensure your pixel is collecting the data it needs to.

You can subscribe to events using the Shopify Pixels Extension API. You'll need to place the third-party pixel code in with the event you're subscribing to.

This is an example of the PageView event for Meta's pixel. Note that fbq("track") is part of Meta's code, and each company will have their own version that you'll need to reference their documentation for.

analytics.subscribe("page_viewed", event => {
  fbq('track', 'PageView');
});

Some events have metadata that you can pass into your pixel. Here's an example of passing some product details into Meta's ViewContent event:

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});

Add a custom pixel

Before you add a custom pixel, remove 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 in other checkout scripts.

  1. From your Shopify admin, go to Settings > Customer events.
  2. Give your pixel a unique name. If you enter the name of a custom pixel that already exists, then you'll be prompted to give your pixel a different name.
  3. Click Add pixel to open the event editor.
  4. Paste the third-party JavaScript pixel into the Code window.
  5. Add the events you want to track in the appropriate schema.
  6. Optional: Click More actions to edit your pixel name or view information on hiring a Shopify expert for assistance with your custom pixels.
  7. Click Save to save your custom pixel. If you're ready to connect your custom pixel now, then you can click Connect pixel to start tracking your events.

Connect a custom pixel

Once a custom pixel has been added, you need to connect the pixel to your store.

  1. From the Customer events page in your Shopify admin, click on Custom pixels.
  2. Custom pixels that aren't currently connected are displayed under the heading Disconnected pixels. Click Connect on the appropriate custom pixel line.
  3. Review the Shopify Terms of Service. If your pixel satisfies the service requirements, click Connect.

Custom pixel examples

Custom Meta pixel

​​!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');
fbq('init', YOUR_PIXEL_ID);

analytics.subscribe("page_viewed", event => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});


analytics.subscribe("search_submitted", event => {
  fbq('track', 'Search', {
    search_string: event.search_value
  });
});

analytics.subscribe("product_added_to_cart", event => {
  fbq('track', 'AddToCart', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

analytics.subscribe("payment_info_submitted", event => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", event => {
  fbq('track', 'InitiateCheckout');
});

analytics.subscribe("checkout_completed", event => {
  fbq('track', 'PageView');
});

Disconnecting custom pixels

If you want to stop tracking the events you added a custom pixel for, then you need to manually disconnect the pixel from your online store.

Steps:

  1. From the Customer events page in your Shopify admin, click on Custom pixels.
  2. Custom pixels that are currently connected are displayed at the top of your custom pixels list. Click Disconnect on the appropriate custom pixel line. Disconnecting the pixel doesn't delete the pixel.

Deleting custom pixels

You can delete custom pixels that you no longer need.

Steps:

  1. From the Customer events page in your Shopify admin, click on Custom pixels.
  2. Click the ... button on the appropriate custom pixel line.
  3. Click Delete. Confirm the deletion, and the custom pixel will be removed from the pixels manager.

Deleting a custom pixel can't be undone, so ensure you're deleting the appropriate pixel.

Ready to start selling with Shopify?

Try it free