The Next Generation of Visual Website Optimizer is launching in April 2014 See What's Coming

Categories

Find Articles

How to create an advanced A/B or multivariate test?

Q. How to create an A/B or MVT test using Javascript/CSS and or jQuery?

Using Add JS/CSS option

1. You can use Add JS/CSS functionality inside the editor to create tests using Javascript, CSS and/or jQuery. The add JS/CSS function is available inside the editor as shown in the image below

You can click on the Add Javacsript/CSS option and that would open up a new popup, you can add the jQuery code inside the <script> tags and the CSS code inside <style> tags.

 

2. Using JS API option

 

Advanced mode also gives you an API using which you can dynamically modify your variation before it is displayed on the page. Do you see “Insert JS API” button in the screenshot above? Clicking on it inserts the following JavaScript function in your variation.

<script type='text/javascript'>
// The following API function is called just before a variation is inserted.
// The variation is passed to the function as a (wrapped up) DOM element.
// Control is a DOM element on the page which will be replaced by the variation.

_vwo_api_section_callback[VWO_SECTION_ID] = function(variation, control)
{
// jQuery is available as shorthand vwo_$. Example: vwo_$(variation).css('font-size', 'larger');

// INSERT YOUR CODE HERE

}
</script>

As it is obvious from the code above, _vwo_api_section_callback[VWO_SECTION_ID] is a function that is called and the variation and control are passed as DOM elements. This allows you to modify the variation dynamically using your own custom JavaScript code and existing website content (control) as shown below in the snippet.

Welcome to MySite, you searched for <span class="keywords">keywords</span> on <span class="search">search engine</span>
<script type="text/javascript">// <![CDATA[
_vwo_api_section_callback[VWO_SECTION_ID] = function(variation, control)
{
vwo_$(variation).find(".keywords").html(yourFunctionForKeywords());
vwo_$(variation).find(".search").html(yourFunctionForSearchEngine());
}
// ]]></script>


VN:F [1.9.22_1171]
Rating: 1.6/5 (37 votes cast)
How to create an advanced A/B or multivariate test? , 1.6 out of 5 based on 37 ratings
No Comments

No comments yet.

Leave a comment →


Raise Support Ticket

Top

Raise a Support Ticket!

Your Name

Your Email

Your Phone

Your Query

Or, contact us through email support@wingify.com

A B Testing Tool