Several Mouseflow users run e-commerce websites powered on the Shopify platform. In this article, we'll show you how to install the Mouseflow tracking code in a few easy steps.
Step 1: Log in to your Shopify Account and go to Admin
Step 2: Navigate to Customize Theme > Customize Theme > Customize
Step 3: Go to the Theme Actions area in the bottom left of the screen and select Edit Code
Step 4: Under Layout, click theme.liquid to open your template file
Scroll to the bottom of the code, just before the closing body tag </body> is where you should insert the Mouseflow Tracking Code.
Step 5: Find and copy your Tracking Code in Mouseflow
Step 6: Insert the Mouseflow Tracking Code before the closing body tag and save the template
Remember to Save.
Step 7: Test Installation and Activate Tracking
Recording Shopify Checkout pages
If you use Shopify's Checkout Pages and want to record them, you'll need to add the code there separately.
The following guide will walk you through installing the Mouseflow tracking code on your Shopify Checkout Pages:
- From the Shopify backend, go to Settings > Checkout > Order Processing and repeat step from above 6 in the box labeled "Additional Scripts". Click "Save".
- Now go to your Mouseflow account, open your website, then click Settings.
- Scroll down and click Advanced settings, then Select Regex from the Merge URLs field, and enter the following in the Pattern field:
You can also add an alias to make it easier to spot these pages collectively as Thank You Pages.
Remember to click Save.
Remember to click Save.
- These steps are only necessary if your checkout pages are hosted on a separate domain (e.g. checkout.shopify.com). You can see whether you are using Shopify's checkout domain or hosting the checkout pages at your own domain by looking at the URL of your checkout pages:
- If the URL looks like this https://yourdomain.com/27673821287/checkouts/37213decf9bd0a3a1edf3123e726c3e5 You are hosting your checkout pages yourself and can skip the next steps in the guide.
- If the URL looks starts with https://checkout.shopify.com/ you are using Shopify's checkout pages
In the "Domains" field, enter
checkout.shopify.comor your second domain and hit tab to add it to the list, remember to click Save.
- From here go to the Apps & Integrations menu and enable Cross-Domain Support to complete the configurations for the Shopify Checkout Pages.
Each visit to the thank you/confirmation 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. 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.