Expand my Community achievements bar.

SOLVED

Page flickering with Sitecore 9 and React.js

Avatar

Level 4

I'm sure this has been discussed to death already - but I haven't seen any discussions lately.  I hope there is a solution.

(*Note, I'm new to Adobe and Sitecore)

 

Development Setup

  • Website uses react.js on Sitecore 9 CMS
  • Adobe Target is implemented via Adobe Launch
  • The at.js script is placed the <body> tag near the top
  • mBox is not in use

Problem

  • Content that is modified with the Visual Experience Composer or even using a custom JavaScript code failed to modify the site before the content is rendered, causiing flashing.
  • Multiple JavaScript methods have been used, such as MutationObserver and ('target-container').hide().

What is the latest / best practice for solving this issue? Or is this just something that can't ever be solved?

 

Thanks in advance!


@dwright I see you had similar conversations about this back in 2016.  Can you please provide an update on any solutions.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @JPFiber  you can use the anti flicker code a mention in the help doc > https://experienceleague.adobe.com/docs/target-dev/developer/client-side/at-js-implementation/at-js/...

 

This anti flicker  must be present before the launch lib 

https://assets.adobedtm.com/00-STRING-OF-NUMBERS-00/00-STRING-OF-NUMBERS-00/launch-STRING-OF-NUMBERS...

 

Place the snippet and launch lib close to head tag and not in the body tag.

 

Try to implement this and let us know if that helps a little. 

View solution in original post

3 Replies

Avatar

Employee Advisor

Hi @JPFiber ,

Hey no worries, and welcome to Adobe Target!

 

Have you implemented the prehiding snippet before at.js? That's the first line of defense used to manage default content flicker.

 

Also, What do you mean by "mbox is not in use"? "mbox" is a term we are trying to move away from, but some people use it to refer to specific html elements being wrapped with a special div, like <div class="mboxDefault">, while I usually use it to mean any network request made to the Target servers.

 

Daniel

Avatar

Level 4

Hi Daniel -- Thanks, I'm a convert from Google Analytics and Optimize!  

I'm not sure what the snippet should look like, I see a URL reference similar to this in the <body> tag:

https://assets.adobedtm.com/00-STRING-OF-NUMBERS-00/00-STRING-OF-NUMBERS-00/launch-STRING-OF-NUMBERS.js

Is that what you're referring to?
Regarding the mBox -- (Modification Type > MBox in the editor)  I'm told we don't use that feature. 

Any chance we can hop on a call to discuss?

Avatar

Correct answer by
Community Advisor

Hi @JPFiber  you can use the anti flicker code a mention in the help doc > https://experienceleague.adobe.com/docs/target-dev/developer/client-side/at-js-implementation/at-js/...

 

This anti flicker  must be present before the launch lib 

https://assets.adobedtm.com/00-STRING-OF-NUMBERS-00/00-STRING-OF-NUMBERS-00/launch-STRING-OF-NUMBERS...

 

Place the snippet and launch lib close to head tag and not in the body tag.

 

Try to implement this and let us know if that helps a little.