search

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

Exmaple + CDN files does not delete any cookie #77

Closed ghost closed 3 years ago

ghost commented 3 years ago

Hi,

I copied your example and use it with the CDN files provided.

Am I missing something obvious in that configuration?????

 // obtain cookieconsent plugin
    var cc = initCookieConsent();

    // run plugin with config object
    cc.run({
        delay : 0,
        autorun : true,     
        current_lang : 'en',
        force_consent : true,
        cookie_expiration : 365,
        autoclear_cookies : true,   
        theme_css : "https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.5.1/dist/cookieconsent.css",
        gui_options : {
            consent_modal : {
                layout : 'cloud',
                position : 'bottom',
                transition : 'slide'
            },
            settings_modal : {
                layout : 'box',
                transition : 'slide'
            }
        },

        onChange(cookies){
            alert("ONCHANGE")
        },

//*******************************************************************
onAccept: function(cookies){      
            console.log("I'M IN ONACCEPT")

            var categories_to_reject = []

            if (!cc.allowedCategory("analytics")){
                categories_to_reject.push("analytics")
            }

            console.log("cc.allowedCategory('analytics'):", cc.allowedCategory("analytics"))
            console.log('R', categories_to_reject)

            cc.accept('all',"analytics")
        },
//*******************************************************************
       languages : {
            en : {  
                consent_modal : {
                    title :  "TITLE",
                    description :  'DESCRIPTION',
                    primary_btn: {
                        text: 'ACCEPT ALL',  // cookies.level --> All categories
                        role: 'accept_all'              //'accept_selected' or 'accept_all'
                    },
                    secondary_btn: {
                        text : 'SETTINGS',
                        role : 'settings'               //'settings' or 'accept_necessary'
                    }
                },
                settings_modal : {
                    title : 'PREFERENCES',
                    save_settings_btn : "SAVE PREFERENCES",
                    accept_all_btn : "ACCEPT ALL", // cookies.level --> All categories
                    reject_all_btn : "REJECT ALL", // cookies.level --> All categories
                    cookie_table_headers : [
                        {col1: "NAME" }, 
                        {col2: "DOMAIN" }, 
                        {col3: "DESCRIPTION" }, 
                    ],
                    blocks : [

                        {   title : "NECESSARY",
                            description: 'NECESSARY_DESCRIPTION',
                            toggle : {
                                value : 'necessary',
                                enabled : true,
                                readonly: true
                            },
                            cookie_table: [
                                {   col1: 'cc_cookie',
                                    col2: 'localhost',
                                    col3: 'MY_DESCRIPTION',
                                },
                            ]
                        },
                        {   title : "ANALYTICS",
                            description: 'ANALYTICS_DESCRIPTION',
                            toggle : {
                                value : 'analytics',
                                enabled : false,
                                readonly: false
                            },
                            cookie_table: [
                                {   col1: '_ga',
                                    col2: 'localhost',
                                    col3: 'MY_DESCRIPTION',
                                },
                                {   col1: '_ga_86XY962EK4',
                                    col2: 'localhost',
                                    col3: 'MY_DESCRIPTION',
                                },
                            ]
                        },{
                            title : "MORE_INFO",
                            description: 'MORE_INFO_DESCRIPTION',
                        }
                    ]
                }
            }
        }
    });
orestbida commented 3 years ago

Hi @SumentsJavi,

the second parameter on cc.accept('all',"analytics") must be an array, otherwise the plugin will simply ignore it and will treat it the same as cc.accept('all'):

cc.accept('all', ['analytics']);

aside from that, I don't see anything weird. You can also check if the plugin is at least trying to delete the cookies (it will output a message on the console) if you use the src version:

https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.5.1/src/cookieconsent.js
ghost commented 3 years ago

Great point. I have already done the change: cc.accept('all', ['analytics']);

To reproduce this, I close and open the browser and the go to my localhost to test it. The sequence of buttons I follow is:

  1. Settings
  2. Save preferences

The console output is: (index):49 I'M IN ONACCEPT (index):57 cc.allowedCategory('analytics'): false

I cannot see any attempt of deleting any cookie.

Also, on developers -> Application -> Cookies: cc_cookie | {"level":["necessary"],"revision":0} | localhost | / | 2022-09-30T12:01:02.000Z | 45 |   |   | Lax |   | Medium |   _ga | GA1.1.2005400774.1633003260 | localhost | / | 2023-09-30T12:01:00.000Z | 30 |   |   |   |   | Medium |   _ga_86XY962EK4 | GS1.1.1633002819.1.1.1633003260.0 | localhost | / | 2023-09-30T12:01:00.000Z | 47 |   |   |   |   | Medium

The only one that I would expect with the configuration I have is cc_cookie.

Can you point me to other example to test?

orestbida commented 3 years ago

Is the google analytics script properly configured to be loaded/enabled through the plugin? Could you please show me the snippet?

ghost commented 3 years ago

I have added the file at the end of this comment.

