Clashes with Google Optimize Anti Flicker Snippet

[gr9]

Recording this as a potential issue due to the popularity of Google Optimize.

Issue: With the Google Optimize Anti flicker snippet installed on a page AND the cookie consent code from this repository, after choosing 'accept all', pages with scripts managed by cookie consent will then show a white screen for approximately 2-4 seconds before the first content renders on screen.

Background: Google optimize is a popular tool to A/B test web pages. One negative side effect of Google Optimize is the 'flicker' effect where content changes after page load (when the variant is switched in). To alleviate this, Google provides a standard 'Anti Flicker' code snippet as a work around to this. However, Google Optimize works in conjunction with Google Analytics & connects to a GA property - thus a cookie consent user may feasibly wish to manage the anti flicker code as well too.

Pre-conditions:

1. A web page with cookie consent code installed & configured and run as an 'As external script' as described here: https://github.com/orestbida/cookieconsent (e.g. page_scripts: true, with data-cookiecategory="analytics" added to third party, non-necessary cookie scripts.)

2. A website with the google optimize anti flicker snippet installed as per google documentation (e.g. very beginning of

   tag) and the data-cookiecategory attribute added to the script include:

<!-- Anti-flicker snippet (recommended)  -->
--
  | <style>.async-hide { opacity: 0 !important} </style>
  | <script data-cookiecategory="analytics">(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-XXXXXXX':true});</script>
  | <!-- Global site tag (gtag.js) - Google Analytics -->

<script data-cookiecategory="analytics" async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX"></script>
        <script data-cookiecategory="analytics">
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', 'UA-XXXXXXX', {'page_title': 'homepage', 'page_path': '/', 'optimize_id': 'GTM-XXXXXXX'});
          gtag('config', 'AW-XXXXXXX');
        </script>

Environments:

• Google Chrome Latest, Mac OS X latest
• Galaxy S9 - Chrome (latest) (These are the only two I've tried, I'm sure there are others)

Steps to re-produce issue:

1. Choose accept all and the load the page again

Expected outcome: The web page behaves as normal

Actual outcome: On page load - a white screen shows for as long as 4 seconds

Notes: Strangely, if you choose 'reject all' - this stops happening; or if I comment out the anti-flicker code, this also reverts back to normal.

Third Party Dependancies: I Currently have GA, Google Optimize, Facebook login JS, and Hotjar installed. 'critical' css inlining (https://www.npmjs.com/package/critical)

Cookie Consent config:

cc = initCookieConsent();
    cc.run({
        current_lang : 'en',
        autoclear_cookies : true,                   // default: false
        cookie_name: 'cc_cookie_preferences',       // default: 'cc_cookie'
        cookie_expiration : 365,                    // default: 182
        page_scripts: true,                         // default: false

        // auto_language: null,                     // default: null; could also be 'browser' or 'document'
        // autorun: true,                           // default: true
        // delay: 0,                                // default: 0
        // force_consent: false,
        // hide_from_bots: false,                   // default: false
        // remove_cookie_tables: false              // default: false
        // cookie_domain: location.hostname,        // default: current domain
        // cookie_path: "/",                        // default: root
        // cookie_same_site: "Lax",
        // use_rfc_cookie: false,                   // default: false
        // revision: 0,                             // default: 0

        gui_options: {
            consent_modal: {
                layout: 'box',                      // box,cloud,bar
                position: 'bottom right',           // bottom,middle,top + left,right,center
                transition: 'slide'                 // zoom,slide
            },
            settings_modal: {
                layout: 'box',                      // box,bar
                // position: 'left',                // right,left (available only if bar layout selected)
                transition: 'slide'                 // zoom,slide
            }
        },

        onFirstAction: function(){
            console.log('onFirstAction fired');
        },

        onAccept: function (cookie) {
            console.log('onAccept fired ...');
        },

        onChange: function (cookie, changed_preferences) {
            console.log('onChange fired ...');
        },

        languages: {
            'en': {
                consent_modal: {
                    title: ' We use cookies! ',
                    description: 'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. <button type="button" data-cc="c-settings" class="cc-link">Let me choose</button>',
                    primary_btn: {
                        text: 'Accept all',
                        role: 'accept_all'              // 'accept_selected' or 'accept_all'
                    },
                    secondary_btn: {
                        text: 'Reject all',
                        role: 'accept_necessary'        // 'settings' or 'accept_necessary'
                    }
                },
                settings_modal: {
                    title: '<a class="smallLogo" style="border:0;" href="/"></a>',//'<img src="https://domain.com/logo.png" alt=" Logo." />',
                    save_settings_btn: 'Save settings',
                    accept_all_btn: 'Accept all',
                    reject_all_btn: 'Reject all',
                    close_btn_label: 'Close',
                    cookie_table_headers: [
                        {col1: 'Name'},
                        {col2: 'Domain'},
                        {col3: 'Expiration'},
                        {col4: 'Description'}
                    ],
                    blocks: [
                        {
                            title: 'Cookie usage',
                            description: 'MirrorTrip uses cookies to ensure the basic functionalities of this website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="/privacy.jsp" class="cc-link">privacy policy</a>.'
                        }, {
                            title: 'Strictly necessary cookies',
                            description: 'These cookies are essential for the proper functioning of the website (E.g. to login or make a booking). Without these cookies, the website would not work properly',
                            toggle: {
                                value: 'necessary',
                                enabled: true,
                                readonly: true          // cookie categories with readonly=true are all treated as "necessary cookies"
                            }
                        }, {
                            title: 'Performance and Analytics cookies',
                            description: 'These cookies allow us to measure anonymous, aggregate data in order to optimize the MirrorTrip customer experience.',
                            toggle: {
                                value: 'analytics',     // there are no default categories => you specify them
                                enabled: true,
                                readonly: false
                            },
                            cookie_table: [
                                {
                                    col1: '^_ga',
                                    col2: 'google.com',
                                    col3: '2 years',
                                    col4: 'Used to distinguish users.',
                                    is_regex: true
                                },
                                {
                                    col1: '_gid',
                                    col2: 'google.com',
                                    col3: '1 day',
                                    col4: 'Used to distinguish users.',
                                },
                                {
                                    col1: '_hjid',
                                    col2: 'hotjar.com',
                                    col3: '1 year',
                                    col4: 'Used to analyze website usability.',
                                }
                            ]
                        }, {
                            title: 'More information',
                            description: 'For any queries in relation to my policy on cookies and your choices, please <a class="cc-link" href="/faq/">contact support</a>.',
                        }
                    ]
                }
            }
        }

    });

[orestbida]

Hi @gr9,

from what I understand, the antiflicker script might not behave well, unless loaded with a high priority (synchronous loading) and executed ASAP.

The anti-flicker snippet should only be installed inline – directly on your web page – and never with a tag management system (TMS) or another asynchronous script. If you can't install the anti-flicker snippet inline you should skip it altogether.

By adding data-cookiecategory you're delaying the execution.

Google also recommends installing Optimize through its own snippet, rather than via GTM:

We strongly recommend using the optimize.js installation method as it offers the best performance and is the easiest way to install Optimize.

Actual outcome: On page load - a white screen shows for as long as 4 seconds

Based on this video/tutorial, it is a normal behavior. You could try modifying the snippet's 4000 ms to a shorter value.

Strangely, if you choose 'reject all' - this stops happening; or if I comment out the anti-flicker code, this also reverts back to normal.

This is expected, since you're not loading anything: analytics/optimize/antiflicker are all disabled.

I can't really help with optimize + antiflicker as it looks like they were not meant to be used with a consent tool.

There are a few threads regarding Google Optimize/Antiflicker Snippet and GDPR, all reporting similar issues: https://support.google.com/optimize/thread/71035930?hl=en https://support.google.com/optimize/thread/118843232?hl=en https://support.google.com/optimize/thread/93117284?hl=en https://support.google.com/optimize/thread/7956883/cookie-consent-and-google-optimize?hl=en

[gr9]

Hi - OK thanks for the thorough review; For what it's worth, I do have it installed inline.. Might take a look a look at the optimize.js method. Bit of a shame in general, but somewhat understandable.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.