Recording checkouts in Shopify

For security reasons, Shopify won't allow tracking or 3rd party JavaScript in the payment flow itself. They do however allow tracking of their order confirmation (/thank_you) page that customers land on when they have completed a purchase.

We highly recommend tracking the /thank_you page as it will allow you to track customers enter and complete the checkout flow - providing an indicator of whether a transaction was successful or not.

Please note that there are 2 possible checkout flows in Shopify:

However, the solution is the same for both of them - Shopify only allows Tracking (and 3rd party JavaScript in general) on the order confirmation (/thank_you) pages.


Setup

All Shopify users are able to install Mouseflow on their order confirmation pages, so you can track your Shopify conversions in Mouseflow.

The following guide will walk you through installing the Mouseflow tracking code on your Shopify /thank_you pages.


1. Log in to Shopify

To get started, log in to your Shopify admin panel and click Settings in the bottom left. Select Checkout from your settings page.

Finally, under the Order Processing section, paste your Mouseflow tracking code to the Additional Scripts. Remember to save your settings.

2. Open your Mouseflow account and Add Shopify to your domains

Go to Website Settings, and enter checkout.shopify.com, or your second domain, in the "Domains" field and hit the tab to add it to the list. Remember to click Save.

3. Go to Advanced Settings

Scroll down to open the Advanced settings, then Select Regex from the Merge URLs field, and enter the following in the Pattern field:

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

Hint: You can also add an alias (such as Thank You Page) to make it easier to spot these pages collectively.

Each visit to the order confirmation (/thank_you) page has a randomly generated URL. This is normally a problem for funnels and heatmaps (which depend on a static URL) but is mitigated in the steps above.

This allows you to track the /thank_you page by aggregating all possible variants that match a known pattern for that page URL into one combined URL. As such, look for ^\/\d*\/checkouts\/\w*\/thank_you$ (or if you have provided an Alias, look for that) in your funnel steps and heatmap list to study behavior on the /thank_you page.

Note: Shopify does not currently allow users to track the shipping and billing pages but, by filtering for users who visit the /thank_you page, you'll still be able to study drop-offs vs. conversions.


4. Enable Cross-Domain Support

Go to the Apps & Integrations menu and enable Cross-Domain Support to complete the configurations for the Shopify Checkout Pages.

Note: Enabling the Cross Domain Support integration will also change the URL's 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:

var mouseflowCrossDomainSupport = true;

When doing this your Mouseflow tracking code should look like this:

<script type = "text/javascript">
var mouseflowCrossDomainSupport = true;
window._mfq = window._mfq || [];
(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>

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

Did this answer your question?