Talk to a sales representative

+1 844-822-8378

Write to us

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

Posted in A/B Testing, Multivariate Testing on

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');



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)
// ]]></script>