Page script external

[gh4l3b]

Hi @orestbida thank you for this cookie consent. It is exactly what i am looking for. The reason I am switching is because yours are easy to modify and expandable.
I have been using this https://github.com/onza/CookieConsent in the past until i found yours, now I want to switch.
I want all the scripts (analytics, gtag etc..) to be in the same place and only call cookiecosnent.js cookieconsent-inti.js coockiecosent.css to my html pages. Similar to the one I was using before the script are located in lib/js folder and the css is in lib/css.

Main important functions for me. First change language to "de".
Add google analytics and google tag manager script in one place and call them as mentioned above. Also I want to add it to the settings optin and optou.
I have Facebook pixel inside google tag manager, added as custom html. I want to add it to the settings optin and optou.

[orestbida]

Hi @gh4l3b,

you should be able to achieve this desired configuration using google's consent mode. Perhaps this discussion might come in handy.

You can use the .loadScript() method inside the onAccept and onChange callbacks to load external scripts like gtag etc. Check the API for more details and examples.

The plugin does not yet support toggling of individual services inside a category. Such configuration will be possible when v3 comes out. As of now, you'd need to treat the service as a category itself, which might not be the desired behavior.

[gh4l3b]

Hi @orestbida the discussion you shared is helpful. However I am still confused.
Where should I place the Google tag and analytics scripts in which file? this is the first part of the question that I posted above.
The only tag that I have in GTM is Facebook pixels how do I manage that. When you mentioned .loadScript() do you mean for Facebook?
For the toggle feature its okay I can manage until the new update is released.

Please help me with the previous questions.

[orestbida]

Here is a specific example with google's consent mode:

const cc = initCookieConsent();

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
 
// Disable analytics and ads by default.
gtag('consent', 'default', {
    'ad_storage': 'denied',
    'analytics_storage': 'denied'
});

// Load google tag manager
cc.loadScript('https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID', function(){});

