A/B Testing With Optimizely

In web analytics (and marketing), A/B testing is an experiment with a couple of variants—A and B—to determine which variation users prefer. It’s a systematic approach to understand what works and what doesn’t.  

While most business owners use a CMS to manage the content of their digital property, A/B testing should either be a part of the CMS’ offerings or can be easily integrated into a CMS.

Since Contentstack is a headless CMS, it’s easy to integrate any external service application with it. In this tutorial, we will learn how to integrate an A/B testing tool (Optimizely) with Contentstack.

Incorporating A/B testing in Contentstack

Now let’s see what steps need to performed in order to integrate Optimizely with Contentstack.

Step 1 - Creating Content Type

Start by creating a content type in your stack. The content type should  be of the Content Block type and marked as ‘Single’. Let’s name it ‘ABTesting’ (for ease of use) with uid as ‘abtesting’. 

On the ‘Content Type Builder’ page, add a single-line textbox field and name it ‘Path’ with uid ‘path’. Save and close the content type.

Step 2 - Setting up Optimizely

Log in to your Optimizely account (you can use Optimizely X as well), and create a project. Provide a suitable name for this project.

Once you’re in your project, navigate to the ‘Setting’ section. You will see a JavaScript URL. Copy this URL and note it down.

Now, in Contentstack, create a new entry for the ‘ABTesting’ content type. In the ‘Path’ field, paste the Optimizely JavaScript URL. 

Step 3 - Setting up your web page

In this section, we will see how you can integrate the process of A/B Testing with your app. We will cover the steps that will help you to integrate the A/B Testing process with apps that are both contentstack-express-based as well as non-contentstack-express-based.

contentstack-express app

If you are using contentstack-express-based app, you need to incorporate your code in partials. Partials are static code snippets that remain constant across all web pages. Partials include your content for header and footer. Since these content remain constant across all your web pages, you can include our code in the partials, so that the A/B testing code is automatically available in all web pages.

To do this, go to the partials section of your code and create an HTML file with a name that is same as your content type UID (in our case, it is ‘abtesting.html’). Add the following code into the ‘abtesting.html’ file:

{% set abtesting = get("abtesting") %}
{{abtesting.path}}

When a page is rendered, it is the layout file that gets executed. So, we will include our HTML file into our layout file of our partial. Enter this code into the head section of the code as per the requirement.

In this case, we include this file into the body section of the layout as follows:

{% include "partials/abtesting.html" %}

So, every time your web page is rendered, the layout page will load which will run your abtesting.html file.

In case of websites that are not created using the content-express web framework (i.e., created using SDKs),  you can refer the following section.

Non contentstack-express app

For non-contentstack-express apps, you can use the relevant SDKs and use queries to retrieve data from your created content type (‘ABTesting’, in our case) or you can use API calls to retrieve entries from your content type (‘ABTesting’, in our case).

Now, in order to initiate A/B Testing after retrieving the desired data (the ‘path’ attribute), you need to put the retrieved code into the ‘body’ section of all of the web pages. Or, if you are have a standard layout set up for your pages then add the code snippet into the body section of your layout page’ code.

Step 4 - Adding experiments into your project

Finally, you can start by setting up goals for our project. After setting up the appropriate goals, set up the audience. Next step would be to create variations. Finally, run your experiment.

Let the experiment run for a couple of weeks until you reach statistical significance. The longer you run your test, the more reliable will be the results. Apply the learnings from the experiment and continue to reiterate the experiment to improve your results.

For more information, you can refer the official documentation of Optimizely’s A/B Testing.

Was this article helpful?
top-arrow