Rich-text Reply

A/B Testing a Modal

jnarowski 01-23-15

A/B Testing a Modal

I want to A/B test the content within a twitter bootstrap modal and was wondering the best way to do this with optimizely?

Amanda 01-23-15

Re: A/B Testing a Modal

Great question. I assume the modal only appears on a click or after the page has loaded? If this is the case, then you will need to use manual activation or conditional activation. This allows you to activate the experiment right when the modal appears. 


We have a great support article on this. Check it out here:

Does this help clear things up for you? Let us know if you have additional questions! 

jnarowski 01-24-15

Re: A/B Testing a Modal

What if the content for the modal is already loaded into the page, will that eliminate the need to do any manual activation? I don't want to have to build in the logic to A/B test my stuff myself.
Amanda 01-25-15

Re: A/B Testing a Modal

The problem would actually more related to the results in your case (if the content is already loaded on the page). For example, someone may land on the page and get included in the experiment since your test is running on that page URL. However, they may never see the modal and the visitor count to the experiment would increase. 


Using a form of activation (manual or conditional) will ensure that your visitor count only actually increases when the modal is shown. 


The logic to manually activate should be pretty easy - you could even use a bootstrap experiment if you can't change your site's code. If you want to add the URL and instructions on how to get the modal to appear, then we can take a look at it for you!


Looking forward to hearing back. 

Juls 11-23-16

Re: A/B Testing a Modal

I also have a problem using bootstrap modal in a variation.. the modal works fine it show when i click the link but the problem is afterwards that i click that link then the modal shows up it gets hang the whole page and it turns to blank page how will i fix that issue?

Level 1
RyanC 11-23-16

Re: A/B Testing a Modal

In your case I would edit the variation with custom code, instead of the Optimizely user friendly interface. This way you will be able to cater directly to the change needed. I always try the custom code in the google Chrome console (F12) before trying it in optimizely, saves me a lot of debugging time.
The best solution is the simplest.
Experimentation Hero