Visual Website Optimizer module for Drupal
The Visual Website Optimizer module automatically includes the VWO javascript in your site pages. Visual Website Optimizer is an easy to use A/B split, and multivariate testing tool. VWO uses small snippets of javascript inserted into the head of each page to perform its tests; the Visual Website Optimizer module for Drupal automates the configuration and inclusion of those snippets.
The Visual Website Optimizer module requires an active VWO account. After installing the module, you need to configure it for use with your VWO account by entering your Account ID via settings page. Once configured, Visual Website Optimizer tests will be automatically included in every page, until you deactivate or disable the module.
Installation
-
Extract the module to your site specific, or all sites modules directory. eg
- sites//modules, or
- sites/default/modules, or
- sites/all/modules
-
Enable the module in the admin/modules menu
-
Sign up for Visual Website Optimizer account and obtain Account ID from provided javascript listing. Look for the numeric value after "var _vis_opt_account_id = " (synch) or "var account_id=" (async) at the top of the code, or copy and paste all of the code into the Account ID Extractor: /admin/config/system/visual_website_optimizer/vwoid
-
Enter your Account ID and enable the module on the settings page at /admin/config/system/visual_website_optimizer
-
Head to the VWO website and configure your tests.
-
..
-
Profit!
Asynchronous vs Synchronous javascript
VWO now highly recommend using the Asynchronous loading of the javascript. The module now defaults to this mode for all new installs, but existing users will remain on their current settings.
The setting to change between Synchronous and Asynchronous remains.
Please see the VWO blog posting on the subject: https://vwo.com/blog/asynchronous-code/
Credits
This module is based on the work of Will Ronco of Awesome Software (http://awesome-software.net/), submitted as a module to node #759278. Updated by Ted Cooper to use most recent javascript from VWO, prepare for inclusion on Drupal.org, and include a few additional features. The D8 version was finally instigated after prompting from IT-Cru with a partial patch. See Git or CHANGELOG.txt for full list of changes.
Synchronous SmartCode
<!-- Start VWO Smartcode -->
<script src="https://dev.visualwebsiteoptimizer.com/lib/[account id].js"></script>
<!-- End VWO Smartcode -->Replace [account id] with the numeric account id.
Asynchronous SmartCode
<!-- Start VWO Async Smartcode -->
<script type='text/javascript'>
window._vwo_code = window._vwo_code || (function(){
var account_id=[account id],
settings_tolerance=2000,
library_tolerance=2500,
use_existing_jquery=false,
is_spa=1,
hide_element='body',
/* DO NOT EDIT BELOW THIS LINE */
f=false,d=document,code={use_existing_jquery:function(){return use_existing_jquery;},library_tolerance:function(){return library_tolerance;},finish:function(){if(!f){f=true;var a=d.getElementById('_vis_opt_path_hides');if(a)a.parentNode.removeChild(a);}},finished:function(){return f;},load:function(a){var b=d.createElement('script');b.src=a;b.type='text/javascript';b.innerText;b.onerror=function(){_vwo_code.finish();};d.getElementsByTagName('head')[0].appendChild(b);},init:function(){window.settings_timer=setTimeout('_vwo_code.finish()',settings_tolerance);var a=d.createElement('style'),b=hide_element?hide_element+'{opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important;}':'',h=d.getElementsByTagName('head')[0];a.setAttribute('id','_vis_opt_path_hides');a.setAttribute('type','text/css');if(a.styleSheet)a.styleSheet.cssText=b;else a.appendChild(d.createTextNode(b));h.appendChild(a);this.load('https://dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(d.URL)+'&f='+(+is_spa)+'&r='+Math.random());return settings_timer; }};window._vwo_settings_timer = code.init(); return code; }());
</script>
<!-- End VWO Async Smartcode -->Replace [account id] with the numeric account id.