In this article, we'll show you how to install the Mouseflow tracking code using the Shopify CMS and settings.


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

 

Once you have completed adding the Mouseflow Tracking Code to your site you should refresh one of the pages that the code is on, this will let Mouseflow know that the installation has been made.


To begin recording traffic on your site, you need to activate tracking by clicking the Activate Tracking button from the 

Manage My Sites page.
You confirm that you will abide by Mouseflow terms and not collect Personal Identifiable Information (PII) by signing your name and clicking the button.




Tip: If you are not seeing the Activate Recording button (or popup) at this point, please try to visit your site in your browser's Private or Incognito mode, and do some clicking, scrolling and navigating while you're there.


Once you have activated tracking, Mouseflow will automatically begin recording your visitors. You can check the Recording Status from the Manage My Sites page or you can click the play button to go to your Dashboard.



Recording checkouts in Shopify

Note: If you are using Shopify's own checkout pages (checkout.shopify.com) this means that unfortunately you won't be able to track the checkout pages themselves. 

For security reasons, Shopify won't allow tracking or 3rd party javaScript in the 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 wether a transaction was successful or not.


The following guide will walk you through installing the Mouseflow tracking code on your Shopify 'thank-you-page' Pages:


  1. From the Shopify backend, go to Settings > Checkout > Order Processing and repeat step 6 from above in the box labeled "Additional Scripts". Click "Save".



  2. Now go to your Mouseflow account, open your website, then click Settings.
  3. Scroll down and click Advanced settings, then Select Regex from the Merge URLs field, and enter the following in the Pattern field:
    ^.*\/\d*\/checkouts\/\w*\/thank_you$
    
    In the "Domains" field, enter checkout.shopify.com or your second domain and hit tab to add it to the list, remember to click Save.
    
    
    
    
    You can also add an alias to make it easier to spot these pages collectively as Thank You Pages. Remember to click Save.
  4. From here go to the Apps & Integrations menu and enable Cross-Domain Support to complete the configurations for the Shopify Checkout Pages.




    Note
    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.