Shopify Pixels

Author:

2023-11-10

#shopify

Overview

In this blog post I will be covering how to track customer events using Shopify Pixels.

What are Shopify Pixels?

Pixels are JavaScript code snippets that run on your online store or store checkout and are managed from the Customer events section in your Shopify admin. Pixels collect and pass behavioral customer data for marketing and reporting.¹

Using Shopify Pixels is essentially a way to track customer events on your across your Shopify store.

Even in the case that you are using a headless Shopify setup, you can still use Shopify Pixels to track customer events during the checkout process.

For a full list of events that you can track, see the Shopify Pixels documentation.

Why use Shopify Pixels?

Shopify Pixels are a great way to track customer events on your Shopify store. They are easy to setup and can be used to track a variety of events.

Additionally, since pixels are loaded in a secure sandbox environment, you can rest assured that your customer's data is safe.

Additionally, you may currently have some sort of analytics tool setup in your checkout.liquid file to track customer events. However, the checkout.liquid will no longer be supported after August 13, 2024.

So, if you are using the checkout.liquid file to track customer events, you will need to migrate to using Shopify Pixels.

And honestly, Shopify Pixels are much easier solution!

How to create a custom pixel

You can manage your Shopify Pixels from your Shopify admin.

From your Shopify admin, click on "Settings" and then "Customer Events".
From here you just click on the "Add custom pixel" button.
You will be prompted to enter a name for your pixel. You can name it whatever you want.
You are then presented with a text area where you can enter your custom pixel code with the following boilerplate code:

// Step 1. Initialize the JavaScript pixel SDK (make sure to exclude HTML)

// Step 2. Subscribe to customer events with analytics.subscribe(), and add tracking
analytics.subscribe('event_name', (event) => {
  pixel('track', 'event_name', event.data)
})

Once you have entered your custom pixel code, you can click on the "Save" button and then "Connect" to connect your pixel to your Shopify store.
You're done! You are now tracking customer events with your custom pixel. Be sure to test your pixel to make sure that it is working correctly.

To give you a concrete example, let's say that you want to add a Google Tag Manager custom pixel to your Shopify store.

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

analytics.subscribe('checkout_completed', (event) => {
  window.dataLayer.push({
    event: 'checkout_completed',
    order_id: event.data.checkout.order.id,
    currency: event.data.checkout.currencyCode,
  })
})

One thing to note here is that the event name (i.e. checkout_completed) must match the event name in the GTM tag.

If the event names do not match, then the event will not be tracked correctly.

In the case, that you want to track a custom event, you can do so by using the Shopify.analytics.publish method where you want to trigger the event in your code.

Then you can subscribe to the event in your custom pixel code.

So in your checkout.liquid file, you could do something like this.

<script>
  const customData = { email: customer.email }
  Shopify.analytics.publish('email_signup', customData)
</script>

But, since you shouldn't be using the checkout.liquid file anymore, you can instead add the publish call in a Checkout UI Extension. You can check out my blog post Shopify Checkout UI extensions: Validate customer data to learn more about them.

Then in your custom pixel code, you can subscribe to the event and track it.

analytics.subscribe('email_signup', (event) => {
  window.dataLayer.push({
    event: 'email_signup',
    email: event.customData.email,
  })
})

There you have it! You have now successfully created a custom pixel and are tracking custom customer events.

Conclusion

In this blog post, I covered how to track customer events using Shopify Pixels.

I also covered how to create a custom pixel and how to track custom events.

I hope you found this blog post helpful. Thanks for reading!