Flicker Free Test & Target

[#1]

What is Flicker?

Flicker is the occurrence of default content being momentarily displayed to the visitor before it is replaced with the content you intended to show the visitor, making it seem to the visitor that the content flickered. Visitors can sometimes interpret flicker as a problem with the site, potentially causing the visitor to lose confidence in the site or brand. Flicker can also cause visitor dissatisfaction if, for example, they see a discount they like "flicker away" to be replaced with a lesser discount. Flicker is a symptom of encountering a delay in loading the content displayed, also called "tests", asynchronously.

Synchronous vs. Asynchronous

You can load Test & Target, a popular solution for A/B and Multivariate testing, either synchronously or asynchronously. Both methods provide benefits and issues, and it is important to understand each in order to make an informed decision.

Synchronous Loading

If you choose to load your tests synchronously, you will not see flicker occur. However, loading content synchronously means that the entire page must wait to receive that content before it parses and displays the rest of the page. If the content the page is trying to load is unavailable, the page will "hang", meaning it will appear to stop loading. If the delay is too long, the page becomes unavailable to visitors completely, resulting in lost traffic, conversions, etc.

Asynchronous Loading

Asynchronous loading circumvents the issue of unavailable content halting page load because the browser continues to load the rest of the page while it waits for the pending content. However, if there is a long enough delay between the browser encountering the offer on the page and retrieving the offer's content, visitors may briefly see the default content. This is the flicker phenomenon.

Tealium's New Approach

Before you Begin: utag.footer.js is Now Deprecated

Going forward, utag.footer.js is officially deprecated and no longer an option. Older implementations that are using utag.footer.js will continue to function as before. You will not have to change the scope for your old Content Modification Extensions. The old Content Modifications Extensions originally scoped to 'Footer' will appear to be scoped to 'DOM Ready', but they will still publish to the utag.footer.js file.

Introducing utag.sync.js

The utag.sync.js file replaces the functionality of the old utag.footer.js file. When you use the utag.sync.js, make sure you include its file reference within the head tags at the top of the page's code. You must include utag.sync.js on your page if you want to use Flicker Free Test & Target.

How it Works

1. When the page loads, the browser will encounter the utag.sync.js file which sets the CSS visibility property of to "hidden". The content is not removed, but the browser will not render it. The layout dimensions of the hidden content are preserved, so the layout of your page is not deformed. To a visitor it will appear as though the section where the content would be displayed is blank instead. There is no flicker.
2. When the utag.js file loads, it calls the Test & Target Tag which in turn shows the hidden nodes.

Note: If a load rule does not allow the Test & Target Tag to load, then the utag.js file will show the hidden nodes and display the default content instead.

Using the Flicker Free Test & Target Extension

We've updated the Test & Target Extension to handle our Flicker Free solution. Before you begin using the Flicker Free TnT Extension:

Include utag.sync.js on Your Page

Include utag.sync.js within the head tag of your page's code. You cannot use the Flicker Free functionality without this.

Enable the Flicker Free Publish Setting

First, you need to enable the appropriate Publish Setting:

1. In Tealium iQ, click on the Save/Publish button.
2. The Save/Publish window will appear. Click on the Configure Publish Settings button.
3. Toggle Flicker-Free Support for Adobe Target to On and click Apply.

Remove Old Test & Target Tag Template

You must delete the old Tag Template for Test & Target.

1. In Tealium iQ, click on your email address. The Admin Menu will appear.
2. Click on 'Manage Templates' located under Account Admin.
3. Select the Adobe Text & Target Tag template. the Tag Config window will appear.
4. Click the trash icon in the upper right corner to delete the current template.
5. Click 'Close'.
6. Save/Publish the profile. When you log back into the profile, it will automatically pull in the new Tag template.

Setting up the Test & Target Extension

Setting up the Extension to use Flicker free is as simple as checking the 'Flicker Free' box in the Extension settings. Be aware that if you use Flicker Free, you must select 'Replace Node Content (leave default)' for the Mod Position selection. All other configurations remain as they were before, as described in the Test & Target article.

Important Notes:

• The mBox DIV ID cannot be the same as the element identifier. If they're the same, then the utag.sync.js file will hide all elements with that identifier as well.
• If you have an mBox that isn't in a campaign, then you must make certain you remove that mBox from the Test and Target Content Modification extension. Otherwise the utag.sync.js file will hide the content for the duration you entered in the timeout field of the Test & Target Tag's configurations before finally displaying the default content. Removing the mBox allows the default content to display immediately.