You are reviewing MouseStats documentation: Take a look to the product!

Running multiple Heatmap projects on one URL [depreciated]

There is not longer need to use this solution and it is depreciated. To enable multiple projects on SPAs, please send us an email with some description.

In some cases, it's required to set projects manually. For example, if you have a multi-step order process on a single URL that the content will update dynamically, detecting the projects by URL is impossible. So using this method you can choose project Ids yourself using a single line of JavaScript code.

  • Multi-step order process on a SINGLE URL — ex. http://example.com/order.php
  • Multi language websites with similar URLs
  • A/B testing variations

Solution

Step 1: Creating Projects

At the first step, create multiple projects on the same URL for each variation. For example, We will create 2 projects if we want to track 2steps of our order process on the single URL of http://example.com/order.php

@@infobox:We suggest you to choose a clear name for each project to prevent any confusion because of similar URLs between these projects.@@

Create a project for each step



Step 2: Get Project Ids

From the previous step, now we have 2 projects(or more). You need their Ids for choosing them according to the order step we are in.
Just click on edit link of project:

Projects List

You will be redirected to editing page, in the URL of the page you can find the project Id:

Keep the Project Id

Repeat this step and keep all project ids.



Step 3: JavaScript Codes

In each step of the order process, you should add related project Id using this JavaScript code:

var mousestats_setproject = 'ProjectId';

Example:

<script type="text/javascript">
//Set custom project id
var mousestats_setproject = '5412599889101192010';  //Keep in mind you should change this number with the project Ids you extracted from the previous steps.
</script>

//Default tracking code:
<!-- MouseStats:Begin -->
<script type="text/javascript">(function () {
var _mousestats_script = document.createElement('script');
_mousestats_script.type = 'text/javascript';
_mousestats_script.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www2') + '.mousestats.com/js/5/6/5657531394422013841.js';
_mousestats_script.async = true;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(_mousestats_script);
})();
</script>
<!-- MouseStats:End -->



Step 4: Update Screenshots

Accessing the order steps is impossible for us with one single URL. They are generating according to the user interactions and our Screenshot Bot can not access them. So it's required to upload each project screenshot manually. To do this, you need to follow this document: Upload Custom Screenshots for Heatmaps