Surprises While Developing a Pixel App on Shopify
The Shopify Pixel App is a powerful tool designed to help merchants optimize their e-commerce tracking and analytics. By integrating with your online store, it enables you to collect valuable data about customer behavior, campaign performance, and sales trends.
Whether running targeted ad campaigns or fine-tuning your marketing strategy, the Shopify Pixel App provides the insights you need to make data-driven decisions and maximize your store's potential.
However, developing a pixel app on Shopify can bring many surprises. Managing pixels on Shopify involves two methods: Custom Pixels and App Pixels. Both rely on events described in the Shopify documentation and are executed in a sandbox environment.
Nonetheless, differences between these environments can impact the application's implementation and functionality. Here are our journey, challenges, and solutions while creating a pixel app on Shopify.
Differentiating Between Custom Pixels and App Pixels
Our research discovered that Shopify does not clearly define the differences between the two sandbox environments: strict sandbox for App Web Pixel and lex sandbox for Custom Web Pixels. As a result, testing events in Custom Web Pixels does not necessarily mean they will work in App Web Pixel. The key differences we identified include:
- Lex Sandbox allows external JavaScript to be injected and script objects to be created on the page.
- Strict Sandbox does not permit the injection of external JavaScript or the creation of script objects.
Problems and Workarounds
The main issues we faced with the Shopify Pixel App stemmed from the differences in the ability to inject scripts between the two sandboxes. The lex sandbox, where external scripts can be injected, had no significant implementation issues. However, the strict sandbox posed a considerable challenge due to its inability to inject external scripts.
Example Problem
Pixel providers often have their scripts that perform actions on the page. These scripts can be injected and used in the lex sandbox but not in the strict sandbox.
Workarounds Used by Other Applications:
- Reverse Engineering Libraries: Some applications perform a fetch request to a specific address instead of using the original scripts. However, this approach is vulnerable to script-provider changes, which could cause the application to stop working.
- Using Class and ID in Shopify Template: Other applications inject JavaScript that listens for events on buttons. Issues here include the inability to access data like price and quantity, lack of support for custom themes, and lack of access to checkout.
Our Solution
We had to approach the problem with Shopify Pixel App creatively, considering the specific requirements of our clients and the constraints of Shopify:
- Injecting JavaScript on the Page
On store pages, we injected JavaScript that loaded the client’s code and listened for changes in localStorage. The Shopify event would fire and populate localStorage with data, which our client script would then act upon.
- Handling Checkout:
Checkout posed a more significant challenge as scripts cannot be injected there. We had to encode a direct request to the client’s server, which was the only way to handle this stage of the purchasing process.
Privileges of the Giants
It is worth noting that the only companies allowed to inject their JavaScript into checkout are Google and Facebook. The rest must find alternative solutions, often requiring creativity and reverse engineering.
Conclusion
Creating a pixel app on Shopify is a process full of surprises and challenges, especially when encountering differences in sandboxes and script injection limitations.
Through our efforts and creative solutions, we overcame these obstacles, ensuring the app's functionality on store pages and checkout. Our experiences highlight the importance of continuous exploration of possibilities and a flexible approach to problem-solving in custom Shopify development.
