Tracking Shopify Extensibility Checkout page

This article is a guide to installing the Wicked Reports tracking code on checkout pages upgraded to Shopify Extensibility.

• What is the Checkout Extensibility Upgrade?
• How Do I Setup Tracking For Checkout Extensibility?

• How Do I Get The Custom Code?

• How Do I Validate My Tracking Setup?
• FAQ's

What is the Checkout Extensibility Upgrade?

Shopify is deprecating their checkout.liquid theme (August 2025). This means Shopify Plus users will eventually need to upgrade to Checkout Extensibility. To ensure optimal tracking after this upgrade, you need to create a Custom Pixel in your Shopify Plus store and install the custom code provided by Wicked Reports for checkout page tracking.

If you have not yet upgraded to Checkout Extensibility, then you do not need to take this action. Be aware that, when checkout.liquid is deprecated, you will need to eventually use Checkout Extensibility. And, at that point, you will need to go through these steps.

How Do I Setup Tracking For Checkout Extensibility?

 If you are a Shopify Plus user and have already switched from the liquid.checkout to Checkout Extensibility, please follow the steps mentioned below. 

1. In your Shopify Plus store, Go to "Settings"

2. Select "Customer Events"
   

3. Click "Add custom pixel"
   

4. Give the Pixel a name and click "Add Pixel"

5. Add the provided code to the Pixel and click "Save"

6. Click the "Connect" button to connect the pixel to your store

How Do I Get The Custom Code?

There are two things you'll need to do to get the proper code for your Custom Pixel:

• Extract the Custom Code from Wicked
• Complete the Custom Code

Extract the Custom Code from Wicked

1. Click on this link to open the tracking code section of your account.
   Alternatively, in Wicked Reports, Navigate to Setup -> Tracking Code
2. Copy the highlighted portion of the code; the URL.
   Here's an example: 
   https://widget.wickedreports.com/v2/XX/wr-da4633795749fcd055c01787424b4568.js
   
3. Open a new browser tab, paste the above code into the URL bar and press Enter.
4. Copy all of the new code from the browser's page.
   Note: When you paste this, be sure to exclude the very first semi-colon ";" as this will not be needed.
   

Complete the Custom Code

1. Take your previously copied code from the last section.
   Note: It will look something like this (DO NOT COPY THIS EXAMPLE CODE):
   Note: We are not including the very first semi-colon from the copied code.
   
   1. window.wrWidgetSettings=window.wrWidgetSettings||{'clickbank':!1,'hubspot':!1,'legacyBrowsers':!1,'gClick':!1,'organic':!0,'minTimeMinutes':2880,'organicDomains':['condition1.com'],'paypalEC':!1,'facebookOCT':!1,'cId':XXXX};window.loadWR=window.loadWR||function(i){var e,n=document.getElementsByTagName('head')[0];e=document.createElement('script');e.async=1;e.src=i;n.appendChild(e)};loadWR('https://widget.wickedreports.com/widget.js');
2. Add this portion of the code to your newly created pixel.
3. Next, copy the following code (exactly as is):
   1. analytics.subscribe("checkout_contact_info_submitted", event => {
         if (window._wr) {
           window._wr.wrPush(event.data.checkout.email);
         }
       });
      analytics.subscribe("checkout_address_info_submitted", event => {
          if (window._wr) {
           window._wr.wrPush(event.data.checkout.email);
          }
       });
      analytics.subscribe("payment_info_submitted", event => {
          if (window._wr) {
           window._wr.wrPush(event.data.checkout.email);
          }
       });
      analytics.subscribe("checkout_shipping_info_submitted", event => {
          if (window._wr) {
           window._wr.wrPush(event.data.checkout.email);
          }
       });
4. Now, go back to your newly created pixel's custom code section, and go to an empty line.
   (right below your previously added code).
5. Paste the code from Step 3 into this new line.
   It should now look something like this:
   
   

That's it! Now that you have the custom code added, just press the connect button on your pixel and you'll be good to go! 

How Do I Validate My Tracking Setup?

This is the process you'll need to take to ensure your checkout page is tracking correctly. It's very quick and easy to do. Once this test has been completed, you'll be all good to go!

1. Open your Checkout Extensibility Checkout Page.
   
   
   
2. Right Click, then select Inspect
   
   
   
3. Select Network
   
   
   
4. Inside the Filter, type Wicked
   
   
5. Select Fetch/XHR (or just, XHR)
   
   
6. Click into the email field on the checkout page
7. Clear the results
   
8. Then, manually type an email address (e.g. testing@wickedreports.com) and press enter.
9. After typing an email address, you should see two results like this:
   
   1. If you see these two results, your checkout extensibility setup is officially completed.
   2. If you do not see these results, don't hesitate to get in touch with support@wickedreports.com for further assistance, and we can get you squared away.

Congratulations on completing your setup! 

FAQ

• Is this only applicable to Shopify Plus users?
  Yes. Only Shopify Plus users will have access to checkout extensibility
• What do I do if I have the default Shopify account and not Shopify Plus?
  Nothing. Your Shopify account will continue to track because we automatically add our tracking script to your order confirmation page.