David A McClain uhhuhyeah

Optimizely's script is included in the document's head so they're able to make DOM/Styling changes before the browser has really had the time to render anything. The point of this is to prevent the "flash" of changing the content in front of the user.

This paradigm breaks down with "single page apps". The paradigm that "single page apps" use is one where the initial page load contains just enough HTML and JavaScript to bootstrap the app. The app then downloads/renders the remaining HTML. The problem is that all this happens after Optimizely has tired to make changes and because these elements Optimizely is trying to change are not present on the page yet, it cannot successfully run the code to make the variation.

Here's the workaround we've been using. Create your variation as per norm with the WYSIWYG editor Optimizely provides. Click on 'Edit Code' in the bottom right to reveal the JavaScript Optimizely will run on the page. This is usually jQuery-esque show/hide/replace etc. Write a function that che

	@media all {
	.page-break {
	display: none;
	}
	}

	@media print {
	.page-break {
	display: block;
	page-break-before: always;

	window.utils = window.utils \|\| {};

	utils.Grid = function() {
	// Defaults
	var that = this;
	this.idealColumnWidth = 320;
	this.marginHoriz = 15;

	// Public Interface
	this.setupGrid = function(opts) {

	for (var i=0; i < window.optimizely.data.state.activeExperiments.length; i++) {
	var experimentID = window.optimizely.data.state.activeExperiments[i];
	var experimentName = window.optimizely.data.experiments[experimentID].name;
	var variationName = window.optimizely.data.state.variationNamesMap[experimentID];

	console.log(experimentName + " - " + variationName);
	}