Should have 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:
- 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.
- 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:
- The anti-flicker snippet above is using a timeout of 1000 - the same used on the Landing Page
- How to customize the Anti-flickering snippet: https://developers.google.com/optimize/
- "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
- has to be done before
-
PLANET-3830 Create an experiment prototype for the Cookies Bar redesign
-
- CLOSED
-