Optimizely X and Usabilla

Note: This article only applies to Optimizely X. If you are using Optimizely Classic, just message us at support@usabilla.com.

If you use Optimizely to perform A/B tests on your website, user feedback can add valuable insights to these A/B tests.

By integrating Optimizely and Usabilla you will be able to segment and analyze Usabilla feedback items or campaign results according to your Optimizely experiments. You will also be able to compare feedback from different test variations within one experiment.

In this guide, we will walk you through the setup of sending the Optimizely information to Usabilla in the form of Custom Variables. This will result in the Optimizely data being available when reviewing feedback but also giving you the opportunity to target Campaigns on users in specific Variations.

The Setup

We will use the Optimizely X Javascript API to access the information on the running Optimizely experiments or personalisation campaigns and the corresponding variations and then send these to Usabilla through custom variables with the script below. This script needs to run after the regular Usabilla for Websites button script has been loaded.

usblCustomVars = {};

//Potentially define other custom variables here by adding them to the usblCustomVars object:
//usblCustomVars['Variable X'] = 'value A';
//usblCustomVars['Variable Y'] = 'value B';
//usblCustomVars['Variable Z'] = 'value C';

function updateUsblCustomVar() {
    window.usabilla_live('data', {
        'custom': usblCustomVars
    });
}

function checkOptimizely() {
    if (typeof optimizely !== 'undefined' && optimizely !== null) {
        var campaign_data;
        // Get Optimizely state
        var state = optimizely.get('state');
        // Return all active campaigns
        campaign_data = state.getCampaignStates({ "isActive": true });
        // Loop through Optimizely Campaigns
        for (var campaign_id in campaign_data) {
            if (campaign_data.hasOwnProperty(campaign_id)) {
                // Get all data
                var data = state.getDecisionObject({ "campaignId": campaign_id });
                // Get variation
                var variation = data.variation;
                // Get experiment
                var experiment = data.experiment;
                // Append experiment and variation to Usabilla custom object
                usblCustomVars['Optimizely_Experiment_Name: ' + experiment] = variation;
            }
        }
    }
    updateUsblCustomVar();
}

function onCampaignDecided(event) {
    checkOptimizely();
}

if (typeof optimizely !== 'undefined' && optimizely !== null) {
    window["optimizely"] = window["optimizely"] || [];
    window["optimizely"].push({
        type: "addListener",
        filter: {
            type: "lifecycle",
            name: "campaignDecided"
        },
        handler: onCampaignDecided
    });
}

checkOptimizely();

Optimizely data in your feedback

Once this has been implemented the Optimizely experiment name or ID and the corresponding variation name or ID will be added to each Usabilla feedback items and campaign result, deriving from a page on which Optimizely is running. The following data will be shown:

• Each active experiment that is running on the page a user gave feedback on.
  • The data will appear as follows: Optimizely_Experiment_Name: 'experiment'.
  • If the name for an experiment or variation is not specified within Optimizely, the ID will appear instead.

Through this added data, you will be able to filter and segment your feedback items or campaign results according to Optimizely experiments. The appropriate filter option to use is the Custom Variable filter:

Target Usabilla campaigns to a specific test variant

After pushing the Optimizely data to Usabilla you will be able to show a survey to visitors that are in a certain experiment or even see a specific variation. You can achieve this by activating the Custom javascript value trigger targeting option.

Any questions? Reach out to our friendly support team!