Knowledge base | mouseflow

Shopify integration

Several Mouseflow users run e-commerce websites powered by the Shopify platform. In this article we'll show you how to install the Mouseflow tracking code in seven easy steps.

  1. Log in to your Shopify Administration Dashboard. You can access this by going to store.myshopify.com where “store” is your store's name.
  2. Click "Online Store", then click "Themes".
  3. In the top-right corner, next to your active theme, click the "..." button.
  4. Click "Edit HTML/CSS".
  5. Under 'Layouts', click theme.liquid to open your template file.
  6. Scroll to the bottom of the document - just before the </body> tag. This is where you'll paste the tracking code in the next step. Note: You can find your tracking code by picking the website you're interested in from the drop down menu next to the "Help" tab and clicking the </> icon.
  7. Copy and paste the tracking code into the template and, immediately after the opening script tag (<script type="text/javascript">), also add in the following line: var mouseflowCrossDomainSupport = true;
  8. Click 'Save'.
  9. If you use Shopify's Checkout Pages, you'll need to add the code there separately. From the Shopify backend, go to Settings > Checkout > Order Processing and repeat step #7 in the box labeled "Additional Scripts". Click "Save".
  10. Go to your Mouseflow account, open your website, then click Settings.
  11. In the "Domains" field, enter checkout.shopify.com and hit tab to add it to the list.
  12. Scroll down and click "Advanced settings", then enter the following in the "Merge URLs" field: ^\/\d*\/checkouts\/\w*\/thank_you$
  13. Click 'Save'.

You’re all set! Visit your store to ensure tracking is properly enabled. You should start to see data in your Mouseflow account shortly.

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 steps #10 and #11 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$ 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.