jquery visual website optimizer code

Question

I have a javascript code from visual website optimizer that will be placed on HTML header:

var _vwo_code=(function(){
var account_id=7237,
settings_tolerance=2000,
library_tolerance=1500,
use_existing_jquery=true,
// 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);this.load('//dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(d.URL)+'&r='+Math.random());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);return settings_timer;}};}());_vwo_settings_timer=_vwo_code.init();

but I want to run this code only with this condition:

$(document).ready(function(){
  if($('#selectedLang').val() == 'en_US')
  {
    //run the visual website optimizer code
  }
});

i tried this but returns an error "_vwo_code is not defined"

$(document).ready(function(){
  if($('#selectedLang').val() == 'en_US')
  {
    var _vwo_code=(function(){
    var account_id=7237,
    settings_tolerance=2000,
    library_tolerance=1500,
    use_existing_jquery=true,
    // 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);this.load('//dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(d.URL)+'&r='+Math.random());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);return settings_timer;}};}());_vwo_settings_timer=_vwo_code.init();
  }
});

Please help me on how can I solve this? Thanks in advance!

Answer 1

What VWO requires is to have the the _vwo_code variable to be available globally, but as you define it inside the document ready handler, it remains in local scope and hence not accessible outside.

So to fix this you can write

window._vwo_code=(function(){

instead of

var _vwo_code=(function(){

But remember here that now that VWO code runs after the document is ready, you might see flicker (original content shown before change is applied) on your test page.

(Note: I work for VWO)