You can track Shopify checkout conversions with Kameleoon. This integration will help you optimize your store’s performance by giving you deeper insight into your customer’s purchasing behaviors.
Prerequisites
Before you start, make sure that you have:
- A Kameleoon account with an active project.
- The site code of your Kameleoon project.
- The goal ID that you want to track in Kameleoon.
Connect Shopify Checkout Extensibility to Kameleoon
Shopify has announced that on August 13, 2024, it will no longer support its checkout.liquid layout on its clients’ information, shipping, and payment checkout pages. Furthermore, on August 28, 2025, it will no longer support checkout.liquid on its clients’ “Thank You” and order status pages as well as turn off apps using script tags and additional scripts under the post-purchase and order status pages. Therefore, any Shopify Plus client that customizes its checkout flow using checkout.liquid must upgrade to Shopify’s checkout extensibility platform features suite.
See Shopify’s checkout extensibility upgrade documentation for the prerequisites and steps to upgrade from checkout.liquid to checkout extensibility.
In addition to moving its checkout flow customizations from checkout.liquid to checkout extensibility, you must create a custom pixel that will allow you to track Shopify events and send the appropriate data to Kameleoon. The list of possible Shopify events is documented here. Additionally, Shopify also exposes the cart or transaction details in the object event.data.checkout. For instance, to track the transaction revenue, you can use the event.data.checkout.totalPrice.amount variable.
Before publishing your draft checkout profile created using checkout extensibility, follow these steps to create a custom pixel containing code to send customer data from Shopify to Kameleoon.
2. Click Customer events on the Settings panel.
4. In the Add custom pixel modal, type a descriptive name into Pixel name, and then click Add pixel.
You will need this code. Make sure to replace placeholder texts like “YOUR_SITE_CODE” and “YOUR_GOAL_ID” with the actual values from your Kameleoon project.
Note: The domain for snippet scripts may vary from one project to another. Projects can be hosted on either “kameleoon.eu” or “kameleoon.io” depending on their creation date. Please use the snippet displayed in your project/account.
Note: If you need to track events on other pages in the checkout, such as the cart page, you can subscribe to additional events like ‘cart_viewed’ by adding the following code in the pixel:
analytics.subscribe('cart_viewed', event => {
//Your code here
});
6. Click Save > Connect, then click Connect in the advisory modal.
Validate if your goals trigger on the checkout
Because Shopify’s custom pixels operate within a sandbox environment, our Kameleoon x Shopify integration is presently restricted to tracking Shopify Events. Experimentation, including the use of our graphic or code editor and simulation panel, is not feasible in this environment.
To verify if the pixel tracking works for any of your Kameleoon goals triggered during checkout, we recommend either using our simulation panel on your main domain or utilizing our Activation API. Simply try the following code snippet in your browser’s developer console:
Kameleoon.API.CurrentVisit.conversions["GOAL_ID"]; // Here, replace by the id of the goal you created in Kameleoon This will help you confirm if the pixel tracking is functioning as expected for your specific goals triggered during the checkout process.
We are actively engaged in discussions with Shopify to explore potential solutions for enabling A/B testing in this context. It also means that you cannot use there our graphic or code editor, including the simulation panel.
