Connect Shopify Checkout Extensibility to Kameleoon to track conversions

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.

1. Click Settings in Shopify admin.

2. Click Customer events on the Settings panel.

3. Click Add custom pixel.

4. In the Add custom pixel modal, type a descriptive name into Pixel name, and then click Add pixel.

// Here, replace by the sitecode of your project in Kameleoon 
 const siteCode = "XXXXXXXX";
 let isKameleoonScriptInjected = false; 
 analytics.subscribe("page_viewed", event => {
     if (!isKameleoonScriptInjected && event.context && event.context.document && event.context.document.location && event.context.document.location.href) {
         if (event.context.document.location.href.indexOf("checkout") !== -1) {

         // Create a script element         var script = document.createElement('script');

         // Set the type attribute         script.type = 'text/javascript';

         // Set the src attribute to the Kameleoon JavaScript URL         script.src = '//'+siteCode+'.kameleoon.eu/kameleoon.js';

         // Set async attribute to true         script.async = true;

         // Set fetchpriority attribute to high         script.setAttribute('fetchpriority', 'high');

         // Append the script element to the document's head or body         document.head.appendChild(script); // You can also use document.body.appendChild(script);         isKameleoonScriptInjected = true;
     }
 }
 });
         
 // The Kameleoon Command Queue allows you to delay the command's execution until the Kameleoon engine finishes loading. 
 // Once loaded, the engine executes all the commands in the queue, in the order they were pushed. 
 window.kameleoonQueue = window.kameleoonQueue || [];
 const goalID = 'XXXXXX'; // Here, replace by the id of the transaction goal you created in Kameleoon
 const eventName = 'checkout_completed'; // Here, replace by the Shopify event name
 analytics.subscribe(eventName, event => {
     kameleoonQueue.push(['Kameleoon.API.Goals.processConversion', goalID, event.data.checkout.totalPrice.amount]);
 //code to add custom data containing the "currency" value to breakdown your transaction results //kameleoonQueue.push(['Kameleoon.API.Data.setCustomData', 'currency', event.data.checkout.totalPrice.currencyCode]);
 });

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.