Expand my Community achievements bar.

Modification of the prehiding logic for websdk for redirects offers

Avatar

Community Advisor

7/24/24

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);
  }
})
2 Comments