What are the best practices for deploying Visual Website Optimizer?

[alessandro_pell]

Trying to avoid flickering on the page.

[ty_gavin · Accepted solution]

Flicker is typically removed by using synchronous scripting or creating A/B tests that do not replace default content on the page (this can be done async.) Synchronous scripting on web pages in general is not considered a best practice. I would recommend an asynchronous approach. For a very high-performance asynchronous implementation, I would recommend:

(1) Use the "Bundling" feature in Publish Settings

(2) Code your utag.js at the top of the HTML source (Tealium Code Center recommends top of body as the best practice.)

(3) Set your tag to "Wait = No" (in Advanced Settings for your Tag config)

(4) Use the latest utag.js (version 4.2x or later)

(5) Move your Visual Website Optimizer to the top of the list in the "Tags" tab so it will run first If you are willing to take on the risks of a synchronous Visual Website Optimizer tag, Tealium provides the option to use a "utag.sync.js" template. This is enabled in Publish Settings as well.

With the utag.sync.js in place (implemented synchronously in the "head" section of your HTML page) you can use document.write to insert a script block that will inject your Visual Website Optimizer script. The utag.sync.js is an editable Template where you can add synchronous JS code (document.write statements.) Again, be sure you understand the risks of using synchronous code and synchronous tag vendors on your site.

[alessandro_pell]

Thank you for the answer, Ty, it's really clear. We can't move the utag.js right now, so i think we will end up using the utag.sync.js to insert the script block; risk is low because vwo code inserted loads vwo asynchronously.

[siegert_dierick]

Hi Ty, Would this use of the utag.sync.js template be an option for the implementation of Optimizely as well? The utag in this case is in the footer of the page (I know that we should move it to the top), and the Optimizely tag (sync) is not fired at all. So maybe we can work around this using the utag.sync.js. tx Siegert

[ty_gavin]

Yes, if you need to run Optimizely synchronously, you can use utag.sync.js as a simple "container" tag. Remember, this is JS so you will need to wrap your optimizely script include in a document.write call. I'm assuming you have your page tagged and the utag.sync.js file enabled in Publish Settings. // Something like this in the utag.sync.js template document.write('<script src="//cdn.optimizely.com/js/123456789.js"></script>');

[nora_tolgyesi]

Hey Ty, We've got a new website where I asked to put the utag.js as high up as possible, having issues with VWO previously when utag.js was in body and made the VWO tag flicker. Using your method, there's no need for utag.sync.js. Nothing flickers, nothing is sync. Which is the one and only thing the Dev team has asked from me. :) Thank you Ty!

[alessandro_pell]

About using document.write, if you want to use it you should always be sure that has not been overwritten/redefined by another script. Real story believe me :)

[ty_gavin]

Nora/Alessandro, Thank you both for the feedback and tips. Every time we remove a synchronous script, we make the world a better place. :-)