I’d like to run a/b split testing with VWO (https://vwo.com/knowledge/how-vwo-smart-code-works) on my X-theme WordPress landing page.

VWO says a certain smart code needs to be input into every landing page I’d like to use for testing purposes.

This is the code:

<!– Start Visual Website Optimizer Asynchronous Code –>
<script type=’text/javascript’>
var _vwo_code=(function(){
var account_id=136226,
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);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();
</script>
<!– End Visual Website Optimizer Asynchronous Code –>

Where can I input the code?

Thanks for writing in! First you will need to setup a Child Theme which allows you to make your own custom code changes and it won’t be overwritten when you update our Theme X. Please check our Child Theme setup guide here (http://theme.co/x/member/kb/how-to-setup-child-themes/).

After your child theme is setup, open the functions.php file in the child theme and add the following code into it.

// Visual Website Optimizer Asynchronous Code

add_action('wp_footer', 'enqueue_my_visual_website_optimizer_script');

function enqueue_my_visual_website_optimizer_script() {

  echo '

	<!– Start Visual Website Optimizer Asynchronous Code –>
	<script type=’text/javascript’>
	var _vwo_code=(function(){
	var account_id=136226,
	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);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();
	</script>
	<!– End Visual Website Optimizer Asynchronous Code –>

  ';
}

Hope that helps.

I applied what you provided in the previous message, however, I changed ‘wp_footer” to ‘wp_head’ instead because I want the code to appear before the closing </head> tag, rather than the footer.

When I did this though, my web pages would no longer load. I could go to any URL and only a white web page would load. Can you please advise on this? Thanks!

Please try this revised code instead,

// Visual Website Optimizer Asynchronous Code

add_action('wp_headr', 'enqueue_my_visual_website_optimizer_script');

function enqueue_my_visual_website_optimizer_script() {
?>
	<!– Start Visual Website Optimizer Asynchronous Code –>
	<script type="text/javascript">
	var _vwo_code=(function(){
	var account_id=136226,
	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);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();
	</script>
	<!– End Visual Website Optimizer Asynchronous Code –>

<? }

Hope this helps. Kindly let us know then.

Sorry for the typo in the code. It should really be wp_head not wp_headr. Glad you’ve sorted it out.

Thanks.