Optimizely Experiments Extension Setup Guide

The Optimizely Experiments extension integrates your existing Optimizely Experiments with Contenstack’s UI and allows you to retrieve and display the Experiment details into your entry page. Additionally, this extension allows you to start and pause Optimizely experiments directly from the sidebar, and view their variations, their traffic distributions, and Audiences.

Note: The Optimizely Experiments custom widget will run only for the Optimizely X Web version.

This step-by-step guide explains how to create an Optimizely Experiments extension in Contentstack. The steps to be performed are as follows:

  1. Retrieve your project ID
  2. Create an Experiment in Optimizely
  3. Generate access token
  4. Add ‘Optimizely Experiments’ extension to your stack
  5. Use the extension

Step 1 - Retrieve your project ID

In order to use this extension, you will need the ID of your Optimizely project. If you haven’t created any projects, refer to this guide to create one.

On successful creation of your project, you will see your project ID in the URL. The project ID is the part after ‘projects/’ in the URL. For example, in “https://app.optimizely.com/v2/projects/11111111111”, the number '11111111111' is the project ID. Save this ID as you will need it in Step 4 when configuring your Optimizely extension.

Step 2 - Create an Experiment in Optimizely

Start by creating an Experiment in Optimizely. You can add variations, audiences, and other such parameters to your experiment. You can also choose or add Audiences in the experiment.

To create an Experiment in Optimizely, you can follow the steps given in this guide.

Step 3 - Generate access token

In order to use Optimizely resources within Contentstack, you will need to authenticate by providing your personal access token. You can create new tokens by following the steps given in this guide.

Note down this token, since you will need it while configuring the extension in Step 4.

Step 4 - Add ‘Optimizely Experiments’ extension to your stack

  1. Go to Settings > Extensions. Click on the + Add Extension button on the top-right corner and select Create new.
    Create New Extension.png
  2. In the Select Extension Type dialog box, select Custom Widget.
    Select Custom Widget.png
  3. You will be led to the Create New Extension details page where you need to enter details in the fields as given below:
    • Title: Provide a suitable title. For example, Optimizely Experiments.
    • Hosting method: Select Hosted on Contentstack. As soon as you do this, you will see the Extension Source Code field below.
    • Extension Source Code: Enter the source code for the extension. You can find the source code for the 'Optimizely Experiments' extension here.
    • Config Parameters: Enter the configuration details for the extension. Here, you need to mention the project ID that you created in Step 1 and the Optimizely API access token that you generated in Step 3.
      {
          "access_token": "1:pl1abaBAbabaBabAb_aBa1BaBAb11ab4AbA1AB_A1Bab-ABabaBA",
          "project_id": "11111111111"
      }

      Note: When adding instances of your custom extension field while structuring your content type, you can provide additional configuration settings under the Config Parameter field of your Custom field's properties. The configuration provided for a particular instance of the Custom field will neither override the default configuration settings nor affect any other instances of the Custom field. Learn more.

    • Scope - You can choose to incorporate this widget in either All Content Types or Specific Content Types. Selecting the latter option displays a list of content types from which you can select the required ones.
  4. Click Save. This will create your custom widget extension.

Now, let’s understand how you can start using your custom widget extension in your entries.

Step 5 - Use the extension

Once you have added this custom widget, you can use it in entries of selected content type(s). Let’s look at the steps involved in using this custom widget.

  1. Click on the content type for which you have enabled the custom widget.
  2. Click on an entry. You will see the Widgets dropdown at the top. Click on it and select Optimizely Experiments.
    Select Optimizely-Experiments from dropdown.png
  3. The selected widget expands on the sidebar displaying the list of experiments that you have already created.
  4. Click on the 'Run' or 'Pause' Action buttons to run or pause your experiments, respectively.
    Select Run or Pause.png
    Clicking on the 'Result' icon will lead you the Experiment Results page of Optimizely where you will see the detailed report of your experiment.
    Click on Result.png
    Finally, click on a particular experiment to view Experiment details such as Variations and their traffic distribution, and also view their assigned Experiment Audiences within the sidebar.
    View the details of the Experiment.png

Once done using the widget, click on the close (x) button.

Was this article helpful?
top-arrow