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.

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

A. 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.
    Note: You will need the "HTML" option of your Mouseflow tracking code which is the same as the one used for the installation on the non-checkout pages.

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

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

/checkout/thank_you

  • Optional step: You can further customize the Alias by adding your domain name on the front (recommended if you have enabled the Cross-Domain Support integration - see step A.4) or by using any other name as the page Alias. For example, /checkout/thank_you can be turned into your-domain.com/checkout/thank_you or just Thank You.

  • Click Save.

4. Optional step: Enable Cross-Domain Support

  • To make sure that recordings from both your own domain and Shopify's are combined into one continuous session for each user, you can navigate to the Apps & Integrations page and enable the Cross-Domain Support integration:

Note: Enabling the Cross-Domain Support integration will also change the URLs displayed in your recordings and heatmaps in Mouseflow to include the full domain name. If, for example, Mouseflow used to display your home page as just "/", it will now display the homepage as "www.yourdomain.com/".

Advanced: If you don't want the URL to change as described in the above note, you can skip the Cross-Domain Support integration and instead, implement it manually by adding the following snippet of code to your Mouseflow tracking code - just after the opening <script> tag:

var mouseflowCrossDomainSupport = true;

B. Additional steps for Shopify Plus accounts

The following guide will walk you through configuring Mouseflow to record the rest of the Shopify checkout pages. If you haven't already configured Mouseflow to record the Shopify thank you page, follow these steps first.

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 pattern, 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

Regex

^.*\/\d*\/checkouts\/\w*\/express\/callback

/checkout/express/callback

Regex

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

/checkout/review

Regex

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

/checkout/payment_abandoned

Regex

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

/checkout/processing

  • Optional step: You can further customize the Alias by adding your domain name on the front (recommended if you have enabled the Cross-Domain Support integration - see step A.4) or by using any other name as the page Alias. For example, /checkout/processing can be turned into your-domain.com/checkout/processing or just Processing.

  • Click Save.

Notes

Installation with Google Tag Manager (GTM)

It is possible to add the Mouseflow tracking code to the Shopify Checkout pages through Google Tag Manager (GTM) instead of the Shopify CMS directly.

In that case, you need to:

  • Create a Custom HTML-type tag that triggers across All Pages on your site (including the entire checkout flow).

  • Follow all steps listed above other than the ones related to adding the Mouseflow tracking code to your site (i.e. A.1 and B.1).

  • If you have a Shopify Plus account, use the customized version of the Mouseflow Tracking Code referenced in step B.1.

Working with Regex & customizing patterns

If your Shopify Checkout pages have a custom URL format that does not follow the same logic as the Regex patterns seen in the tables above, you might notice that the pages are not merging. Therefore, you will need to adjust your Merge URLs rules to match accordingly. Additionally, if there are extra steps in your Shopify Checkout flow, you can create more Regex patterns to merge such pages.

In any case, we recommend taking a look at this helpful article or visiting regex101.com to practice and learn more about different Regex expressions or verify your patterns before inserting them into the Mouseflow Advanced Settings.

Creating a funnel with Shopify Checkout pages

If you choose to enable Cross-Domain Support and you would like to create a funnel that contains both Shopify Checkout pages and other pages from your site, you will need to include the full URL for pages on your site and the Alias you assigned to the Shopify Checkout pages in the Merge URLs rules under the Page path field.

For example:

Did this answer your question?