What is Optimizely X Web?

Optimizely is one of the world’s biggest and most powerful A/B and multipage experimentation platforms. Infinity’s integration with Optimizely’s X Web product lets you conduct experiments and see the impact on phone calls, giving a more complete view of the impact site changes have on phone traffic.

How does the Optimizely X Web integration work?

When an end user is shown a page as part of an Optimizely X Web experiment, Infinity capture details of which variant they were shown, and the experiment and campaign it belongs to.

When that end user subsequently makes a phone call, you can record that call as an offline conversion and pass that into Optimizely, so you can understand the impact of your experiments on phone traffic.

Creating an Optimizely X Web integration

Setting up your Optimizely X Web integration is a simple process with three steps:

1. Adding the JavaScript
2. Creating the Conversion Event in Optimizely
3. Configuring the Integration in Infinity

The first step is to update the Infinity JavaScript snippet on your web pages to include the Optimizely X Web code. Then you can configure the integration and determine what data you’d like to send into Optimizely.

Step 1 - Adding the JavaScript

• In order for us to obtain the campaign, experiment and variation ids, we need to add some Optimizely-specific code to the Infinity JavaScript on your website, to capture the cookies.
• The code will capture the Optimizely campaign ID, experiment ID and variation ID as a custom variable, and the Optimizely visitor ID as a second custom variable.
• To update the JavaScript snippet, Log in to the Infinity Portal, navigate to the Admin section, select Tracking Settings and JavaScript.
• Select the Optimizely X Web integration using the checkbox in Step 1 of the JavaScript generator. This will add the Optimizely script to the Infinity code, an example is shown below

This will add the code needed for the Optimizely integration into the code generator box. Then simply copy and paste the updated code onto your website pages, you can click copy to clipboard in the top right corner of the code generator to help you.

<!-- Optimizely X Web Integration Method -->
<script type="text/javascript">
function setOptimizelyXCustomVars(key) {
    var has = function(object, property) {
        return typeof object === 'object' && object.hasOwnProperty(property);
    };

    if (has(window, optXKey) && has(window[optXKey], 'get') && typeof window[optXKey].get === 'function') {
        var visitorId = window[optXKey].get('visitor_id');
        var state = window[optXKey].get('state');
        var decisions = [];

        if (typeof state === 'object' && typeof state.getCampaignStates === 'function') {
            var campaignStates = state.getCampaignStates({ isActive: true });

            for (var key in campaignStates) {
                if (campaignStates.hasOwnProperty(key)) {
                    var campaignState = campaignStates[key];
                    if (has(campaignState, 'id') && has(campaignState, 'experiment') && has(campaignState.experiment, 'id') && has(campaignState, 'variation') && has(campaignState.variation, 'id')) {
                        decisions.push([campaignState.id, campaignState.experiment.id, campaignState.variation.id].join(','));
                    }
                }
            }
        }

        if (has(visitorId, 'randomId') && decisions.length > 0) {
            _ictt.push(['_setCustomVar', ['optx_vid', visitorId.randomId]]);
            _ictt.push(['_setCustomVar', ['optx_decisions', decisions.join('|')]]);
        }
    }
}
</script>
<!-- End Optimizely X Integration Method -->
<!-- Infinity Tracking Code v2.0
 Copyright Infinity 2018
 www.infinitycloud.com -->
<script type="text/javascript">
    var _ictt = _ictt || [];
    _ictt.push(['_setIgrp','XXXX']); // Installation ID
    _ictt.push(['_enableGAIntegration',{'gua':true,'ga':false}]);
    _ictt.push(['_includeExternal',[{'from':'optimizely','to':'setOptimizelyXCustomVars'}]]);
    _ictt.push(['_enableAutoDiscovery']);
    _ictt.push(['_track']);
(function() {
    var ict = document.createElement('script'); ict.type = 'text/javascript'; ict.async = true;
    ict.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'ict.infinity-tracking.net/js/nas.v1.min.js';
    var scr = document.getElementsByTagName('script')[0]; scr.parentNode.insertBefore(ict, scr);
})();
</script>
<!-- Infinity Tracking Code End -->

The revised code should be placed just before the closing </head> tag element within each page of the website as this will allow for the fastest execution.

Configuring your Optimizely X Web integration

Step 2 - Creating the Conversion Event in Optimizely

Within Optimizely X Web, you will need to create an offline Conversion event for calls.

• Login to Optimizely X Web and select Implementation from the left hand navigation. Then select the Events tab from the main window. Click the blue Create New Event button on the right as shown below.

• You then need to choose your event type. Since the event will be a phone call, choose Custom, and give it an appropriate name such as Infinity Phone Call.
• You can then create the API name (derived from the name you just created) and you can ignore the code snippet at the bottom. Click Save Event to continue.

Further details on creating offline conversion events within Optimizely can be found here

You can then configure which events will be pushed into your Optimizely account from the Infinity Portal.

Step 3 - Configuring the Integration in Infinity

• Log in to the Infinity Portal, navigate to the Admin section, and select Integrations.
• At the top of the list of your integrations, select Add Integration, and choose Optimizely X Web from the drop down. Please note that this is a chargeable integration, additional charges will apply.
• First you need to give your integration a name. It is called Optimizely X Web by default but you can edit it. Choose something that you'll easily be able to identify later.
• Click the Authorise Infinity button and log into your account. This will grant access to Infinity to upload call events to your Optimizely account.

• Using the dropdowns, select your chosen Project ID and conversion event name (labelled Optimizely X Event in the dropdown). You should choose the one you created in Optimizely in step 1.
• As an optional step, select an option from the Value Field to pass a value into Optimizely. This can be a transaction value, goal value or no value, which is labelled as Not Sent in the dropdown. These transaction and goal values need to be captured in your Infinity installation using Call Ratings or CRM events.
• We will pass all calls into Optimizely by default, but this can be changed as required using the options in What do you want to send. You may choose to only send calls that meet a goal, for example. Conversion events should be visible within Optimizely shortly afterwards, but this could take a few hours.