A/B Integrations

Mouseflow can record sessions for multiple versions of a page and display each version of the page as a separate heatmap. This is especially useful when running A/B tests so you can compare user behavior and conversions between variations.

Here is a list of guides we have for integrating Mouseflow with A/B Testing tools:

Don't see your tool? You can also configure manually!

Manual setup (A/B testing without an integration)

If your A/B testing tool is not listed in our integrations, you can still send test variations to Mouseflow using a simple manual setup.

The idea is to tell Mouseflow which variation the visitor is seeing by slightly modifying the page path before the tracking script loads. Mouseflow will then treat each variation as a separate page, allowing you to analyze sessions and heatmaps per variant.

How it works

Let’s say you are running an A/B test on any page of your site (homepage, product page, landing page, etc.).

Variant A could be tracked as:
/current-page/version-A
Variant B could be tracked as:
/current-page/version-B
Variant C (or any other value) would follow the same pattern.

This is done by setting window.mouseflowPath dynamically before Mouseflow loads, based on the variant assigned by your testing tool.

Important requirements

Your A/B testing tool must expose the assigned variant (for example: "A", "B", "control", "variant-1") to JavaScript.
In the example below, we assume the variant is available as window.pageVersion.
window.pageVersion is not created by Mouseflow. You must set it yourself in your testing tool.

Example: Manual A/B setup using the current page path

<script>
(function () {

  function load(variant) {
    // Use the current page path and append the variant
    var path = (location.pathname || "/").replace(/\/$/, "") || "/";
    var v = encodeURIComponent(String(variant).trim());
    window.mouseflowPath = path + "/version-" + v;

    // Load Mouseflow
    window._mfq = window._mfq || [];
    var s = document.createElement("script");
    s.defer = true;
    s.src = "https://cdn.mouseflow.com/projects/your-website-id.js"; //Replace with your website ID
    document.head.appendChild(s);
  }

  (function wait() {
    // Must be set by your A/B testing tool before Mouseflow loads
    var v = window.pageVersion;

    if (v != null && String(v).trim()) {
      return load(v);
    }

    // Wait until the variant is available
    setTimeout(wait, 100);
  })();

})();
</script>

What this script does:

Waits until your A/B testing tool assigns a variant.
Appends the variant to the current page path.
Loads Mouseflow only after the variant is known (to avoid mislabeling sessions).