Using Optimizely Full Stack in Episerver to experiment with a set of content changes in an Episerver Project
Oct 22, 2020
The previous post described Integrating Optimizely Full Stack with Episerver. This post extends on that post to show how it's possible to use Episerver Projects to define a set of changes for a site (for example a big homepage change) and experiment with that project to see how it affects a metric for example page views and/or orders.
This specific post covers:
- Code required to allow experiments to be run on Episerver Projects
- Configuring the Optimizely REST Api in Episerver admin mode
- Set up events in Optimizely Full Stack and tracking them in Episerver
- Setting up an experiment in Optimizely Full Stack
- Mapping the experiment to a set of project(s)
Code required to allow experiments to be run on Episerver Projects
There is some code required that allows Episerver to show different versions of a project to end users based on a variation id passed from the Optimizely Full Stack experimentation engine. This code can all be found in projects folder here https://github.com/episerver/foundation-experiments/tree/master/src/Foundation.Experiments/Projects. Either add the entire project or copy the code into your solution. Finally build the solution.
Configuring the Optimizely REST Api in Episerver admin mode
When setting up the experiment in Episerver then the Optimizey REST Api is required. Get the Optimizely REST authentication token using the Optimizely Full Stack UI get the REST authentication token as shown below:
Copy the authentication token value and in Admin mode > Tools > Config Manager select the "ExperimentationRestApiOptions" class and enter the project id and API token as shown below:
It should be noted the project id can be found in the URL as shown below:
Set up events in Optimizely Full Stack and tracking them in Episerver
In order to define a metric to measure success Optimizely Full Stack defines events which are used to define metrics. Metrics are measured in experiments to decide if the experiment is creating successful results or not. For the purpose of this post two example metrics are going to be used namely "epiPageView" and "order". Set these events up in the Optimizely Full Stack UI as follows:
See this link for more information about creating events in Optimizely: https://docs.developers.optimizely.com/full-stack/docs/create-events.
Now these events need to be tracked based on interactions in Episerver. The example code found here: DataTracker uses standard tracking events which are available when using Episerver Visitor Intelligence (formerly Episerver Insight) which can be used to record metrics on a running experiment.
If custom tracking is required as part of the implementation it's possible to record the events as described in the Optimizely Full Stack documentation here: https://docs.developers.optimizely.com/full-stack/docs/track-events.
Create an Episerver Project
Using the Episerver edit UI create one or more project(s) to experiment with. These will be used as challengers against the control version of the content where the control is the currently published content. More information about setting up and using Episerver Projects can be found in the web help here: https://webhelp.episerver.com/latest/en/cms-edit/projects.htm.
Setting up an experiment in Optimizely Full Stack
One of the capabilities of Optimizely Full Stack is the ability to run experiments. An experiment allows you to try different variations and see how it affects the metrics being measured. Set up the experiment as shown in the video below:
Mapping the experiment to a set of project(s)
Now there is an experiment running we need to tell Episerver to it to vary the experience end users get. To connect an Episerver to a running experiment there is a new block type called "Project Experiment Mapping". This block maps a running Optimizely Full Stack experiment to a set of project(s) in Episerver so users can be seen different version(s) of a project. Using the example experiment above set up the block as follows:
It should be noted that if the Episerver project name matches the description in the experiment then it will automatically map the experiment variation to the project, otherwise it will need to be manually created. The block also must exist below the “For This Site” or “For All Sites” folders. If multiple blocks exist then the first one will be used.
This post showed how to set up an experiment in Optimizely Full Stack, define events and metrics for the experiment and how to connect that the running experiment to Episerver to run the experiment.