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-implementation/at-js/manage-flicker-with-atjs.html?lang=en 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-implementation/functions-overview/atjs-custom-events.html?lang=en 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));
... View more
Expand/CollapseMenu
