orestbida / cookieconsent

:cookie: Simple cross-browser cookie-consent plugin written in vanilla js
https://playground.cookieconsent.orestbida.com/
MIT License
4k stars 410 forks source link

Problem with Google Analytics - analytics.js #290

Closed rimeweb closed 2 years ago

rimeweb commented 2 years ago

Hello, i'm trying to configure cookieconsent to block Google Analytics, but even if i followed your instructions, the plugin not working correctly. I have verified that the plugin blocks cookies (_ga / _gid / _gat) until the user confirms, but then these cookies do not update their expiration while browsing. After its duration (1 minute) the "_gat" cookie is deleted and no longer reloaded. Consequently, the user's visit is only detected on the first login page.

Locally I have the files: <script type='text/javascript' src='js/cookieconsent.js''>

app.js configuration:

` var cc = initCookieConsent(); cc.run({
current_lang : document.documentElement.getAttribute('lang'), autoclear_cookies : true, theme_css: '/css/cookieconsent.css', cookie_name: 'cookieconsent', cookie_expiration : 182, page_scripts: true,
cookie_same_site: "Lax",

gui_options: {
    consent_modal: {
        layout: 'bar', position: 'bottom', transition: 'slide'
    },
    settings_modal: {
        layout: 'box', transition: 'slide'
    }
},

onFirstAction: function(user_preferences, cookie){
            // callback triggered only once
        },

onAccept: function (cookie) {
            // ... cookieconsent accepted
        },

onChange: function (cookie, changed_preferences) {
            // ... cookieconsent preferences were changed
        },

languages: {
    'en-US': {
        consent_modal: {
            title: '',
            description: 'We use analytics cookies to give you the best online experience. By closing this notice, you continue denying consent. Read our <a href="/cookies-policy" class="cc-link">Cookies Policy</a>. Customize your choices: <button type="button" data-cc="c-settings" class="cc-link">Cookies Settings</button>',
            primary_btn: {
                text: 'Accept',
                role: 'accept_all'
            },
            secondary_btn: {
                text: 'Reject',
                role: 'accept_necessary'
            }               
        },
        settings_modal: {
            title: 'Cookies Settings',
            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: 'Expiration'},
                {col3: 'Description'}
            ],
            blocks: [
                {
                    title: 'Cookies Settings',
                    description: 'In this section you can select the cookies categories. For more information read our <a href="/cookies-policy" class="cc-link">Cookies Policy</a>.'
                }, {
                    title: 'Strictly Necessary Cookies',
                    description: 'These cookies are essential for the proper functioning of website. The use of these cookies does not require your consent.',
                    toggle: {
                        value: 'necessary',
                        enabled: true,
                        readonly: true
                    },
        cookie_table: [
                        {
                            col1: 'cookieconsent',
            col2: '6 months',
                            col3: 'Used to remember user settings'

                        }                            
                    ]
                }, {
                    title: 'Analytics Cookies',
                    description: 'We use Google Analytics for the purpose of collecting statistical information in aggregate form on the use of the site and its visibility.',
                    toggle: {
                        value: 'analytics',
                        enabled: false,
                        readonly: false
                    },
                    cookie_table: [
                        {
                            col1: '_ga',                                
            col2: '2 years',
                            col3: 'Used to distinguish individual users',
                            is_regex: true
                        },
                        {
                            col1: '_gid',                                
            col2: '1 day',
                            col3: 'Used to distinguish individual users',
                        },
                        {
                            col1: '_gat',                                
            col2: '1 minute',
                            col3: 'Used to limit the amount of user requests in order to maintain website performance',
                        }
                    ]
                }, {
                    title: 'YouTube',
                    description: 'This website includes previously blocked content hosted on YouTube. You can choose to view this content using the appropriate function on the relevant pages.',
                }
            ]
        }
    }       
}

}); `

`

`

Thank you very much

orestbida commented 2 years ago

Hi @rimeweb,

I don't see anything wrong with the config.

If you're using any framework with an SPA behavior (React, Vue ...), then this "issue" is the expected behavior. You'd need to manually call ga('send', 'pageview') between different pages/routes.

If that's not the case, I would need to manually inspect the website/demo with the issue in order to help you.

rimeweb commented 2 years ago

hello @orestbida, thank you for your reply.

The website is in wordpress, i have also integrated your iframemanager plugin without problems, which works perfectly.

This is url, but in on-line version i inserted the compressed js files (in the local version i have the uncompressed files).

thank you very much for helping

orestbida commented 2 years ago

Currently, the plugin is executed as soon as it is loaded. This is fine during the first time, as the script is in a "waiting/paused" state, until the user gives his consent. On subsequent page loads, however, it runs automatically and ignores any and all scripts defined below.

You can fix this in 3 ways:

  1. Move every script — that should be handled by the plugin — up, before the .run() method is called
  2. Add the defer attribute to the plugin's script tag. This would tell the browser to load the script tag only once everything else has been loaded.
  3. If you don't have easy access to the script tag, you could wrap the code with the following function, which would make the script behave as if it had the defer attribute set:

    window.addEventListener('load', function(){
        var cc = initCookieConsent();
    
        cc.run({ 
            // your config.
        });
    });
rimeweb commented 2 years ago

Hello @orestbida thank you very much for the solutions you proposed to me. I followed solution no. 2 and added the defer attribute to the script.

Now the plugin works perfectly with Google Analytics.

Thanks for your help