How at.js manages flicker

Information about how the Target at.js JavaScript library prevents flicker during page or app load.

Flicker happens when default content momentarily displays to visitors before it is replaced by the activity content. Flicker is undesirable because it can be confusing to visitors.

Using an Auto Created Global mbox

If you enable the Auto Create Global Mbox setting when configuring at.js, at.js manages flicker by changing the opacity setting as the page loads. When at.js loads, it will change the opacity setting of the <body> element to "0", making the page initially invisible to visitors. After a response from Target is received—or if an error with the Target request is detected—at.js resets opacity to "1". This ensures that the visitor only sees the page after your activities' content has been applied.

If you enable the setting when configuring at.js, at.js will set HTML BODY style opacity to 0. After a response from Target is received, at.js resets HTML BODY opacity to 1.

Opacity set to 0 keeps the page content hidden to prevent flicker, but the browser still renders the page and loads all the necessary assets like CSS, images, etc.

If opacity 0 does not work in your implementation, you can also manage flicker by customizing bodyHiddenStyle and set it to body {visibility:hidden !important}. You can use either value body {opacity:0 !important} or body {visibility:hidden !important}, whichever works best for your specific circumstance.

The following illustration shows the Hide Body and Show Body calls in the overall auto created global mbox flow:

For more information about the bodyHiddenStyle override, see targetGlobalSettings().

Using a Custom Global mbox with getOffer() and applyOffer()

In almost all implementations, the auto created mbox should be used. In the rare instance that a custom global mbox is required, you can use a combination of getOffer() and applyOffer(). You must use your own flicker-handling code. The following sample pre-hides HTML BODY and then displays it after a response is received from Target:

document.documentElement.style.opacity = "0";
 
adobe.target.getOffer({
    mbox: 'target-global-mbox',
    success: function(offer) {
        adobe.target.applyOffer({
            mbox: 'target-global-mbox',
            offer: offer
        });
 
        document.documentElement.style.opacity = "1";
    },
    error: function() {
        document.documentElement.style.opacity = "1";        
    }
});

Because both getOffer() and applyOffer() are low-level APIs, there is no built-in flicker control. You can pass a selector or HTML element as an option to applyOffer(), in this case applyOffer() will add the activity content to this particular element; however, you must make sure the element is properly pre-hidden before invoking getOffer() and applyOffer().

Using a Regional mbox with mboxCreate()

If you use a regional mbox implementation, you can use mboxCreate() with your page provisioned similar to the following sample code:

<div class="mboxDefault">
Some default content
</div>
<script>
mboxCreate('some-mbox');
</script>

If your pages are properly provisioned, at.js will manage flicker by appropriately switching the CSS "visibility" property of the element with the mboxDefault class.