Types of VWO Smart Code—Synchronous and Asynchronous

Last updated

Types of VWO Smart Code—Synchronous and Asynchronous

VWO provides the following types of tracking code that you can add to your website pages:

  • Synchronous code
  • Asynchronous code

Synchronous VWO Smart Code

Synchronous code executes each function or statement in an HTML code sequentially. If the synchronous VWO code fails to execute, it will block further execution of the code, thereby delaying the page load time.

For example, consider that you have added VWO synchronous code in the header of your webpage’s HTML code and it fails to execute for some reason. In such scenario, the web page will not load for your visitor.

If you have jQuery version 1.4.2 or later installed on the page, replace the variable vis_opt.js with vis_opt_no_jquery.js in the tracking code (as mentioned in the code comment). This will tell the VWO tracking code whether it should call the jQuery present on the page or request it from our CDN.

Here’s an illustration to describe the flow of Synchronous code:

sync

Example of VWO Synchronous Code

<!– Start Visual Website Optimizer Synchronous Code –>
<script type='text/javascript'>
var _vis_opt_account_id = 1;
var _vis_opt_protocol = (('https:' == document.location.protocol) ? 'https://' : 'http://');
document.write('<s' + 'cript src="' + _vis_opt_protocol +
'dev.visualwebsiteoptimizer.com/deploy/js_visitor_settings.php?v=1&a='+_vis_opt_account_id+'&url='
+encodeURIComponent(document.URL)+'&random='+Math.random()+'" type="text/javascript">' + '<\/s' + 'cript>');
</script>
<script type='text/javascript'>
if(typeof(_vis_opt_settings_loaded) == "boolean") { document.write('<s' + 'cript src="' + _vis_opt_protocol +
'd5phz18u4wuww.cloudfront.net/vis_opt.js" type="text/javascript">' + '<\/s' + 'cript>'); }
// if your site already has jQuery 1.4.2, replace vis_opt.js with vis_opt_no_jquery.js above
</script><script type='text/javascript'>
if(typeof(_vis_opt_settings_loaded) == "boolean" && typeof(_vis_opt_top_initialize) == "function") {
_vis_opt_top_initialize(); vwo_$(document).ready(function() { _vis_opt_bottom_initialize(); });
}
</script>
<!– End Visual Website Optimizer Synchronous Code –>

 

Asynchronous VWO Smart Code

Unlike the Synchronous VWO code, Asynchronous VWO code loads in parallel to your webpage and does not affect the loading time of your website. VWO asynchronous code has a timer set for the pages to load and if a page fails to load within the set time, it stops execution and the control version (original version) is displayed instead.

The following are the salient features of the VWO asynchronous code:

  • It executes in parallel to the page code.
  • You can set the time for which the asynchronous script will wait for the page settings to load, using the variable settings_tolerance.
  • If the page settings load within this time interval, the code requests the VWO library (va.js or vanj.js) from our CDN and waits for the file to load at the interval indicated by the variable library_tolerance.
  • If the page files do not load within the respective time limit, the VWO code on the page will show the control version (original version) instead.
  • If you have jQuery version 1.4.2 or later installed on the page, set the variable use_existing_jquery to True. The variable use_existing_jquery tells the VWO tracking code whether it should call the jQuery present on the page or request it from our CDN.

Here’s an illustration showing the flow of Asynchronous code:

async

Example of VWO Asynchronous Code

<!– Start Visual Website Optimizer Asynchronous Code –>
<script type='text/javascript'>
var _vwo_code=(function(){
var account_id=1,
settings_tolerance=2000,
library_tolerance=2500,
use_existing_jquery=false,
// DO NOT EDIT BELOW THIS LINE
f=false,d=document;return{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(){settings_timer=setTimeout('_vwo_code.finish()',settings_tolerance);var a=d.createElement('style'),b='body{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('//dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(d.URL)+'&r='+Math.random());return settings_timer;}};}());_vwo_settings_timer=_vwo_code.init();
</script>
<!– End Visual Website Optimizer Asynchronous Code –>

ATTENTION If you are using your own jQuery, make sure it loads before the VWO tracking code. Otherwise, VWO code will not work on that page.

Was this article helpful?

Thanks for your feedback!
Please email us at support@vwo.com to tell us what you were looking for. We'll send the answer to your inbox.

Contact Us / Login

Product
Resources Home