Nov 22, 2023

A Beginners Guide on How to Create Shopify Custom Pixels

This guide will walk you through how to setup web pixels on Shopify store. To read what are web pixels and why do we need them, read the Shopify document here

Now, moving on to how to setup Shopify pixels. If you go to your store admin, open settings and scroll down you should see a tab called Customer events.

Here you can add Apps that are using Shopify Web Pixel API, which is the officially supported way to integrate pixels, more on this here. But we can write custom pixels without using apps.

Creating a Custom Pixel in your Shopify Store

To create a custom pixel click on the Add Custom Pixel button on top right corner of the page.

Give your pixel a name and click on Add pixel.

On clicking Add pixel you will be presented with a code editor to code your custom pixels.

⚠ Pixel access is sandboxed

For enhanced security and stability, this pixel runs in a sandbox. Please consult with the third-party service provider about implementation best practices.

Writing your First Custom Pixel on Shopify

Here is the list of all available events 👉 Click Here

✨ Note: Setup code for gtag and gtm scripts are different.

GTM



(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','YOUR_TAG_ID');

GTag


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

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

⚠ Notice how the code does not contain any html tags ?. That is because we can only write js code in this editor. Remove any html code from the setup code if any.

Let's head over to page_viewed customer event 👉 here

Change the tab to Custom Pixel



analytics.subscribe('page_viewed', (event) => {
  // Example for accessing event data
  const timeStamp = event.timestamp;

  const pageEventId = event.id;

  const payload = {
    event_name: event.name,
    event_data: {
      pageEventId: pageEventId,
      timeStamp: timeStamp,
    },
  };

  // Example for sending event data to third party servers
  fetch('https://example.com/pixel', {
    method: 'POST',
    body: JSON.stringify(payload),
    keepalive: true,
  });
});

Let's understand what this code means -

Shopify fires events whenever a customer events trigger that is add_to_cart, page_viewd, product_viewed etc. To listen to these events we have to use the analytics object and subscribe to those particular events and the data for those event can be found in the event properties.

To keep this guide simple let's setup a simple product_viewed event using GTM -


// GTM Code 
(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','YOUR_TAG_ID');

// Analytics code here

analytics.subscribe("product_viewed", (event) => {
  console.log("Page View Event: "+event.context.document.title)
});

Since we want this event to trigger when user visit the product page, so we will subscribe to product_viewed customer event.

Now that we know that the event is working let's add all the data that we want to collect and push the data to data layer.


// GTag Code 
(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','YOUR_TAG_ID');

// Analytics code here

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: event.name,
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data.productVariant.product.id,
    product_title: event.data.productVariant.product.title,
    product_sku: event.data.productVariant.sku,
  });
});

How to check if the events are working?

Remember when it said this ?

⚠️ Pixel access is sandboxed

For enhanced security and stability, this pixel runs in a sandbox. Please consult with the third-party service provider about implementation best practices.

This means we can't use data layer extension or use Tag Assistant to check if our code is working as intended, we have to use the old [DEPRECATED] Tag Assistant Legacy to check if its working.

Let's check the if the data is sent by opening the store and checking it on the tag assistant extension > data layer tab.

🥳 Yay, you just setup your first Shopify pixel

But the only true way to check if everything is working is production.

fchhk

Back to E-commerce

Creating a Custom Pixel in your Shopify Store

Writing your First Custom Pixel on Shopify

To keep this guide simple let's setup a simple product_viewed event using GTM -

How to check if the events are working?

Stay Smart and Informed