Capture Shopify checkout events

Capture Shopify checkout events and send them to Optimizely Web Experimentation as conversion metrics. You cannot inject the Optimizely snippet directly into Shopify's checkout flow, so subscribe to Shopify's native checkout events through a custom pixel and forward them to Optimizely instead. Use this integration to measure checkout-funnel performance in your Web Experimentation experiments.

Prerequisites

Before you begin, confirm you have the following:

• Admin access to your Shopify store.
• An Optimizely Web Experimentation project with the snippet ID available.
• A Shopify development store for testing (recommended).

Shopify checkout events

The integration subscribes to two Shopify analytics events that mark the start and end of the checkout funnel:

• checkout_started – Fires when the shopper begins the checkout process.
• checkout_completed – Fires when the shopper completes the purchase.

Map these events to Optimizely events such as optly_begin_checkout and optly_purchase. Use the Optimizely events as primary or secondary metrics in your experiments.

When a subscribed event fires, the handler loads the Optimizely snippet and initializes the Optimizely object. The handler then pushes the event to Optimizely. Optimizely sends the event data through a standard network call, just as the snippet does on regular pages.

Configure the custom pixel

Add a custom pixel in your Shopify admin to subscribe to checkout events and forward them to Optimizely.

1. Click Settings in your Shopify admin.

2. Click Customer events.

3. Click Add custom pixel.

4. Enter a descriptive name for the pixel.

5. Click Add pixel.

6. Configure the Permission and Data sale settings to match your site's privacy policies. When Permission is required, the pixel fires only for visitors who consent through your privacy banner.

   

7. Paste the following code into the Code field:

   JavaScript

   function loadOptimizely(callback) {
     // Check if Optimizely is already loaded
     if (window.optimizely) {
       callback();
       return;
     }
   
   // Create a new script element to load the Optimizely snippet
     var script = document.createElement("script");
     // Replace with your Optimizely snippet ID
     script.src = "https://cdn.optimizely.com/js/SNIPPET_ID.js";
   
     script.onload = function () {
       window.optimizely = window.optimizely || [];
       callback();
     };
   
     script.onerror = function () {
       console.error("Failed to load Optimizely script");
     };
   
     document.head.appendChild(script);
   }
   
   // Subscribe to the 'checkout_started' event in Shopify
   analytics.subscribe("checkout_started", async (event) => {
     loadOptimizely(function () {
       window.optimizely = window.optimizely || [];
       window.optimizely.push({
         type: "event",
         eventName: "optly_begin_checkout",
       });
     });
   });
   
   // Subscribe to the 'checkout_completed' event in Shopify
   analytics.subscribe("checkout_completed", (event) => {
     loadOptimizely(function () {
       const revenue = event.data.checkout.totalPrice.amount * 100;
       window.optimizely = window.optimizely || [];
       window.optimizely.push({
         type: "event",
         eventName: "optly_purchase",
         tags: {
           revenue: revenue,
           value: event.data.checkout.totalPrice.amount,
         },
       });
     });
   });

8. Replace SNIPPET_ID in the script URL with your Optimizely project's snippet ID.

9. Replace optly_begin_checkout and optly_purchase with the API Name of the corresponding event in your Optimizely project. The API Name is the identifier set when the event is created. It differs from the event's display name.

10. Click Save.

11. Click Connect.

12. Click Connect in the confirmation dialog to link the pixel to your store.

Test the integration

Verify that the events fire correctly and reach Optimizely before you rely on the data in a production experiment.

1. Open your Shopify development store.
2. Start a checkout.
3. Open the browser developer tools.
4. Confirm that the Optimizely snippet loads.
5. Confirm that optly_begin_checkout fires when checkout starts.
6. Confirm that optly_purchase fires with the revenue tag when the order completes.
7. In Web Experimentation, confirm that the events are received and available as metrics.

Related resources

• Shopify Web Pixels API standard events – Reference for the events available in a Shopify custom pixel.
• Use a CMS or ecommerce platform with Optimizely snippet – Add the Optimizely snippet to your Shopify storefront pages.