Optimizely

Optimizely is the world’s leading experimentation platform, empowering marketing and product teams to test, learn and deploy winning digital experiences.

Once integrated, FullStory can give you powerful insights into how users interact with your Optimizely tests as well as provide ideas on what new tests to run in Optimizely.

Follow the instructions below or see Getting Started with FullStory for more details on getting FullStory up and running. Once you’ve added the FullStory snippet to your site, follow the instructions in Step 2 to pass in experiment, campaign, and variations names and IDs. Be sure the FullStory snippet is placed above your Optimizely snippet.

Step 1: Add FullStory snippet directly to your website

  1. Create a FullStory account at www.fullstory.com (note: be sure to click the link in the confirmation email you received after submitting your email).
  2. Once you’ve confirmed your email, login to your FullStory account, go to Settings > FullStory Setup, and copy your recording snippet.

    direct_1522870414362-1522696026899-Screen_Shot_2018-04-02_at_3.06.25_PM.png
  3. Paste your snippet into the <HEAD> element either via your Content Management System (CMS) or directly into your application’s code.

FullStory will now start recording sessions for your site visitors. Though we highly recommended adding FullStory directly to your website, it’s also possible to add the FullStory snippet via Optimizely. If you prefer to add the FullStory snippet via Optimizely, follow these steps:

  1. Create a FullStory account at www.fullstory.com/signup (note: be sure to click the link in the confirmation email you received after submitting your email).
  2. Once you’ve confirmed your email, login to your FullStory account, go to Settings, and copy your recording snippet.
  3. In your Optimizely dashboard, go to Settings > Javascript.

    direct_1558464778744-Screen_Shot_2019-05-21_at_2.52.22_PM.png
  4. Paste in the FullStory snippet that you copied previously. NOTE: you do not need to copy the <script> tags at the beginning and end of the snippet.

    direct_1560453849130-1560453849130.png


Step 2: Passing in Experiment & Variation Name/ID  

When A/B or multivariate testing, Optimizely users often want to compare how people interact with the different variations of their pages. By passing custom events from Optimizely to FullStory, it’s possible to see and compare user sessions by things like experiment name and variant name. Use OmniSearch to find sessions that ran with Optimizely Experiments:

direct_1563990602401-Experiment_Search.png

If you’ve added FullStory to your site, you can pass in Experiment Name/ID and Variation Name/ID by following the simple steps below:

  1. In your Optimizely X account, go to Settings and uncheck “Mask descriptive names in project code and third-party integrations” (found under Privacy Settings).
    Screen_Shot_2019-10-31_at_11.53.02_AM.png
  2. In Settings, select Integrations, and click on the Create Analytics Integration button.
    direct_1558464977542-Screen_Shot_2019-05-21_at_2.56.01_PM.png
  3. Select Using Visual Editor in the drop-down menu.
    direct_1558465057500-Screen_Shot_2019-05-21_at_2.57.22_PM.png
  4. Name the integration (e.g. “FullStory IDs”), select Create Custom Analytics Integration, and paste and save the code below (thanks, David!):

    (function () {
      function _fs() { return window[window['_fs_namespace']]; }
      utils = window.optimizely.get('utils');
      utils.waitUntil(function () {
        return typeof _fs() === 'function';
      }).then(function () {
        var campaignStates = window.optimizely.get('state').getCampaignStates({ isActive: true });
        for (var campaignId in campaignStates) {
          var c = campaignStates[campaignId];
          if (c.isInCampaignHoldback !== true) {
            var payload = {};
            payload.campaign = {};
            payload.campaign.id_str = campaignId;
            payload.campaign.name_str = c.campaignName;
            if (c.experiment) {
              payload.experiment = {};
              payload.experiment.id_str = c.experiment.id;
              payload.experiment.name_str = c.experiment.name;
            }
            if (c.variation) {
              payload.variation = {};
              payload.variation.id_str = c.variation.id;
              payload.variation.name_str = c.variation.name;
            }
            _fs().event('Experiment', payload, 'Optimizely');
          }
        }
      });
    })();
  5. Go to Experiments, click the name of your experiment, select Integrations in the left sidebar, and check the “tracked” checkbox for the FullStory integration that you just created. Repeat this step in each experiment where you want the integration to run.

    direct_1558465314618-Screen_Shot_2019-05-21_at_3.01.45_PM.png

You will now be able to search by experiment and variation name and IDs in FullStory—just search for “experiment”, “campaign”, or “variation” and the values for those fields in FullStory. 

direct_1563990914699-1563990914699.jpeg

You can find experiment and variations IDs in Optimizely by navigating to Experiment > API Names.

Passing in Additional User Data (Optional)

If you’re interested in passing in additional profile data you can do so easily with FullStory’s setUserVars API; if you’d like to pass in usernames or emails for users that you’ve already identified, you can use FullStory’s identify API. Once complete, simply add the script you’ve created to your pages by following the instructions you used to add the FullStory snippet (Step 1).

Switching from custom variables to custom events

Earlier iterations of this integration used FullStory’s custom variables API. We have since released our custom events API. If you are integrating with Optimizely and FullStory for the first time, then you don’t need to worry about old experiments. 

If you have been using custom variables for experiments, we recommend updating your integration to use custom events. If you have experiments that are currently in flight, continue using the old integration without making changes to the inflight experiment. Create a new integration using custom events (following the instructions in this guide) and use it for all new experiments going forward.

Why use custom events?

Over time, you may run many experiments on your site. Custom events provide an easier and more elegant search experience when you’ve run multiple experiments or have multiple users who have engaged in many experiments. Any older experiments that you’ve run with custom variables will still be available to you once you’ve switched to custom events.

 

Need to get in touch with us?

The FullStory Team awaits your every question.

Contact us