As I understood the documentation of "onChange" and "onAccept", if the GA script loads the cookies on every page, I can delete those with "onChange" as it will execute in every page that is loaded. So I do not have to interfeer with the GA script installation.

The full file I am using is:

<html>
<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-86XY962EK4"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-86XY962EK4');
    </script>
</head>
<body>
    Hola

</body>
<script src="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.5.1/dist/cookieconsent.js"></script>
<script>
 // obtain cookieconsent plugin
 var cc = initCookieConsent();

// run plugin with config object
cc.run({
    delay : 0,
    autorun : true,     
    current_lang : 'en',
    force_consent : true,
    cookie_expiration : 365,
    autoclear_cookies : true,   
    theme_css : "https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.5.1/dist/cookieconsent.css",
    gui_options : {
        consent_modal : {
            layout : 'cloud',
            position : 'bottom',
            transition : 'slide'
        },
        settings_modal : {
            layout : 'box',
            transition : 'slide'
        }
    },

    onChange(cookies){
        alert("ON_CHANGE")

        var categories_to_reject = []

        if (!cc.allowedCategory("analytics")){
            categories_to_reject.push("analytics")
        }

        console.log("cc.allowedCategory('analytics'):", cc.allowedCategory("analytics"))

        cc.accept('all',['analytics'])
    },

//*******************************************************************
    onAccept: function(cookies){      
        console.log("I'M IN ONACCEPT")

        var categories_to_reject = []

        if (!cc.allowedCategory("analytics")){
            categories_to_reject.push("analytics")
        }

        console.log("cc.allowedCategory('analytics'):", cc.allowedCategory("analytics"))

        cc.accept('all',['analytics'])
    },
//*******************************************************************
   languages : {
        en : {  
            consent_modal : {
                title :  "TITLE",
                description :  'DESCRIPTION',
                primary_btn: {
                    text: 'ACCEPT ALL',  // cookies.level --> All categories
                    role: 'accept_all'              //'accept_selected' or 'accept_all'
                },
                secondary_btn: {
                    text : 'SETTINGS',
                    role : 'settings'               //'settings' or 'accept_necessary'
                }
            },
            settings_modal : {
                title : 'PREFERENCES',
                save_settings_btn : "SAVE PREFERENCES",
                accept_all_btn : "ACCEPT ALL", // cookies.level --> All categories
                reject_all_btn : "REJECT ALL", // cookies.level --> All categories
                cookie_table_headers : [
                    {col1: "NAME" }, 
                    {col2: "DOMAIN" }, 
                    {col3: "DESCRIPTION" }, 
                ],
                blocks : [

                    {   title : "NECESSARY",
                        description: 'NECESSARY_DESCRIPTION',
                        toggle : {
                            value : 'necessary',
                            enabled : true,
                            readonly: true
                        },
                        cookie_table: [
                            {   col1: 'cc_cookie',
                                col2: 'localhost',
                                col3: 'MY_DESCRIPTION',
                            },
                        ]
                    },
                    {   title : "ANALYTICS",
                        description: 'ANALYTICS_DESCRIPTION',
                        toggle : {
                            value : 'analytics',
                            enabled : false,
                            readonly: false
                        },
                        cookie_table: [
                            {   col1: '_ga',
                                col2: 'localhost',
                                col3: 'MY_DESCRIPTION',
                            },
                            {   col1: '_ga_86XY962EK4',
                                col2: 'localhost',
                                col3: 'MY_DESCRIPTION',
                            },
                        ]
                    },{
                        title : "MORE_INFO",
                        description: 'MORE_INFO_DESCRIPTION',
                    }
                ]
            }
        }
    }
});

</script>
</html>
ghost commented 3 years ago

This is interesting:

I have changed the configuration of the "necessary" block for:

{   title : "NECESSARY",
    description: 'NECESSARY_DESCRIPTION',
     toggle : {
        value : 'necessary',
        enabled : true,
//**********************************************
        readonly: false
//**********************************************
    },
    cookie_table: [
        {   col1: 'cc_cookie',
        col2: 'localhost',
        col3: 'MY_DESCRIPTION',
        },
    ]
,

So now, "onAccept" method is executed once, and "onChange" is executed twice.

Also, on "onAccept", I have changed the input parameters of "cc.accept" for: cc.accept([])

Interestingly, now the only cookie I can see is cc_cookie

orestbida commented 3 years ago

I don't recommend your approach as it looks a bit "hacky". The main problem with it is that you cannot guarantee that cookies are always set before the plugin is loaded. Another issue is that you might still be tracking users, as the analytics script is always active.

I would personally use the route with page_scripts: true. I also recommend to stop the gtag function — if user has opted out of analytics — by using google's suggested consent mode:

gtag('consent', 'default', {
    'ad_storage': 'denied',
    'analytics_storage': 'denied'
});
ghost commented 3 years ago

There is an issue on how the name of the cookies are interpreted in Chrome and Firefox.

Chrome adds a blank space at the begining of some cookies. In this case " _ga". Firefox does not do it.

That was the root issue.