// configure & run plugin
cc.run({
    // your config. options ...

    onAccept: function(){
        if(cc.allowedCategory('analytics')){
            gtag('consent', 'update', {
                'analytics_storage': 'granted'
            });
        }
    
        if(cc.allowedCategory('ads')){
            gtag('consent', 'update', {
                'ad_storage': 'granted'
            });
        }
    },

    onChange: function(){
        if(cc.allowedCategory('analytics')){
            gtag('consent', 'update', {
                'analytics_storage': 'granted'
            });
        }else{
            gtag('consent', 'update', {
                'analytics_storage': 'denied'
            });
        }

        if(cc.allowedCategory('ads')){
            gtag('consent', 'update', {
                'ad_storage': 'granted'
            });
        }else{
            gtag('consent', 'update', {
                'ad_storage': 'denied'
            });
        }
    },
    
    // other config options ...
}

For this to work, you'd need to create the analytics and ads categories and properly configure google consent mode inside GTM so that when ad_storage is enabled => load facebook pixel.

Are you loading Google Analytics outside of GTM? if so, then you'd also need to load that manually using .loadScript().

[gh4l3b]

Yes you are right I am loading Google anaytics outside of GTM. The only tag I have in GTM is Facebook pixel and I use it also to send click events from some of the pages.

As you can see in the image I only have Facebook tag.
Other scripts I want to run them within cookieconsent-init.js, based on your example above here is my current configuration.
I don`t know if I am loading this correctly Accept and reject and change. Another thing I noticed I have www.googletagmanager.com appear twice one for UA and one for GA4? I this normal.

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

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}

// Load google tag manager
//cc.loadScript('https://www.googletagmanager.com/gtm.js?id=GTM-xxxxxx', function(){});

// run plugin with config object
cc.run({
    current_lang : 'de',
    autoclear_cookies : true,                   // default: false
    cookie_name: 'cc_cookie_demo1',             // 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: true,
    // 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: 'cloud',                      // box,cloud,bar
            position: 'bottom center',           // 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(){
        if(cc.allowedCategory('analytics')){
            cc.loadScript('https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxx', function(){
                window.dataLayer = window.dataLayer || [];
                function gtag(){window.dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', 'G-xxxxxxxx');
            });
        }

        if(cc.allowedCategory('advertising')){
            cc.loadScript('https://www.googletagmanager.com/gtm.js?id=GTM-xxxxxxxx', function(){
                window.dataLayer = window.dataLayer || [];
                function gtag(){window.dataLayer.push(arguments);}
                gtag('consent', 'update', {
                    'ad_storage': 'granted'
                });
                dataLayer.push({'event': 'ad_storage'});
            });
        }
    },

    onChange: function(){
        if(cc.allowedCategory('analytics')){
            cc.loadScript('https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx', function(){
                window.dataLayer = window.dataLayer || [];
                function gtag(){window.dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', 'G-xxxxxxxxxx');
            });
        }

        if(cc.allowedCategory('advertising')){
            cc.loadScript('https://www.googletagmanager.com/gtm.js?id=GTM-xxxxxxxxx', function(){
                window.dataLayer = window.dataLayer || [];
                function gtag(){window.dataLayer.push(arguments);}
                gtag('consent', 'update', {
                    'ad_storage': 'granted'
                });
                dataLayer.push({'event': 'ad_storage'});
            });
        }
    },

    languages: {
        'de': {
            consent_modal: {
                title: 'Wir verwenden Cookies!',
                description: 'die unbedingt erforderlich sind, um Ihnen unsere Website zur Verfügung zu stellen. Wenn Sie Ihre Zustimmung erteilen, verwenden wir zusätzliche Cookies, um zum Zwecke der Statistik (z.B. Reichweitenmessung) und des Marketings (z.B. Anzeige personalisierter Inhalte) Informationen zu Ihrer Nutzung unserer Website zu verarbeiten. Hierzu erhalten wir teilweise von Google weitere Daten. Weiterhin ordnen wir Besucher über Cookies bestimmten Zielgruppen zu und übermitteln diese für Werbekampagnen an Google. Detaillierte Informationen finden Sie in unserer <a href="/datenschutz" class="cc-link">Datenschutzerklärung</a>. Ihre Zustimmung ist freiwillig und für die Nutzung der Website nicht notwendig. Durch Klick auf <button type="button" data-cc="c-settings" class="cc-link">Einstellungen anpassen</button>',
                primary_btn: {
                    text: 'Alle akzeptieren',
                    role: 'accept_all'              // 'accept_selected' or 'accept_all'
                },
                secondary_btn: {
                    text: 'Alle ablehnen',
                    role: 'accept_necessary'        // 'settings' or 'accept_necessary'
                }
            },
            settings_modal: {
                title: 'logo',
                save_settings_btn: 'Einstellungen speichern',
                accept_all_btn: 'Alle akzeptieren',
                reject_all_btn: 'Alle ablehnen',
                close_btn_label: 'Schließen',
                cookie_table_headers: [
                    {col1: 'Name'},
                    {col2: 'Domain'},
                    {col3: 'Ablauf'},
                    {col4: 'Beschreibung'}
                ],
                blocks: [
                    {
                        title: 'Privatsphäre-Einstellungen 📢',
                        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. For more details relative to cookies and other sensitive data, please read the full <a href="#" class="cc-link">privacy policy</a>.'
                    }, {
                        title: 'Leistungs- und Analyse-Cookies',
                        description: 'Diese Cookies ermöglichen es der Website, sich an die von Ihnen in der Vergangenheit getroffenen Auswahlen zu erinnern',
                        toggle: {
                            value: 'analytics',     // there are no default categories => you specify them
                            enabled: false,
                            readonly: false
                        },
                        cookie_table: [
                            {
                                col1: '^_ga',
                                col2: 'google.com',
                                col3: '2 years',
                                col4: 'description ...',
                                is_regex: true
                            },
                            {
                                col1: '_gid',
                                col2: 'google.com',
                                col3: '1 day',
                                col4: 'description ...',
                            }
                        ]
                    }, {
                        title: 'Cookies für Werbung und Zielgruppenansprache',
                        description: 'Diese Cookies sammeln Informationen darüber, wie Sie die Website nutzen, welche Seiten Sie besucht und welche Links Sie angeklickt haben. Alle Daten sind anonymisiert und können nicht verwendet werden, um Sie zu identifizieren',
                        toggle: {
                            value: 'advertising',
                            enabled: false,
                            readonly: false
                        },
                        cookie_table: [             // list of all expected cookies
                            {
                                col1: 'fbp',
                                col2: 'facebook.com',
                                col3: '3 Monate',
                                col4: 'Wird verwendet, um Besuche auf verschiedenen Websites zu speichern und zu verfolgen.',
                            }
                        ]
                    },
                ]
            }
        }
    }

});