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.

5. Copy the following code and paste it into the code editor. This code tracks conversions and order revenue. You may need to customize it to track additional data such as discounts or shipping fees.

const siteCode = "YOUR_SITE_CODE"; // Here, replace by the sitecode of your project in Kameleoon 

analytics.subscribe("page_viewed", event => {
    if (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);    }
 }
 });

 // Step 2. Subscribe to customer events with analytics.subscribe(), and add tracking

 // 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 =  'YOUR_GOAL_ID'; // Here, replace by the id of the 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]);
 })

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.