This page includes instructions to create custom pixel code for a third-party pixel, so that you can track specific customer events. After you create the code for your custom pixel, you can add the pixel to your Shopify store.
Here is an example of a Meta pixel. Pixels will differ slightly from one third-party to another.
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.
Here's a sample Google Analytics pixel:
Track customer 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.
Subscribe to standard events
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.
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:
Subscribe to custom customer events
If you want to track additional customer events, such as when someone clicks a button, then you can add custom customer events. Custom events can be subscribed to the same way as standard events. Declare the name of the event that you want to subscribe to and pass the information on to the third-party service provider’s pixel.
This is an example of how a published custom event might appear in your theme's liquid files:
This is an example of how you might configure your pixel to subscribe to that custom event:
Below is an example of the code for a Meta pixel. Pixel code will vary depending on the third-party service provider, and the events that you want to track. Refer to the customer event reference for a list of available events.