Surprises While Developing a Pixel App on Shopify
Developing a pixel app on Shopify can bring a host of surprises. Managing pixels on the Shopify platform involves two methods: Custom Pixels and App Pixels. Both methods rely on events described in the Shopify documentation and are executed in a sandbox environment. However, differences between these environments can impact the implementation and functionality of the application. Here is our journey and the challenges we encountered while creating a pixel app on Shopify.
Differentiating Between Custom Pixels and App Pixels
During our research, we 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 for the injection of external JavaScript and the creation of script objects 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 stemmed from the differences in the ability to inject scripts between the two sandboxes. In lex sandbox, where external scripts can be injected, there were no significant issues with implementation. However, the strict sandbox posed a considerable challenge due to the inability to inject external scripts.
Example Problem:
- Pixel providers often have their own scripts that perform actions on the page. These scripts can be injected and used in lex sandbox but not in 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 changes by the script provider, potentially causing the application to stop working.
- Using Class and ID in Shopify Template: Other applications inject JavaScript that listens for events on buttons. The issues here include the inability to access data like price/quantity, lack of support for custom themes, and no access to checkout.
Our Solution
We had to approach the problem 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 greater 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 managed to overcome these obstacles, ensuring the functionality of the app both on store pages and in checkout. Our experiences highlight the importance of continuous exploration of possibilities and a flexible approach to problem-solving.
