Adobe Target: anti-flicker Script does not show body on time

[bjoern_koth]

Hey guys

after using Adobe Target synchronously (through utag.sync.js) my company wants to jump on the asynchronous train using Adobe Experience Cloud Visitor ID as tag in conjunction with the latest Adobe Target tag (2.3.0), both bundled into the utag.js.

The target library is played out using the visitor ID service is used, all good so far. 

Problem is: the page flickers when displaying Target A/B tests which was never the case when we synchronously played out the old at.js library via utag.sync.js and it blocked the rendering of other page parts.

Of course it's an asynchrounous issue since the necessary calls to Target to retrieve information about the running A/B tests while the rest of the page continuing to load / render.

Adobe is having it's own documentation on this, providing a body-hide script that needs to be implemented on the page (I placed it in the utag.sync.js for testing). This script has a built-in timeout which will show the body again after 3s of white void. 

https://docs.adobe.com/help/en/target/using/implement-target/client-side/at-js/manage-flicker-with-a...

Correct me if I am wrong but looking at the target tag the body should be shown as soon as the necessary target calls are made which never seems to happen. So we have an ugly 3s white page before anything is shown even though there are Target activities already rendered on the body, i.e. partially cut off animations as soon as the body shows.

Again, I can see all target activities being loaded in the network request (filtered for "delivery?client=") and on the page so basically the library does what it should, just not show the content on time...

Grateful for any ideas

Björn

[Jane_PS]

Hi @bjoern_koth, it has been my experience with other personalization tools that the only way to avoid the flicker issue is to implement synchronously.

That said, for the 3 second built-in timeout, have you tried editing it to see if 2 seconds, or even 1 second, works? I worked on a similar issue before and we went down the route of manipulating the timeout to reduce the "hide" as much as possible.

[bjoern_koth]

Hi Jane, thanks for the input. We're also looking into a different approach which is instead of the global hide and show have the page let us know which are the relevant pieces on it which may be changed and to only hide/show those. Another approach would be using skeleton loaders on the page itself for heavy content such as banners which may be subject to dynamic replacement.

Bottom line is that we want to play out Target with Tealium but due to the increasing number of warnings on Chrome about synchronously (through utag.sync.js) loaded scripts it is not completely unthinkable that at some point in the future Chrome might block them altogether for the sake of speed (which is already the case for low network speeds).

Also funny that Adobe's Launch is actually also leaving the pre-hide task up the pages who integrate it but has no means of synchronous code injection due to its async by default nature.

We'll see where we end up 

Cheers
Björn

[TimH]

Late to the party here, but a solution we've found that works pretty well - is customising the flicker snippet that Adobe provide:

https://experienceleague.adobe.com/docs/target/using/implement-target/client-side/at-js-implementati...

And append at.js custom event listeners to the bottom of it, which trigger removing the hidden style when target has rendered - instead of waiting for the timeout every time.

https://experienceleague.adobe.com/docs/target/using/implement-target/client-side/at-js-implementati...

The snippet in utag.sync essentially becomes:

;(function(win, doc, style, timeout) {
    var STYLE_ID = 'at-body-style';

    function getParent() {
        return doc.getElementsByTagName('head')[0];
    }
    
    function addStyle(parent, id, def) {
        if (!parent) {
          return;
        }
        var style = doc.createElement('style');
        style.id = id;
        style.innerHTML = def;
        parent.appendChild(style);
    }
    
    function removeStyle(parent, id) {
        if (!parent) {
          return;
        }
        var style = doc.getElementById(id);
        if (!style) {
          return;
        }
        parent.removeChild(style);
    }
    
    addStyle(getParent(), STYLE_ID, style);
    setTimeout(function() {
        removeStyle(getParent(), STYLE_ID);
    }, timeout);
    
    ['at-content-rendering-succeeded','at-content-rendering-no-offers'].forEach(function(e) {
        document.addEventListener(e, function(event) {
            if(event.detail.mbox==='target-global-mbox') { 
                removeStyle(getParent(), STYLE_ID);
            }
        }, false);
    });
      
}(window, document, "body {opacity: 0 !important}", 2000));

[max_wong]

Hi @TimH ,

Thanks for sharing your solution. Just a few questions on your implementation that you did assuming that your Adobe Target tag configuration is the same as the below image:

1. What is the version of your Adobe Target? Would your implementation method work on at.js 2.x only?
2. When you mentioned "appending the custom event listeners to the bottom of it", I am assuming the piece of code with the console.log is implemented in the Adobe Target tag template?
3. Do I just implement the same code into utag.sync.js tag template?

Just trying to update the implementation for Adobe Target for my company since our dev team are always bringing up the flicker free and performance issue of Adobe Target.

Looking forward to your reply.

Thanks!