How to implement Revenue tracking for Shopify

If you are utilizing Shopify as your e-commerce platform, there are notable distinctions in how the revenue callback is integrated.

Notice! Shopify currently restricts front-end manipulation of the checkout for security purposes. Consequently, you will only have access to gather revenue data from the checkout process.

Implementation

To incorporate revenue data tracking (Total Revenue, Average Quantity, Average Order Value) into your statistics, you must integrate the callback function as a pixel within your Shopify account. To achieve this, navigate to Settings > Customer Events > Add Custom Pixel within your Shopify account. Subsequently, you will be prompted to select a name for your pixel (which can be any suitable designation) and then you will be directed to the following screen.

In Step 1, insert the provided code below. Ensure to customize the "websiteID" parameter to align with the corresponding identifier in your implementation script. Note that you need to check with an if statement that you are on the correct page(s). In the example below we check if the URL contains the string checkout. This could vary so please replace this with the string that matches your page(s) URL.

if(window.location.href.indexOf('checkout') > -1) {
  const script = document.createElement('script');
  script.setAttribute('src', 'https://cdn-sitegainer.com/websiteID/es6/index.bundle.js');
  script.setAttribute('async', '');
  document.head.appendChild(script);
}

In Step 2, it is necessary to specify the customer events for subscription. All Shopify events can be viewed here. As we intend to integrate it into the "Thank you for your order"/Confirmation page, we will select the "checkout_completed" event. The code should be structured as follows...

analytics.subscribe("checkout_completed", async (event) => {
  const checkout = event.data.checkout;
  let lineItems = checkout.lineItems;
  let qty = 0;
  for (let i = 0; i < lineItems.length; i++) {
  qty += lineItems[i].quantity;
  }
  const checkoutID = checkout.token.toString();
  const checkoutTotalPrice = checkout.totalPrice.amount;
  const itemQuantity = qty;

  /* Revenue tracking */
  if (typeof symplify !== 'undefined') {
    symplify.revenue.push({
       "orderID": checkoutID,
       "orderValue": checkoutTotalPrice,
       "itemQty": itemQuantity
     });
  } else {
    document.addEventListener("symplify-loaded", function() {
        symplify.revenue.push({
             "orderID": checkoutID,
             "orderValue": checkoutTotalPrice,
             "itemQty": itemQuantity
          });
       });
    }
});

Notice! If you have integrated the revenue callback on a non-Shopify website, you may have observed the addition of the following code... 

let lineItems = checkout.lineItems;
  let qty = 0;
  for(let i = 0; i < lineItems.length; i++) {
  qty += lineItems[i].quantity;

This addition is necessary as Shopify manages item quantities differently, and the provided code takes that into consideration.

After adding the code, hit save and connect to activate the pixel on your website. You will then observe its status indicated as "connected" within the list of your pixels.

Don't forget that you also need to add a Goal with a Revenue fact in your project for the revenue data to appear on the result page for your project.

Important!

• All values are required for the push to go through. We do not accept 0/null values.
• We do not handle currencies so you need to convert all values to the same currency for the calculations to be correct.

Example statistics

If implemented correctly the Revenue data should appear as extra columns in each goal that has a Revenue fact (and has received data).

Notice that if there are more than 1000 transactions the Remove Outliers checkbox is checked by default. How we handle outliers.