Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-3864

Install an anti-flicker snippet on all P4 websites

XMLWordPrintable

    • Icon: Task Task
    • Resolution: Done
    • Icon: Should have Should have
    • 1.64
    • 4
    • Analytics
    • Sprint #97

      Obs: This ticket is very similar to the one developed by nroussos for the Landing Page A/B Test: --PLANET-3636-- ** 

      Problem:

      During the Cookies Bar A/B Test PLANET-3830 created on Google Optimize, we've noticed a page flicker (when the original version loads before the variant). This is resulting in bad user experience and might compromise the test. 

      Solution:

      The most effective way to mitigate page flicker when loading Optimize is to temporarily hide the page while the Optimize container loads. This is accomplished by adding the anti-flicker snippet as the first script on Planet 4 pages. 

      This ticket requires two tasks: 

      1. Install the anti-flickering snippet in all Planet 4 websites. The code should use the same GTM ID that is input by the web admins on the P4 Settings. 
      2. Create a field on the P4 Settings where the web admin could allow or block the anti-flickering snippet. 

      Task 1: Deploy the anti-flicker snippet

      The code below should be added to the Planet 4 pages as early in the <HEAD> as possible, but after any dataLayer declaration, if used.

      Important details:

      • Ensure that the global site tag (gtag.js) or Tag Manager container immediately follows the anti-flicker snippet.
      • The code needs to reference the same Tag Manager container ID that is used on the Planet 4 website. We should pull out the ID that was input by the web admins on Planet 4 settings (WordPress backend) on the place of 'GTM_ID_HERE'
      <!-- Anti-flicker snippet (recommended)  -->
      <style>.async-hide { opacity: 0 !important} </style>
      <script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
      h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
      (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
      })(window,document.documentElement,'async-hide','dataLayer',1000,
      {'GTM_ID_HERE':true});</script>

      You must initialize the dataLayer above the anti-flicker snippet or the performance of your site will be negatively impacted. Don't override the data layer later in the page.

      Task 2: Block or allow the anti-flicker snippet

      Allow the web admins the option to choose if they want to use the anti-flicker snippet or not.  This could be done with a checkbox on the Planet 4 settings. Only If checked, the anti-flicker snippet would be applied to all Planet 4 pages with the same GTM ID.

       

      Other notes:

      1. The anti-flicker snippet above is using a timeout of 1000 - the same used on the Landing Page
      2. How to customize the Anti-flickering snippet: https://developers.google.com/optimize/ 
      3. "If you're using Google Tag Manager to deploy Optimize, populate the anti-flicker snippet with your Tag Manager container ID, not your Optimize container ID. Adding the Optimize tag to your Tag Manager container will prevent page flicker until Optimize loads, but your page will not be affected if you later disable that tag." Source: https://support.google.com/optimize/answer/7100284 

            nroussos Nikos Roussos
            jmarubay Julia Marubayashi
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Created:
              Updated:
              Resolved: