Optimizely comes in two flavors - Optimizely Classic and the newer Optimizely X. This article describes how to set up the Mouseflow integration for Optimizely X - if you are using Optimizely Classic please see our article on integrating Mouseflow with Optimizely Classic

Use it to

Filter the recording list, heatmap list, funnels, and form analytics reports based on your experiments and variants. The integration sets a custom variable in Mouseflow so you can filter the list of recordings 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.

Note: To access the filter options in Mouseflow, click the 'Add Filter' button in the top-left hand side and then -> choose Variables -> select the appropriate experiment and value (either a variation name or * (for all variations to be combined)).

Setup

There are two ways to activate the integration:

(a) adding code within Optimizely X or

(b) adding code to your site.


Option A - Adding Code within Optimizely X

1. Contact your Optimizely X Account Manager and ask them to enable the Custom Analytics feature for your account.

2. Login to your Optimizely X 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.

{
"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}"
}
}

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.

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 X next to each session which takes part in the experiment and, using filters, you can search for specific attributes.

Option B - Adding Code to Your Site.

This solution will require you to manually add the code below to the pages you wish to integrate with.

1. First, you need to copy the code from the box below

<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>

2. Go to your website and add the code you copied in step 1 below the Mouseflow Tracking code on all the pages you wish the integration to run on

3. Once the code is installed on your site you'll begin seeing tags show up next to your recordings in the Mouseflow recording list.

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

Did this answer your question?