Back

Overview

In order to serve VWO through the utag.sync.js you can use this methodology. It will be completely flicker-free and work correctly.

Configuration

1. Grab your VWO code

Grab your VWO Tracking Code from the VWO UI and make a note of the "account_id":

VWO Tracking Code

2. Ensure utag.sync.js is enabled

See the article on Publish Configuration and Generate utag.sync.js. It is just a simple case of enabling this and then saving your latest version.

3. Open the utag.sync template and add your code

You will now be able to access the utag.sync.js template in the templates drop-down (see this article for how to access the templates) and paste in the following code at the bottom (but replace the '1234578' with your account ID):

Note: You can easily add JavaScript above here to add conditional logic to determine which pages VWO should run on.

var _vis_opt_account_id = 1234578; // Replace this with your VWO account ID
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" id="vwo_1">' + '<\/s' + 'cript>');


document.getElementById("vwo_1").onload = function() {
    if (typeof(_vis_opt_settings_loaded) == "boolean") {
        document.write('<s' + 'cript src="' + _vis_opt_protocol +
            'd5phz18u4wuww.cloudfront.net/vis_opt.js" type="text/javascript" id="vwo_2">' + '<\/s' + 'cript>');
    }
    // if your site already has jQuery 1.4.2, replace vis_opt.js with vis_opt_no_jquery.js above




    document.getElementById("vwo_2").onload = function() {
        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();
            });
        }
    }
}

4. Save and Publish

Your template should now look something like this:

Updated utag.sync.js

Go ahead and 'Save Profile Template' and then publish the version!

5. You're done!

You're now live!