Knowledge base | mouseflow

Optimizely Integration

With Mouseflow, it's easy to integrate with Optimizely. This lets you filter the recording list, heatmap list, funnels, and form analytics reports based on your experiments and variants.

There are two ways to activate the integration: (a) adding code within Optimizely or (b) adding code to your site.

Option A - Adding Code within Optimizely

  1. Contact your Optimizely Account Manager and ask them to enable the Custom Analytics feature for your account.
  2. Login to your Optimizely account, select a project, and go to Settings > Integrations > Create Analytics Integration > Using JSON. Copy/paste the snippet below into the text box. Click Create Extension.
  3. Scroll down, find and click the row labelled "Mouseflow", and click to turn the integration "On" (using the toggle switch in the right-hand pane).
  4. Click Experiments, open an experiment, click Integrations, and then select/check the "Tracked" checkbox. Click Save.
  5. The integration should now be enabled and you should see the page paths in Mouseflow renamed to include the experiment and variation IDs. In addition, you should see custom variable data from Optimizely next to each session which takes part in the experiment and, using filters, you can search for specific attributes.

{
  "plugin_type": "analytics_integration",
  "name": "Mouseflow",
  "form_schema": [],
  "description": "Mouseflow Integration",
  "options": {
    "track_layer_decision": "var optimizelyState = optimizely.get('state');var optimizelyDecisionObject = optimizelyState.getDecisionObject({\"campaignId\":campaignId});if (typeof optimizelyDecisionObject != 'undefined') {window._mfq = window._mfq || [];_mfq.push([\"setVariable\", \"Optimizely_\" + optimizelyDecisionObject.experiment, optimizelyDecisionObject.variation]);window.mouseflowPath = window.location.pathname + \"/\" + optimizelyDecisionObject.experiment + \"/\" + optimizelyDecisionObject.variation}"
  }
}

Option B - Adding Code to Your Site

Optimizely comes in two flavors - Optimizely Classic and the newer Optimizely X.

Optimizely Classic

For Optimizely Classic, just add the relevant code to the pages you wish to integrate with:

<script type="text/javascript">
    if (window.optimizely && window.optimizely.data) {
        var activeExperiments = optimizely.data.state.activeExperiments;
        var experimentVariationNames = "";
        window._mfq = window._mfq || [];
        for (var i = 0; i < activeExperiments.length; i++) {
            var experimentId = activeExperiments[i];
            var variationName = optimizely.data.state.variationNamesMap[experimentId];
            var experimentName = optimizely.data.experiments[experimentId].name;

            experimentVariationNames += (experimentVariationNames != "" ? "/" : "") + experimentName + ":" + variationName;
            _mfq.push(["setVariable", "optimizely_" + experimentName, variationName]);
        }
        if (experimentVariationNames != "") {
            window.mouseflowPath = window.location.pathname + "/" + experimentVariationNames;
        }
    }
</script>

Optimizely X

For Optimizely X, just add the relevant code to the pages you wish to integrate with:

<script type="text/javascript">
    if (window.optimizely) {
        var optimizelyData = optimizely.get('data');
        var optimizelyState = optimizely.get('state');
        var activeExperiments = optimizelyState.getActiveExperimentIds();
        var variationMap = optimizelyState.getVariationMap();
        var variationNames = "";
        window._mfq = window._mfq || [];
        for (var i = 0; i < activeExperiments.length; i++) {
            var experimentId = activeExperiments[i];
            var variationName = variationMap[experimentId]['name'];
            var experimentName = optimizelyData.experiments[experimentId].name;
            variationNames += (variationNames != "" ? "/" : "") + experimentName + ":" + variationName;
            window._mfq.push(["setVariable", "optimizely_" + experimentName, variationName]);
        }
    }
</script>

This code sets a custom variable so you can filter the list of results by experiment name and variation name. This lets you filter for a page (with all variants combined into one), exclude all variants from a page (to view traffic not bucketed into tests), or view a specific variation for a page. To access the filter options, click the filter (funnel) icon in the top-right (blue bar) and then, under Variables, select the appropriate experiment and value (either a variation name, * (for all variations to be combined), or ^ (for all variations to be removed).

Please note: Optimizely's redirect experiments aren't supported in this integration.