Modification of the prehiding logic for websdk for redirects offers
What is the current situation?
I currently have the problem that redirectOffers are running in Activities on a page with the WebSDK (asynchronously via Adobe Launch / Data Collection).
The preHiding snippet is also used. Yes, at the first alloy sendEvent the style with the id alloy-prehiding is removed accordingly. But this is unfavorable for redirect offers because the page may be displayed before the redirect takes place.
To fix this, I have currently built this workaround. I make an alloy sendEvent in Launch. I also pass the desired data to AT.
What is new now - is that I additionally check in the promise with .then whether has_schema(data, “personalization/redirect-item”) contains. If this is the case, I know that this is a redirect offer and insert an additional hiding. In this case, not the default document.body.style = “opacity: 0;” - but that I only use the cmp-container and page-wrapper style classes in my setup here. I also do not insert the id alloy-prehiding here. As this is a redirect - I am not adding a timeout here either (you can of course extend this accordingly).
What should the feature do?
My idea is - that I don't have to do this myself, but that the WebSDK itself checks whether a redirect-item is contained in the first alloy sendEvent call. Or at least the option that a checkbox with a field for custom CSS is available here, for example.
Note: I am aware here that with a very slow connection - the problem is that the normal prehiding snippet is removed after 3 seconds anyway - before Launch has been executed if necessary.
Example code how my current workaround is:
var data = {
'__adobe' : {
'target' : {
…
}
}
}
alloy("sendEvent", {
"data": data,
"renderDecisions": true,
"xdm": {
…
}
}
}).then((data) => {
const is_redirect = has_schema(data, "personalization/redirect-item")
if(is_redirect) {
const style = document.createElement("style");
style.innerText = '.cmp-container, .page-wrapper { opacity: 0 !important; }';
document.head.appendChild(style);
}
})