Rich-text Reply

Rotating image on home page

r10g 04-13-15

Rotating image on home page

[ Edited ]

Hi there,

 

I'm interested in creating an AB test for:

 

1. Control - static page. 

2. Carousel and rotating hero image with different call-to-action.

 

Could you please point me in the direction of doing so in Optimizely?

 

Thanks in advance!

 

Cheers,

Ringo

Level 1

Amanda 04-13-15
 

Re: Rotating image on home page

[ Edited ]

@r10g - which do you have on your homepage now? Does your slider exist currently or just a static image? The specific solution would be different for each, which is why I ask. 

 

Looking forward to hearing back from you. 

 

 

Optimizely
r10g 04-13-15
 

Re: Rotating image on home page

Hi Amanda,

Thanks for your response!

The homepage is currently here https://www.12wbt.com/

It's a static hero image, and a slider doesn't currently exist.

Any pointer or solutions would be awesome!

Cheers,
Ringo

Level 1
michaelwei 04-14-15
 

Re: Rotating image on home page

Hi r10g,

 

Adding a slider is definitely a good test! You can add most of the content using normal Javascript or jQuery, but you'll have to attach the script as a new DOM element so that it will execute, with something like this:

 

$(function(){
var fileRef = document.createElement('script');
fileRef.setAttribute("type","text/javascript");
fileRef.setAttribute("src", "http://www.example.com/test.js");
document.body.appendChild(fileRef);
});

So it boils down to three steps inside your variation code

 

1. Change your header to the the carousel HTML (something like the Bootstrap Carousel example). One way might be to select the hero section inside the visual editor, choose "Edit HTML..." and paste in the carousel example.

 

2. Attach the carousel CSS. In the Bootstrap carousel example, you'd add this line of code:

 

$('head').append('<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">');

3. Add the Javascript file via the method above:

 

$(function(){
var fileRef = document.createElement('script');
fileRef.setAttribute("type","text/javascript");
fileRef.setAttribute("src", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js");
document.body.appendChild(fileRef);
});

 And voila! You should have a working carousel test.

Optimizely

Re: Rotating image on home page

Hello there!

 

Can you help me with the same test, but starting form a page that already has rotating banners?

 

 AB test for:

 

 

1. Control - Carousel and rotating images (already exists)

1. Control - static page. 

 

 

Thanks