Mouseflow Help & Support

Installation Guide

Follow

At Mouseflow, we try to keep it simple. In most cases, Mouseflow can be installed on your website in less than a minute.

Basic Installation

After you create an account, you'll receive a snippet of tracking code (JavaScript). If you already have an account, you can retrieve the code from the dashboard and under Websites > Edit.

Here's an example:

<script type="text/javascript"> 
var _mfq = _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>

To install Mouseflow, simply copy/paste the entire snippet (for your account) to any page(s) you want to track before the closing body tag.

Mouseflow is loaded asynchronously, so it won't slow down or interrupt your site's rendering. Most clients install Mouseflow site-wide via their footer template or tag manager.

Once this is complete, browse to a page that has the code installed and click/move your mouse. Then, go to the dashboard and click to view your first recording. Note: It can take a few minutes for the first recording(s) to appear; after that, Mouseflow will be near instantaneous.

If you collect sensitive data, you may want to exclude keystrokes in certain input fields. See this article for more details: How can I exclude certain input fields from being recorded?

You can also disable the recording of keystrokes in all input fields. See this article for more details: Disable Keystrokes From Being Recorded

If you want to exclude/replace content in recordings or heatmaps, you can use our exclusion comment tags. See this article for more details: Exclude or Replace Content on Pages During Playback or on Heatmaps

If you want to prevent your own activity from being captured, you can exclude your own IP address. See this article for more details: How do I exclude my own IP address?

You can also opt out of being recorded with a cookie: Disable Mouseflow on your browser

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 a separate heatmap collection for each test variation.

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';
var _mfq = _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".

This code would be added within the A/B testing tool itself -- directly into the code for a variation.

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

<script type="text/javascript"> 
var mouseflowPath = '/product-' + variationId;
var _mfq = _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)

Combining Several Pages Into One Heatmap

If your site has many pages that share a similar layout, it can be helpful to combine/aggregate visitor data into a single heatmap.

Most e-Commerce websites have category and product pages that have a similar structure -- these are perfect candidates.

On any pages that should be combined, just indicate the heatmap (bucket) that data should flow into -- this is done with a simple variable.

<script type="text/javascript"> 
var mouseflowPath = '/product';
var _mfq = _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".

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: Combine Several Pages in One Heatmap

Custom Variables/Tagging

With Mouseflow, you can associate additional data with a recorded session.

This is useful for e-Commerce websites that want to find sessions by email address, marketing segment, or order ID.

To use this feature, simply add a line to the main tracking code to associate a key/value pair with the session.

<script type="text/javascript"> 
var _mfq = _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);
})();
_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 the article mentioned above.

See this article for more information: Custom variables & Tagging

Another recommended article: What do the preset tags in Mouseflow mean?

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"> 
mouseflow.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

 

Have more questions? Submit a request

Comments

Powered by Zendesk