Setting up Mouseflow

3

min

quiz

Mouseflow allows marketers to understand why their visitors behave the way they do and to see how visitors are really using their website by combining session replays, heatmaps, funnels analysis and user feedback (polls, surveys…) tools.

With our Mouseflow integration, Kameleoon will automatically flag all your heatmaps and session replays with additional tags to allow you to segment your analysis based on each experiment variation.

Key benefits

  • Understand why visitors leave your website with the help of engaging polls or surveys designed by Mouseflow.
  • Analyse how your visitors behave while they are exposed to an experiment by watching session recordings on Mouseflow based on a large number of filtering options.
  • Identify area of optimization thanks to Mouseflow heatmaps and prioritize your roadmap of experiments in Kameleoon.

 

Enable Mouseflow integration on Kameleoon

As a first step, you will need to have Mouseflow installed on your website.

Note: Please note that we do not recommend triggering the Mouseflow snippet from Kameleoon as each tool manages its own consent management policy.

On your Kameleoon account, click on “Settings” in the left menu, then on “My Websites”.

On the card of your website, click on “Edit”: you access the configuration of your website on Kameleoon.

In “Configuration”, unfold the “General” section.

The “Global custom script” insert will allow you to link Kameleoon to Mouseflow. Any JavaScript code you add in this insert will be executed each time the page is loaded. This feature is usually used to add complex tracking code or integration to other solutions.

To activate the bridge between Kameleoon and Mouseflow, please copy and paste the code below in the Global script section.

window.mouseflow_triggered_campaigns = window.mouseflow_triggered_campaigns || [];

var processCampaignForMouseflowPlatform = function(campaign)

{

        var campaignId = campaign.id;

        var associatedVariationId = campaign.associatedVariation.id;

        var campaignName = campaign.name;

        var associatedVariationName = campaign.associatedVariation.name;

        

        Kameleoon.API.Core.runWhenConditionTrue(function(){

                return typeof window._mfq != "undefined";

        }, function(){

                if(mouseflow_triggered_campaigns.indexOf(campaignId) == -1){

                        window._mfq.push(["setVariable", campaignId+"-"+campaignName, associatedVariationName]);                

                        mouseflow_triggered_campaigns.push(campaignId);

                        console.log("Mouseflow tracking sent for campaign: "+campaignId);

                }

        }, 500);

}

// We loop over the experiments

Kameleoon.API.Experiments.getActive().forEach(processCampaignForMouseflowPlatform);

window.addEventListener("Kameleoon::ExperimentActivated", function(event) {

        processCampaignForMouseflowPlatform(event.detail.experiment);

});

// We loop over the personalizations

Kameleoon.API.Personalizations.getActive().forEach(processCampaignForMouseflowPlatform);

window.addEventListener('Kameleoon::PersonalizationActivated', function (event) {

        processCampaignForMouseflowPlatform(event.detail.personalization);

});

This code will send data to Mouseflow whenever a visitor is being targeted by an experiment or a personalization. By default, we send the variable name, experiment ID, experiment name and associated variation name. You can adapt the code to your needs.

You can click on “Validate” to apply the changes to your configuration.

This custom bridge is based on Mouseflow JavaScript API. To know more, please refer to this documentation.