Rich-text Reply

Newbie question: How to render different markup and modules for experiment?

sgb 03-15-15

Newbie question: How to render different markup and modules for experiment?

Hi, we're new to Optimizely and our team are keen to integrate some A/B experiments to shape our product.

 

We currently have a reasonably standard production setup for our dynamic website. In the production environment (an express.js website), we have a set of modules that are minified into a master script (app.min.js). This script handles our dependencies and all the modules/bits/etc needed on the right pages.

 

I'm inexperienced with Optimizely and trying to understand how we could leverage the tools/APIs Optimizely offer to run an experiement that (a) Allows me to render a different template and (b) Load different modules when that experiment is running.

 

What really puzzles me is how I can change the modules - do I have to compile an app.min.js for each experiement?

 

Thanks! 

sgb
Level 1

Re: Newbie question: How to render different markup and modules for experiment?

[ Edited ]

Hi @sgb,

 

This is a great question and one we see coming from a growing number of customers using single-page applications (SPAs).  We find that the core issue at hand is that the URL of an SPA won't change even when content changes due to a user action.  Since the URL doesn't refresh, Optimizely doesn't reload and re-evaluate its conditions to determine which experiments to run.  You can read more about our approach here.

 

As referenced in the above article, this is solved by one of our two activation features: Manual or Conditional.  In either of these cases, you can specify when an Optimizely experiment should activate; the tradeoff comes in where you choose to write your code to make the check.  With Manual Activation, you deploy code to your site and make a simple API call to Optimizely; with Conditional Activation, much of the boilerplate polling, timing, and activation code is handled by Optimizely and you only need to provide the core JavaScript condition or callback function in your experiment settings.  You can see some sample code for different scenarios in our developer docs here.

 

One approach our customers take to render different templates is to tag each template due to be changed with a JS variable.  If that template is rendered (and hence the JS variable is present on the page), use Optimizely variation code to change that template.  Other customers bind listeners to events inside callback functions- once these events are fired, the callback conditionally activates the experiment.  You can also see other customer ideas here and here.

 

Hopefully this information gets you started.  Please let us know once you've given a Manual or Conditional Activation a try and if you need further assistance.  Thanks!

Harrison Krat
Solutions Architect | Optimizely, Inc.
harrison@optimizely.com
 
sgb 03-17-15
 

Re: Newbie question: How to render different markup and modules for experiment?

Thanks for the thorough reply, Harrison. It's worth mentioning that our app is not a single-page application — it's basically isomorphic. All parts render server side, but some parts can also use pushState over hard loads. Therefore, we need to select different templates to be rendered by the server *and* the client.

There's definitely enough here for me to research further, so thanks. I will return to this thread when I have done so.
sgb
Level 1