cs-icon.svg

Optimizely App Installation Guide

Optimizely is an experimentation and optimization platform that enables businesses to conduct A/B tests and personalize digital experiences. It helps organizations analyze and improve website and app performance by testing different content variations and targeting specific audience segments, ultimately enhancing user engagement and conversion rates.

The Contentstack Marketplace lets you install the Optimizely app in your stack to fetch and display audiences and variations from the Optimizely account within your entries.

Prerequisites

Let's follow this step-by-step guide to install and configure Optimizely within your stack.

Steps for Execution

  1. Retrieve Credentials from Optimizely
  2. Install and Configure the Optimizely App in Contentstack Marketplace
  3. Use the Optimizely App within your Stack Entry
  1. Retrieve Credentials from Optimizely

    To get the credentials for Optimizely, follow the steps given below:

    1. Log in to the Optimizely account using your Optimizely account credentials.
    2. Go to your Optimizely project and click Settings from the left navigation panel. You will get the Project ID under the Snippet Details heading.Optimizely-Project-ID
    3. To get the Access Token, click Profile in the bottom-left navigation panel. Now go to the API Access tab, and click the Generate New Token button.Optimizely-Generate-Access-Token
    4. In the Generate New Token modal, enter the Token Name, select the User email ID, and then click the Create button.Optimizely-Generate-Access-Token-Modal
    5. A new token will be created. Copy and paste it to your clipboard as it will only be visible once.Optimizely-Auth-Token
    6. Save the Project ID and Access Token to use in Step 2.
  2. Install and Configure the Optimizely App in Contentstack Marketplace

    Follow the steps given below to install the Optimizely app in Contentstack.

    1. Log in to your Contentstack account.
    2. From the left-hand side primary navigation, click the Marketplace icon to go to the Marketplace.Marketplace-Icon
    3. Click Apps from the left panel.
    4. Within the Marketplace, you can see all the available apps. Hover over the Optimizely app and click Install.Optimizely-App
    5. In the pop-up window, select the stack where you want to install the Optimizely app, accept the terms of service, and click the Install button.Optimizely-App-Install
    6. On the Configuration screen, enter the following details:
      1. Optimizely Credentials: Enter the Project ID and Auth Token (Access Token) retrieved from your Optimizely account in Step 1.
      2. Choose the Optimizely Keys to Save in Entry: Choose how to save the data fetched from the Optimizely account in Contentstack entries.
        1. If you select the All Fields option, you can select only a limited number of products (variations) in the entry.
        2. For Custom Fields, you can search and add specific Optimizely Keys you want to save in entries. By default, name, id, variations, and type options are already selected inside the dropdown.
      Optimizely-Configuration

      Note: The Save In Entry configuration setting only applies to the variations field.

    7. Click the Save button.
    8. On the UI Locations tab, you can see the predefined app locations. You can use the toggle button corresponding to each UI location to enable or disable it based on your requirements.Optimizely-UI-Locations
    9. If the webhook is enabled for your app, you can view the webhook logs under the Webhook tab.

      Additional Resource: For more information on UI location and webhooks, please refer to the Installed Apps guide.

    10. Click Open Stack to start using the Optimizely app.
  3. Use the Optimizely App within your Stack Entry

    To use the Optimizely app within an entry of your stack, follow the steps given below:

    1. Go to your stack, click the Content Models icon in the left navigation panel, and click the + New Content Type button.
    2. If you want to create a new content type, select Create New. To use the prebuilt one, click Use Prebuilt.

      Additional Resource: For more information on prebuilt content models, please refer to the Import Prebuilt Content Models documentation.

    3. Create a content type by adding relevant details as displayed below:Optimizely-Content-Type
    4. In the Content Type Builder page, add a Custom field in your content type by clicking the Insert a field link represented by a + sign.
    5. Under Select Extension/App, select Optimizely Audience, and click the Proceed button.Optimizely-Audience-Add-In-Custom-Field


      Change the Display Name of the custom field to your choice, for example, Optimizely Audience Custom Field. Optionally, you can add Help Text and Instruction Value for your custom field. This adds the Optimizely Audience in the custom field.

      Optimizely-Audience-Added-In-Custom-Field
    6. Add another Custom field in your content type by clicking the Insert a field link represented by a + sign.
    7. Under Select Extension/App, select Optimizely Variations, and click the Proceed button.Optimizely-Variations-Add-In-Custom-Field

      This adds the Optimizely Variations in the custom field. You can change the display name of the custom field as required.

      Optimizely-Variations-Added-In-Custom-Field
    8. After adding the app in a custom field, click Save or Save and Close to save your changes.
    9. To use the Optimizely app, create an entry for this newly created content type. To do this, in the left navigation panel, navigate to the Entries page, click + New Entry to create a new entry for the above content type, and then click Proceed.
      You can see the Optimizely app’s custom field on your entry page as shown below:Optimizely-Sample-Entry
    10. In the Optimizely Audience custom field, click the + Add Audience(s) button.Optimizely-Audience-Add-Button
    11. Select the audiences and then click the + Add Audience(s) button to add the audiences in the entry.Optimizely-Audience-Modal

      The audience(s) you selected are referenced within your entry:

      Optimizely-Audience-View-In-Custom-Field
    12. In the Optimizely Variations custom field, click the + Add Variation(s) button.Optimizely-Variations-Add-Button
    13. In the Add Variations modal, select the Experiment Type from the dropdown. There are two experiment types: Experiment and Campaign.
      1. If you select Experiment as the Experiment Type, then select the experiment from the Experiment List drop-down.Optimizely-Variations-Modal-Type-Experiment
      2. If you select Campaign as the Experiment Type, then select the campaign from the Campaign List dropdown, and then choose the experiment from the Experiment List drop-down.Optimizely-Variations-Modal-Type-Campaign

        After selecting the experiment, select the variations you want to add, then click the + Add Variation(s) button to add them in the entry.

        Optimizely-Variations-Modal

        The variations(s) you selected are referenced within your entry:

        Optimizely-Variations-View-In-Custom-Field
    14. Click Save to save the entry.
    15. Once you publish the entry, you can see the audiences and variations on your website.
Was this article helpful?
^