Optimizely Extension Setup Guide

The Optimizely extension lets you serve personalized content by allowing you to select the audience for each entry. This extension fetches and displays your Optimizely audiences into a field in your content type. Subsequently, while creating entries, content managers can select audience(s) for each entry. Based on the selection, the entry will be visible only to the targeted audience when published. 

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

  1. Retrieve your project ID
  2. Create an audience
  3. Generate access token
  4. Add ‘Optimizely’ extension to your stack
  5. Use the extension in Contentstack
  6. Use the extension on the presentation layer to serve personalized content

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 - Add audiences

If you haven’t added any audiences in your project, create some in your Optimizely account. Learn more about adding audiences.

The audiences you add to your project will be visible as possible values for your extension field in Contentstack.

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’ 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. Select Custom Field.
    Select Extension Type - Custom Field.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 Audience.
    • Field Data Type: Select the data type in which the input data of the field should be saved in Contentstack. Select JSON in this case.
    • Multiple: Select this checkbox if you want to enable multiple inputs for the field.
    • 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' 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: You can provide different configuration settings for specific instances of your Custom Field Extension when setting up your content type. The configuration that you provide for an instance will only be applicable for that instance and will not affect any other instances of the same custom field extension or any other fields within the same content type. Learn more.

  4. Click Save. This will create your custom field extension.

Now, let’s understand how you can start using your custom field extension in your content type.

Step 5 - Use your custom field extension in Contentstack

To use your custom field extension, you need to follow the steps given below:

  1. Create a content type by clicking on the + New Content Type. Enter the relevant details for the content type and click on Create and Add fields.
    Create Content Type.png
    This leads you to the Content Type Builder page where you can add the relevant fields.
  2. Add the Custom field in your content type. Click on Choose existing Extension to select the custom field you added in the previous step.
    Add 'Custom' Field.png
  3. Select Optimizely from the dropdown and set the other properties of your custom field.
    Optimizely from dropdown.png

    Note: You can provide specific instance-level configuration settings for your Custom Field extension. Learn more.

  4. After adding other relevant fields in your Content Type, click on Save and Close.

This will create your content type. Now, go to the content type and create a new entry. Enter the relevant details. In the Optimizely Audience field, select the audience while creating an entry for this content type as shown below:

Optimizely Final Demo.png

Step 6 - Use the extension on the presentation layer to serve personalized content

In order to display personalized content to your site visitors, you will need to query entries based on the audience type of your site visitor. You can use Contentstack queries as follows to fetch the content based on the audience ID provided:

  • SDK
    let Query = Stack.ContentType('content_type_uid').Query().where('audience_field_uid.id', '11718912337')
        
  • API
    https://cdn.contentstack.io/v3/content_types/product/entries?api_key=blt20962a819b57e233&access_token=blt01638c90cc28fb6f&environment=production&locale=en-us&query={ "audience_field_uid.id": { "$in": [ array_of_auidences ] } }
        
Was this article helpful?
top-arrow