Optimizely Experiments

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.

Warning: 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
  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.

  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.

  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 Optimizely extension in Step 4.

  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: In this field, you need to enter the extension code. Download the source code for the extension from 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"
        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.

  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.

On This Page