How to Add Wicked Reports Tracking for your Shopify Checkout Page

This article is a guide to installing the Wicked Reports custom tracking code onto Shopify's Checkout page

• Introduction to Shopify Checkout Page Tracking
• How Do I Setup Tracking For My Shopify Checkout Page?

• How Do I Get The Custom Code?

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

Introduction to Shopify Checkout Page Tracking

Shopify is in the process of deprecating their checkout.liquid theme (August 2025) and making many other changes to their checkout process. To ensure optimal tracking throughout these changes, we've had to add this step to the Shopify Integration process. To have your checkout page reliably tracked, you now need to create a Custom Pixel in your Shopify store and install the custom code provided by Wicked Reports. See more details below.

 

How Do I Setup Tracking For My Shopify Checkout Page?

 

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

2. Select "Customer Events"
   

3. Click "Add custom pixel"
   

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

5. In the "Permission" Tab, select "Not Required"

6. In the "Data Sale" Tab, select "Data Collected does not qualify as data sale"
   
   

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

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

 

How Do I Get The Custom Code?

There are two options for getting the custom code. 

1. Reach out To the Wicked Reports Support Team
   1. Request a "Shopify Checkout Custom Code".
2. Create the Custom Code Yourself.
   1. Extract the Custom Code from Wicked
   2. 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':['wicked.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.
   It should look something like this:
   
   
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 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 is officially tracking.
   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?
  No. All users can update their custom events.