Overview

There are 2 types of Shopify activity that you can record using Mouseflow:

  1. Non-checkout pages (required). If you want to record any Shopify activity, you must first configure Mouseflow to record the activity on the main part of your Shopify site.

  2. Checkout pages (optional). If you use Shopify Checkout and you want to record the visitor journey during the checkout flow, you can take additional, advanced steps to configure Mouseflow to record activity there as well.

This article is about recording checkout pages. If you haven't already configured Mouseflow to record the non-checkout pages, follow these steps first.

Please note that for security reasons, Shopify only allows tracking for some of the pages of the checkout flow. This article will enable you to track the thank you page and - only if you have a Shopify Plus account - the rest of the checkout flow.

Setup

The following guide will walk you through configuring Mouseflow to record the Shopify thank you page.

1. Add the Mouseflow tracking code as a Checkout page script

  • Log in to Shopify, go to Settings, then select Checkout on the left sidebar.

  • Under the Order status page scripts section, you will see one or two text boxes depending on your Shopify setup. Paste your Mouseflow tracking code in the text box for Scripts or Additional Scripts:

2. Add Shopify Checkout to your domains in Mouseflow

  • In Mouseflow, go to Website Settings, and enter checkout.shopify.com, or your domain where the Shopify Checkout pages are hosted, in the "Domains" field and hit the tab key on your keyboard to add it to the list. Click Save.

3. Merge URLs

The URL paths in Shopify Checkout are unique to each visitor. In order to make them useful in Mouseflow, you need to merge them together with some advanced rules.

  • Scroll down to open the Advanced Settings card and locate the Merge URLs section. Add the following URL merge rule:

Type

Pattern

Alias

Regex

^.*\/\d*\/checkouts\/\w*\/thank_you$

/checkout/thank_you

  • Optional step: You can further customize the Alias by adding your domain name on the front or a different name. For example, /checkout/thank_you can be turned into your-domain.com/checkout/thank_you or just Thank You.

  • Click Save.

Additional steps for Shopify Plus accounts

The following guide will walk you through configuring Mouseflow to record the rest of the Shopify checkout pages.

1. Add the Mouseflow tracking code to the checkout.liquid layout

  • Log in to Shopify.

  • Navigate to Customize Theme > Customize Theme > Customize.

  • Go to the Theme Actions area in the bottom left of the screen and select Edit Code.

  • Under Layout, click checkout.liquid to open your template file and scroll to the bottom of the code.

  • Just before the closing body tag </body>, insert the customized version of the Mouseflow Tracking Code seen below:

<script type="text/javascript">
window._mfq = window._mfq || [];
if (window.location.href.indexOf("checkouts") > -1) {
window._mfq.push(['config', 'includeQueryStringInPath', true])
};
(function() {
var mf = document.createElement("script");
mf.type = "text/javascript"; mf.defer = true;
mf.src = "//cdn.mouseflow.com/projects/your-website-id.js";
document.getElementsByTagName("head")[0].appendChild(mf);
})();
</script>
  • Replace the text "your-website-id" in the inserted Tracking Code with your actual Website ID that can be found in Mouseflow > Website Settings.

  • Make sure to save the updated theme before closing the window.

2. Merge URLs

  • In Mouseflow, go to Website Settings > Advanced Settings, and below the /checkout/thank_you_page, create the following Merge URLs rules:

Type

Pattern

Alias

Regex

^.*\/\d*\/checkouts\/.((?!previous|processing|thank_you).)*$

/checkout

Regex

^.*\/\d*\/checkouts\/.*previous_step=contact_information&step=shipping_method

/checkout/shipping_method

Regex

^.*\/\d*\/checkouts\/.*previous_step=shipping_method&step=payment_method

/checkout/payment_method

^.*\/\d*\/checkouts\/.*previous_step=payment_method&step=review

/checkout/review

Regex

^.*\/\d*\/checkouts\/\w*\/processing

/checkout/processing

Regex

^.*\/\d*\/checkouts\/.*forward\?complete=1&previous_step=payment_method&step=

/checkout/payment_abandoned

  • Optional step: You can further customize the Alias by adding your domain name on the front or a different name. For example, /checkout/processing can be turned into your-domain.com/checkout/processing or just Processing.

  • Click Save.

Note: You can find more information about conversion tracking on Shopify checkout pages on Shopify's help center here.

Did this answer your question?