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.

Target provides several ways to prevent flicker:

Using an Auto Created Global mbox

If you enable the Auto Create Global Mbox 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 executes the page load.

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.