In order to begin using Mouseflow to improve your conversions, you need to install a little snippet of code we inventively named the Tracking Code onto the website you want to record. This code will essentially catch all the users' clicks, scrolls and mouse movements and send this data back to our servers.


In this article we will go over 3 simple ways to install the Mouseflow Tracking Code, as well as present relevant next steps to take in order to get started using Mouseflow.




1. Tag Managers



Using Google Tag Manager (or any other tag manager) is a great, and very easy way, to install Mouseflow on your site. In our guide to Installing Mouseflow using tag managers we're going to go over the 4 easy steps necessary to do that.




2. One of our many plugins



If you are using a Content Management System (CMS) like Wordpress, Shopify, Magento or similar the easiest way to install Mouseflow is to use one of our many Plugins. You can find the full list and guides to installing Mouseflow using plugins here.




3. Basic HTML



If you prefer to install the Tracking Code manually, or if your specific platform is not listed in the plugins list, please follow the instructions in our basic HTML installation guide.




Once you have installed the Tracking Code on your site it's time to Activate Mouseflow by generating your first recording.


Generating a Recording

After installing the Tracking Code and Activating Recording, you can open the website in your Mouseflow account and click "Recordings" to view the first results.

Note: It can take a few minutes for the first recording(s) to appear; after that, Mouseflow will be near-instantaneous.




Excluding Sensitive Data (PII)

If you collect sensitive data, you need to 

  1. exclude keystroke tracking for certain input fields
  2. disable keystroke for all input fields, or 
  3. exclude/replace content shown in the page source itself.

By default, Mouseflow excludes all password and credit card number fields automatically.



Blocking Yourself

If you want to exclude your own sessions, you can block IP addresses. This can either be individual IP addresses, a list of IP addresses, or an IP address pattern using wildcards (e.g. 11.22.* will block 11.22.33.44, 11.22.44.55, and so on).

You can also opt-out of being recorded using the cookie method on our public opt-out page. We recommend including a link to this page from your privacy policy, as well.




Advanced Installation

In some cases, you'll want to customize the installation for Mouseflow. We have a few different options, depending on your needs.


A/B Testing

If you run A/B tests on your site, it's useful to have separate heatmaps for each test variation (so you can compare the results).

You can indicate a custom heatmap (bucket) for each variation that data should flow into -- this is done with a simple variable:

<script type="text/javascript"> 
    var mouseflowPath = '/product-a';
    window._mfq = window._mfq || [];
    (function() {
        var mf = document.createElement("script");
        mf.type = "text/javascript"; mf.async = true;
        mf.src = "//cdn.mouseflow.com/projects/123.js";
        document.getElementsByTagName("head")[0].appendChild(mf);
    })();
</script>


Each time this snippet runs, any data will be sent to the heatmap collection under /product-a.

You'll need to customize and add this code within your A/B testing tool, as part of the code for a variation.

Most A/B testing tools provide their own variable for a page variation. As such, it can be dynamically inserted:

<script type="text/javascript"> 
    var mouseflowPath = '/product-' + variationId;
    window._mfq = window._mfq || [];
    (function() {
        var mf = document.createElement("script");
        mf.type = "text/javascript"; mf.async = true;
        mf.src = "//cdn.mouseflow.com/projects/123.js";
        document.getElementsByTagName("head")[0].appendChild(mf);
    })();
</script>



This assumes a variable called variationId is provided (by the A/B testing tool) that contains the unique ID associated with the variation. The end result would be var mouseflowPath = '/product-a'; or similar.

Note: It is important to include the forward slash in front of the mouseflowPath.

This is correct:

<script type="text/javascript"> 
    var mouseflowPath = '/correct';
</script>


This is not correct:

<script type="text/javascript"> 
    var mouseflowPath = 'notcorrect';
</script>


See this article for more information: Testing Multiple Versions of Website (A/B Testing)


Merging Several Pages Into One Heatmap

If your site has many pages that share a similar layout, it can be helpful to combine or aggregate data into a single heatmap. For example, e-commerce websites have category and product pages that have a similar structure: these are perfect candidates.

You can customize how pages are merged under Settings > Advanced settings > Merge URLs (once you open a specific website in Mouseflow). More information about setting up Merge URLs is available here.


Custom Variables/Tagging

With Mouseflow, you can associate your own custom data with a recorded session. It's important to note that this feature cannot be used to push sensitive or personal information into Mouseflow. This is useful for any website that wants to find sessions by a data layer variable or order ID, for example.

To enable it simply add a line to the main tracking code to associate a key/value pair with the session.

<script type="text/javascript"> 
    window._mfq = window._mfq || [];
    (function() {
        var mf = document.createElement("script");
        mf.type = "text/javascript"; mf.async = true;
        mf.src = "//cdn.mouseflow.com/projects/123.js";
        document.getElementsByTagName("head")[0].appendChild(mf);
    })();
    window._mfq.push(["setVariable", "KEY", "VALUE"]);
</script>


In this example, we tag a session with a key of KEY and a value of VALUE. In reality, a key might be order_id and a value might be 12345.

This feature can be extended for a variety of uses, as described in this article.

Mouseflow also has a number of built-in tags that are automatically applied to each session.


Single Page Applications

When Mouseflow loads, it detects all content present on the page.

In the case of a single page application, this content might change without the URL exhibiting any change at all.

It is important to notify Mouseflow that a new "virtual" page has been rendered -- this is done with a simple function call.

<script type="text/javascript">
    window._mfq.push(["newPageView"]);
</script>


Most clients add this function in a "before filter" or as part of their application's routing system. This ensures that it's called each time a page's content is changed.

See this for more information: Single Page Websites