Optimizely® SDK Integration in Oslo

Overview

Prerequisites

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.

   • Download and install the latest release of wchtools that is available in Github or from IBM Watson Content Hub Tools API module.

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