Rich-text Reply

How do I A/B test an AJAX flow?

tsawrie 04-07-16
Accepted Solution

How do I A/B test an AJAX flow?

We use an ajax flow for customer signup, so it's all loaded on the same page. Since I can't go through flow in the Optimizely editor, how can I A/B test?

Level 2

DavidS 04-08-16
 

Re: How do I A/B test an AJAX flow?

Hi tsawrie,

 

Thanks for reaching out to Optimizely Support!

I understand that you are using an AJAX flow for customer signup and that therefore you can't go through the flow in the Optimizely editor. 

 

Because all content is loaded on the same page, running an A/B test will require a little bit of technical implementation. Because the page doesn't reload, we will have to check for every state change on the page. For example, if you are using AJAXComplete, here is a code sample that you will need to adapt to match your own website configuration: 

/*
 *  Usage
 *     Apply variation code when an AJAX request is completed. In this example, we also require the request URL contain the sub-string "/shopping-cart".
 *
 *  @param {Function} handler - A function to execute when the ajaxComplete event is triggered.
 *
 *  e.g. window.$(document).ajaxComplete(handler)
 */

 // Usage example
 window.$(document).ajaxComplete(function(event, xhr, settings) {
   if (settings.url.indexOf('/shopping-cart') > -1) {
     //apply variation code
   }
 });

You can find this code directly in our Developers Portal

For example, this code will check for a URL change to /shopping-cart and then load the variation code. 

In this code snippet, you will need to make sure the variation code is placed where the // apply variation code comment is present. 

 

As for finding out what variation code to put in, Optimizely uses jQuery to make changes to your page and therefore you will need a bit of knowledge of jQuery to find out what code to add in here. Would you be able to have your developer look into this?

I can provide guidelines if you respond with the website link and the changes you would like to make. 

 

 

I know this explanation is a bit technical. Please let me know if there is something you don't understand and I will explain in more details. 

 

I hope that is helpful. Feel more than free to reply back with any additional questions at all.

 

Best,
David

 

Optimizely