Overview

Skill Level: Intermediate

Skill Level Note

Prerequisites

To get started, you need:

Optimizely¬ģ is a Digital Experience Optimization Platform that helps you customize user experience and perform feature and A/B testing on your website among other things. For more information on Optimizely¬ģ check out: https://www.optimizely.com

Step-by-step

  1. Download the latest Oslo sample version

    If you don’t already have working version of Oslo you can download the latest¬†Oslo site content from the Update the sample site widget on the Watson Content Hub About page UI or get the latest from¬†here.

  2. Setting up the development Environment

    To install the downloaded Oslo site content to your tenant, you must have at least version 2 of wchtools installed, newer the better.

  3. Installing the Optimizely¬ģ SDK

    Once we are all caught up with¬†getting the latest Oslo code and wchtools to install the SPA to our tenant, we can start editing it to include the Optimizely¬ģ SDK.

    The documentation for setting up the¬†Optimizely¬ģ Full Stack SDK can be found¬†here.

    Go to root folder of the Oslo SPA and run this command to install Optimizely Javascript SDK. 

    npm install –save @optimizely/optimizely-sdk

    You can customize how Optimizely¬ģ handles and logs events which is out of the scope of this tutorial and more information can be found¬†here.

  4. Creating an Optimizely¬ģ Full stack project

    Login to your Optimizely¬ģ account and from left navigation panel click on “Projects” and create a new Project then select a Full stack project. Give this project a name that you desire and once the project is created successfully it should show up in left navigation “Projects” tab.

    Now that we have created a New Full Stack project we can start creating new Experiments in it. Go to the ‘Experiments’ tab and create a new A/B Test.

    Give your experiment a unique name and fill out the Traffic allocation and variations field as shown below.

     

  5. Get the project datafile and Instantiate an Optimizely¬ģ client

    Once you have successfully created a project we need to Instantiate a local Optimizely¬ģ client to¬†use Optimizely¬ģ in our application. We need to configure our client¬†using Project’s datafile which is a metadata file of your project and configures our application to sync with the server.

    To get the¬†Datafile URL¬†of the project go to ‘Settings’ in left navigation panel and select Datafile tab.

    Go to your Oslo directory and create an “optimizely.service.ts” file as shown above. And don’t forget to import and include this new service in ‘providers’ array of ‘app.module.ts’.

     

    import { Injectable } from '@angular/core';
    import { Observable } from 'rxjs/Rx';
    import * as optimizely from '@optimizely/optimizely-sdk';

    @Injectable({
    providedIn: 'root'
    })
    export class OptimizelyService {
    DATAFILE_URL = '<Datafile URL>';
    optimizelyInstance: Observable<any>;

    constructor () { }

    // This method Fetches the Optimzely datafile from server and Instantiates an Optimizely client
    activateOptimizely (refresh?: boolean): Observable<any> {
    if (this.optimizelyInstance && !refresh) {
    return this.optimizelyInstance;
    }

    return Observable.fromPromise(fetch(this.DATAFILE_URL)
    .then(res => res.json())
    .then(datafile => this.optimizelyInstance = optimizely.createInstance({ datafile }))
    );
    }

    // This returns an Observable of the value of the Experiment that we activate
    getExperiment (): Observable<string> {
    return this.activateOptimizely()
    .map(oi => oi.activate('<Your Experiment Name>', '<Your User ID for which you want to run the experiment>'))
    .first();
    }
    }

     

    The ‘activateOptimizely’ method will return an Observable of Optimizely¬ģ client instance.

    And the ‘getExperiment’ method will return an Observable¬†of value of the Experiment that you¬†want to test.¬†

  6. Creating and deploying new features or A/B testing

    Now that we have instantiated Optimizely¬ģ Client and have a service up and running which is available application wide and can be injected to any of our app component.

    For the pupose of this tutorial, we are using Hero Image Layout from our Oslo SPA.

    Import the Optimizely Service like this to any of out app components using the relative path.

    import { OptimizelyService} from './../../common/optimizely.service';

     

    Figure out the element¬†we want to make changes and add an ID to it so that this element can be referenced by Renderer in our Angular Component, like we added ‘#readmore’ in this example in ‘heroImageLayout.html’

    <a #readmore wchEditable="link" *ngIf="link.linkURL && userouterLink" [routerLink]="(onLink | async).linkURL" class="button hero-button">{{(onLink
    | async).linkText}}</a>

     

    Now that we have our service injected in our client we need to get a local instance of the service like this.

    @ViewChild('readmore') rm;

    constructor (public utilService: UtilsService, public optimizelyService: OptimizelyService, public renderer: Renderer2, private el: ElementRef) {
    super();
    }

    We need to make sure that html of our component has rendered before we can start making changes to it, so we will make all the alterations in ‘ngAfterViewInit’ hook.

    	ngAfterViewInit () {
    // subscribe to experiment and add create variations
    this.optimizelyService.getExperiment().subscribe(variation => {
    if (variation === 'first') {
    this.renderer.setStyle(this.rm.nativeElement, 'background-color', 'red');
    } else if (variation === 'second') {
    this.renderer.setStyle(this.rm.nativeElement, 'background-color', 'green');
    }
    });
    }
  7. Building and deploying your updated application to your tenant

    Now that we have succesfully edited our application we need to deploy it to our tenant to see it in action.

    Customize wchtools to point it to your tenant.

    And then run ‘npm run build-deploy-code’ to update your application¬†in your tenant.

  8. Testing out the results

    You will be seeing different variations of ‘READ MORE’ button on your application.

    With ideally each version being shown up 50% of the total hits on an average, which can be changed in traffic distribution of each variation key.

     

     

Expected outcome

We have integrated A/B testing with Optimizely¬ģ into the Oslo sample application of Watson Content Hub.

Join The Discussion

Your email address will not be published. Required fields are marked *