Page flickering with Sitecore 9 and React.js | Community
Skip to main content
J
JPFiber
Level 3
May 19, 2023
Solved

Page flickering with Sitecore 9 and React.js

  • May 19, 2023
  • 1 reply
  • 1958 views

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-adobe I see you had similar conversations about this back in 2016.  Can you please provide an update on any solutions.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by ambikaTewari_ATCI

    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/manage-flicker-with-atjs.html#managing-flicker-when-loading-at.js-asynchronously

     

    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.js

     

    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. 

    1 reply

    D
    Adobe Employee
    dwright-adobeAdobe Employee
    Adobe Employee
    May 19, 2023

    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

      J
      JPFiberAuthor
      Level 3
      May 19, 2023

      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?

        ambikaTewari_ATCI
        Community Advisor
        ambikaTewari_ATCICommunity AdvisorAccepted solution
        Community Advisor
        May 22, 2023

        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/manage-flicker-with-atjs.html#managing-flicker-when-loading-at.js-asynchronously

         

        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.js

         

        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. 

          Terms & ConditionsAccessibility statement

          Loading footer...