Expand my Community achievements bar.

Ask our product team on how to best grow your experimentation and personalization strategies with Target during our AMA on May 6th!

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