Rich-text Reply

Test two main (but different in design)bnavigation menus

Ascently 01-16-15

Test two main (but different in design)bnavigation menus

Hi!

 

We want to test two navigation menus accross an entire site. The idea is to show 1 menu (with dropdowns) to 50% of users and another completely different one to the rest of the users.

 

Due to server technicalities and problems with URLs, we can't just split the site in two at a server level and do this out of optimizely. 

 

We thought the best way would be to add the test menu in a hidden DIV or something similar and then use optimizely to hide the current version of the menu and reveal the hidden DIV to just 50% of the visitors.

 

Do you know how to actually tell optimisely to look for the hidden DIV and reveal it site wide as part of this test?

 

Thanks :-)

 

Joseph

Level 1

JDahlinANF 01-16-15
 

Re: Test two main (but different in design)bnavigation menus

Try like this in your "B_NewNav" variation.

First, check to make sure the new navigation is on the page, we don't want to accidentally remove all navigation, then hide the current and show the new.

 

if (window.$('#hidden_navigation').length > 0) {
    window.$('#hidden_navigation').hide();
    window.$('#original_navigation').show();
}

 

Brian_Abad 01-16-15
 

Re: Test two main (but different in design)bnavigation menus

Hey @Ascently ,

 

Just to piggy back off of what @nap0leon mentioned - what you can do is set up an experiment with Traffic Allocation set to 50% / 50%. Then, within your variation we can utilize similar code to that @nap0leon mentioned:

 

$('#main_nav').css({'display':'none'});
$('#hidden_nav').css({'display':'block'});

The if statement wouldn't need to be coded because Traffic Allocation will take care of that. So in this set-up, visitors in the Original will continue to see the main_nav and the hidden_nav will stay invisible. But users that are served the variation will see the hidden_nav and the main_nav will not be seen.

 

Let me know if this is unclear or if you have further questions!

---
Brian Abad
Manager, Technical Support
Customer Success
Optimizely
JDahlinANF 01-16-15
 

Re: Test two main (but different in design)bnavigation menus

@BrianAbad- the reason for the if statement is for instances where the user has a cached version of the page that does not have the new nav on it.  (We've run into that issue due to akamai caching.)