Custom Pixels: the best tracking solution on Shopify
The Custom Pixel for Shopify is a new tracking technology that simplifies and enhances the monitoring of user actions on Shopify stores.
Custom Pixels are now the most efficient and high-performing alternative to traditional third-party apps (such as Elevar or server-side Stape), the Google & YouTube sales channel, or custom scripts added within the template to generate dataLayer for use with Google Tag Manager.
The Problem with Traditional Tracking on Shopify
Until recently, tracking on Shopify relied on using third-party apps or manually inserting code into the template. Both methods have significant drawbacks: recurring costs for apps and the risk of tracking malfunctions in case of updates or changes to the template, as well as limited access to the checkout for lower-cost Shopify plans.
Tracking with the Google&YouTube Channel
Direct Control over Data Custom pixels allow for more granular control over which events are tracked and what data is sent, for example, to GA4.
Template Independence
The tracking code is separated from the template, ensuring stability and simplifying maintenance.
Simplified Data Retrieval
The JSON object provided with events offers structured and easy access to data.
Access to Shopify Events
Custom pixels integrate with Shopify’s API to directly access the platform’s native events, including checkout events, ensuring accurate purchase tracking.
Performance Improvements
Executing the code in a sandbox separate from the main site avoids slowdowns and improves loading times.
Flexibility
Pixels can run regardless of user consent, allowing tracking with appropriate use of Google’s Consent Mode, which enables tracking anonymous data in compliance with GDPR if configured correctly.
Custom Pixels: An Innovative Solution
Custom Pixels (App and Web) are JavaScript code snippets that, leveraging Shopify’s APIs, enable user event tracking independently of templating logic.
They integrate with the “Customer Events” section in Shopify settings, allowing the creation of custom pixels for various platforms, such as Google Tag Manager, Google Analytics 4, GADS conversions, and beyond — including Meta, Bing, or any other tracking system like Matomo.
How Shopify Custom Pixels Work
Custom Pixels connect to predefined Shopify events, such as product views, purchases, or contact form submissions.
Event-related information, such as product or user details, is sent to the pixel in an easily manageable JSON object.
This object can be utilized through JavaScript code to send events and necessary data to various tracking platforms.
Advantages of Custom Pixels: Accuracy and Precision in Ecommerce Tracking Data
Direct Control over Data
Custom pixels allow for more granular control over which events are tracked and what data is sent, for example, to GA4.
Template Independence
The tracking code is separated from the template, ensuring stability and simplifying maintenance.
Simplified Data Retrieval
The JSON object provided with events offers structured and easy access to data.
Access to Shopify Events
Custom pixels integrate with Shopify’s API to directly access the platform’s native events, including checkout events, ensuring accurate purchase tracking.
Performance Improvements
Executing the code in a sandbox separate from the main site avoids slowdowns and improves loading times.
Flexibility
Pixels can run regardless of user consent, allowing tracking with the appropriate use of Google’s Consent Mode, which enables anonymous data tracking in compliance with GDPR if configured correctly.
Web Pixel App vs Custom Web Pixel
Web Pixel App
Custom applications with greater flexibility but requiring advanced programming skills.
Custom Web Pixel
JavaScript codes added to the customer events section, simpler to implement but with some limitations.
Google&YouTube Channel vs Custom Web Pixel
The Google&YouTube channel, while being a native integration between Shopify and Google products, still has significant limitations regarding complete tracking of all users. The limitation concerns whether this pixel is enabled based on user consent for tracking. This can result in the loss of tracking for approximately 30% of users (based on our practical experiences with Shopify stores using it).
Nevertheless, it is a useful tool and is primarily used to integrate an always-updated product feed via API for the store’s primary language. However, for multilingual feeds, additional apps are required.
Custom Pixels and Sandbox: What to Know
Both Web Pixel Apps and Custom Web Pixels operate in a sandbox, an isolated environment that does not directly interact with the website.
This ensures separation between tracking and site content but prevents interaction with the DOM and direct access to Liquid objects.
Standard Tracking Logic Changes with Custom Web Pixels
Debug
To test tracking, we have traditionally used Google tools, such as GTM debug and Tag Assistant. In this case, these tools are not effective: GTM debug operates within the sandbox environment and does not provide concrete information about the website, while Tag Assistant might even indicate the absence of tags on the site. Shopify offers an integrated debug tool directly within the pixel, which is useful for verifying the information available on the web page. However, to precisely understand the data sent to the dataLayer, it is necessary to debug directly from the browser developer console by adding JavaScript logs into the pixel code.
Standard Data to Overwrite
Using this new tool, we found that some automatic events tracked by GA4 showed inconsistencies or were duplicated. This occurred because, when placing the GA4 tag in isolated environments like the sandbox, events such as pageviews were duplicated: besides the event associated with Shopify APIs through our custom tracking, another pageview event with the sandbox URL was also recorded.
To address these issues, we had to directly modify the events, in some cases blocking automatically generated ones and recreating them from scratch or overwriting specific parameters to ensure that the tracked data was accurate and aligned with the needs of our custom tracking.
Conclusions
Custom Pixels represent a significant advancement in tracking on Shopify, offering benefits in terms of stability, performance, and ease of management. However, it is essential to carefully evaluate their functionality before adopting them, as they require specific technical skills.
While they may initially seem complex, once the implementation logic is understood, they enable comprehensive and reliable tracking, making the most of one of the most popular and high-performing eCommerce platforms available today.
Continua a leggere
8 minutes of reading
8 minutes of reading
6 minutes of reading
And it consumes less energy.
To return to the page you were visiting, simply click or scroll.