Flicker Issue - Adobe Target Implementation through AEP WEB SDK Implementation

[ambikaTewari_ATCI]

Hi Experts,

We have implemented Adobe Target through Web SDK (async) and added pre-hiding snippet.

The order is : Pre hiding snippet  (in the head section)

                     Launch Web SDK (in the head section)

                     data layer ( in body section )

Observation :

There is a flicker in the first visit but post page refresh the flicker is not at all present.

Flicker code :

<script>
!function(e,a,n,t)
{var i=e.head;if(i){
if (a) return;
var o=e.createElement("style");
o.id="alloy-prehiding",o.innerText=n,i.appendChild(o),setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t)}}
(document, document.location.href.indexOf("adobe_authoring_enabled") !== -1, "body { opacity: 0 !important }", 3000);
</script>

Can someone suggest if we are missing some configuration here ?

[Sneha-Parmar · Accepted solution]

Hi @ambikaTewari_ATCI ,

The order in which I have implemented is below and it worked well. 

1) Data Layer

2) Body Hiding script

3) Launch script

Also you can also try adjusting the timeout ( "body { opacity: 0 !important }", 3000);) in body hiding script to see if that resolves the flicker issue. . Ensure you don't reduce it too much, the more you reduce the number, the more chances to get a flicker.

Adobe doc ref : https://docs.adobe.com/content/help/en/target/using/implement-target/client-side/at-js/manage-flicke...

Thanks

[ambikaTewari_ATCI]

Hi @Sneha-Parmar I did implemented above two solutions but it didnt help.

[Dave_Hamel_2024]

Is there an updated link?  This 404s. Thanks