-
Task
-
Resolution: Fixed
-
Should have
-
None
-
None
-
2
-
Login
-
Sprint #92, Sprint #93
Problem:
During the A/B Redirect Test created on Google Optimize for the landing page, we've noticed a page flicker (when the original page loads before the redirect) - which is causing a bad user experience.
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 your page(s).
How it works:
Optimize displays variants to your website visitors by modifying the DOM (Document Object Model). In some instances, changes are made to elements that are already visible to the end user. These visible changes are referred to as page flicker.
Page flicker occurs when a web page briefly appears with the browser's default styles before loading an external CSS stylesheet which re-renders it causing the restyled elements to momentarily 'jump' on the page.
How to deploy the anti-flicker snippet:
To install the anti-flicker snippet:
- Copy the full code below and add it to the landing page as early in the <HEAD> as possible, but after any dataLayer declaration, if used.
- Ensure that the global site tag (gtag.js) or Tag Manager container immediately follows the anti-flicker snippet.
<!-- 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',4000,
{'GTM-N7SG829':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.
Note (to keep in the record)
"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."
- relates to
-
-
- CLOSED
-