Optimizely

Optimizely is a comprehensive digital experience platform that combines content management, A/B testing, and AI-powered personalization in one solution. It enables teams to create, test, and optimize digital experiences across all channels, helping businesses deliver personalized content and make data-driven decisions that drive engagement and conversion.

Before you begin

This integration enables you to segment and compare users based on Optimizely AB tests and variant groups to which they were exposed.

Finally, you can target surveys based on Optimizely experiments.

We collect the following data:

Implementation

Optimizely Feature Experimentation (server side)

You need to use the React SDK in order to make use of the Notification Listeners which have the onDecision callback function.

In the React SDK code, add the parts of the code below which is shown inside the Integration comments. You will need to add the code that is outside of the onDecision and also the code inside the onDecision function:

import { enums } from "@optimizely/react-sdk";
// import your third-party analytics integration here

///////////////////////////////////////////
// SET UP DECISION NOTIFICATION LISTENER //
///////////////////////////////////////////

/*
 *Name: Optimizely Feature Experimentation Server Side Tests CS Integration Start
 *Version: 1.0.0
 */

function csCallback() {
    if (!disableCallback) {
        disableCallback = true;
        if (window.CS_CONF) {
            CS_CONF.integrations = CS_CONF.integrations || [];
            CS_CONF.integrations.push("Optimizely Feature Experimentation - v1.0.0");
        }
    }
}

let disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", csCallback]);

function onDecision({ type, userId, attributes, decisionObject }) {
    if (type === "flag") {
        const csPrefix = "AB_OP_SS_";
        const csKey = csPrefix + decisionObject.decisionInfo["flagKey"];
        const csValue = decisionObject.decisionInfo["variationKey"];

        window._uxa = window._uxa || [];
        window._uxa.push(["trackDynamicVariable", { key: csKey, value: csValue }]);
    }
}
//Optimizely Feature Experimentation Server Side Tests CS Integration End

const notificationId = optimizelyClient.notificationCenter.addNotificationListener(enums.NOTIFICATION_TYPES.DECISION, onDecision);

On every experiment activation, Optimizely's Notification Listener will execute, grabbing the experiment data from Optimizely and forwarding it to Contentsquare.

For Optimizely Web (client side)

Implementation Steps

Please go to the section How to request an integration to see the instructions to enable this integration. You can then return here once completed.

Optimizely Full Stack (server side) - Deprecated

You will need to be using the Full Stack Notification Listeners in Optimizely for this to work. (We are aware this feature is being sunset by Optimizely, and we will be providing support for their new Feature Experimentation feature.)

These listeners will retrieve the Optimizely experiment and variation data and send them to Contentsquare. It will make use of Optimizely's full-stack client-side SDKs (JavaScript, React, React Native). Server-side Optimizely Full Stack SDKs are not supported by this integration.

Just after calling Optimizely's createInstance() method, run this code:

/*
 *Name: Optimizely Full Stack Server Side Tests CS Integration Start
 *Version: 1.0.0
 */
var optimizelyEnums = require("@optimizely/optimizely-sdk").enums;

function onDecision(decisionObject) {
    function callback(context) {
        if (!disableCallback) {
            disableCallback = true;
            if (window.CS_CONF) {
                CS_CONF.integrations = CS_CONF.integrations || [];
                CS_CONF.integrations.push("Optimizely Full Stack - v1.0.0");
            }
        }
    }

    var disableCallback = false;
    _uxa.push(["afterPageView", callback]);

    var csPrefix = "AB_OP_SS_",
        csKey,
        csValue;
    csKey = csPrefix + decisionObject.experiment.key;
    csValue = decisionObject.variation.key;

    window._uxa = window._uxa || [];
    window._uxa.push(["trackDynamicVariable", { key: csKey, value: csValue }]);
}

// Replace OptimizelyClient with the name of your Optimizely SDK Instance (where createInstance is used)
optimizelyClient.notificationCenter.addNotificationListener(optimizelyEnums.NOTIFICATION_TYPES.ACTIVATE, onDecision);
//Optimizely Full Stack Server Side Tests CS Integration End

On every experiment activation (method activate() or isFeatureEnabled is invoked), Optimizely's Notification Listener will execute, grabbing the experiment data from Optimizely and forwarding it to Contentsquare.

Verifying it works

You can use the Chrome extension to check that the results are sent to Contentsquare.

In Optimizely Web, if you’re masking the real names, then you can work out from the Optimizely UI what the numbers mean. If you select a variant inside of Optimizely, you will see both the test ID and the variant’s ID:

You can show the real names by clicking on Settings inside of Optimizely and looking at the checkbox for Mask descriptive names in project code and third-party integrations:

It will then look like this:

In Contentsquare, you can find these variables by searching like this: