Installation of the Cookie Consent

[hahlamine]

I've got an error when installing this for the first time.

Here is my code :

`

<link href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.4.5/dist/cookieconsent.css" rel="stylesheet" />

<script>
    // obtain cookieconsent plugin
    var cc = initCookieConsent();

    // run plugin with config object
    cc.run({
        autorun : true,                             
        delay : 0,
        current_lang : 'en',
        theme_css : "../src/cookieconsent.css",     
        autoclear_cookies : true,   
        cookie_expiration : 365,

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

        onAccept: function(cookies){                
            if(cc.allowedCategory('analytics_cookies')){
                cc.loadScript('https://www.google-analytics.com/analytics.js', function(){      
                    ga('create', 'UA-XXXXXXXX-Y', 'auto');  //replace UA-XXXXXXXX-Y with your tracking code
                    ga('send', 'pageview');
                });
            }
        },

        languages : {
            en : {  
                consent_modal : {
                    title :  "I 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 upon approval. <a aria-label="Cookie policy" class="cc-link" href="#">Read more</a>',
                    primary_btn: {
                        text: 'Accept',
                        role: 'accept_all'              //'accept_selected' or 'accept_all'
                    },
                    secondary_btn: {
                        text : 'Settings',
                        role : 'settings'               //'settings' or 'accept_necessary'
                    }
                },
                settings_modal : {
                    title : 'Cookie preferences',
                    save_settings_btn : "Save settings",
                    accept_all_btn : "Accept all",
                    cookie_table_headers : [
                        {col1: "Name" }, 
                        {col2: "Domain" }, 
                        {col3: "Expiration" }, 
                        {col4: "Description" }, 
                        {col5: "Type" }
                    ],
                    blocks : [
                        {
                            title : "Cookie usage",
                            description: 'I use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want.'
                        },{
                            title : "Strictly necessary cookies",
                            description: 'These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly.',
                            toggle : {
                                value : 'necessary_cookies',
                                enabled : true,
                                readonly: true
                            }
                        },{
                            title : "Analytics cookies",
                            description: 'These cookies ollect information about how you use the website, which pages you visited and which links you clicked on. All of the data is anonymized and cannot be used to identify you.',
                            toggle : {
                                value : 'analytics_cookies',
                                enabled : false,
                                readonly: false
                            },
                            cookie_table: [
                                {
                                    col1: '_ga',
                                    col2: 'google.com',
                                    col3: '2 years',
                                    col4: 'description ...' ,
                                    col5: 'Permanent cookie'
                                },
                                {
                                    col1: '_gat',
                                    col2: 'google.com',
                                    col3: '1 minute',
                                    col4: 'description ...' ,
                                    col5: 'Permanent cookie'
                                },
                                {
                                    col1: '_gid',
                                    col2: 'google.com',
                                    col3: '1 day',
                                    col4: 'description ...' ,
                                    col5: 'Permanent cookie'
                                }
                            ]
                        },{
                            title : "More information",
                            description: 'For any queries in relation to my policy on cookies and your choices, please <a class="cc-link" href="#yourwebsite">contact me</a>.',
                        }
                    ]
                }
            }
        }
    });

`

[orestbida]

@hahlamine , this is probably caused by the fact that you've placed the scripts in the <head> section.

Either place them at the end of the <body> tag or alternatively you can wrap the entire initialization of the cookie with window.addEventListener('load'), like this:

<script src="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.4.5/dist/cookieconsent.js" defer></script>
<script>
    window.addEventListener('load', function(){
        // obtain cookieconsent plugin
    var cc = initCookieConsent();

    // run plugin with config object
    cc.run({
            autorun : true,                             
            delay : 0,
        ...
        });
    });
</script>

You're not the first one with this error. I should better clarify in the docs.

[panseit]

Weird. I call cookie.js and cookieconsent.js at the bottom of head and don't have any problems. Should I move it at the end of body tag? I am a bit confused why on my implementation is work. I work with pure HTML pages though and not PHP.

[orestbida]

@panseit probably because you are using defer which explicitly tells the plugin to wait for body tag to be loaded first. and then execute the code, as I stated in the previous issue.

[panseit]

Ohh perfect :D