How to set script with default consent and then activate? (V3)

[darkWolf-PR]

Hi, I can´t find a way how to set CookieConsent with this retargeting script - this is the base version:

<script type="text/javascript" src="https://c.seznam.cz/js/rc.js"></script>
<script>
var retargetingConf = {rtgId: 123456};
if (window.rc && window.rc.retargetingHit) {
    window.rc.retargetingHit(retargetingConf);
}
</script>

It should run like this before consent is given(it sends default param consent: -1)

After consent is given(or not), there should be variable consent with 1 or 0:

I tried it like this:

        <script type="text/javascript" src="https://c.seznam.cz/js/rc.js"></script>
        <script>
            var retargetingConf = {rtgId: 123456};
            if (window.rc && window.rc.retargetingHit) {
                window.rc.retargetingHit(retargetingConf);
            }
        </script>
        <script type="text/plain" data-category="targeting">
            var retargetingConf = {rtgId: 123456, consent: 1};
            if (window.rc && window.rc.retargetingHit) {
                window.rc.retargetingHit(retargetingConf);
            }
        </script>
        <script type="text/plain" data-category="!targeting">
            var retargetingConf = {rtgId: 123456, consent: 0};
            if (window.rc && window.rc.retargetingHit) {
                window.rc.retargetingHit(retargetingConf);
            }
        </script>

It will set the consent after accepting the category, but no way I can find how to jump over the base script when consent is already set. This way, it always runs twice, first without consent and after that again, with consent 1 or 0 and that´s just wrong. So this is definitely not the way to do it, but I can´t find any other.

I have basic setup for V3 from manual ( https://cookieconsent.orestbida.com/essential/getting-started.html ), added rc.16 umd.js and cookieconsent-init.js scripts and init set like:
CookieConsent.run({ ... })

Anyone can help? I´m not much JS guy, anything I tried ended with "undefined this, undefined that", I´ve been messing with this for several hours.

[orestbida]

Hi @darkWolf-PR,

There are 2 ways to handle scripts/cookies:

1. using script tags (simple but limited)
2. using callback functions or events

This particular case can be implemented using events/callbacks. Example using events (should do exactly what you asked):

<script type="text/javascript" src="https://c.seznam.cz/js/rc.js"></script>
<script>

    var retargetingConf = {rtgId: 123456};

    window.addEventListener('load', () => {
        if(!CookieConsent.validConsent()) {
            if (window.rc && window.rc.retargetingHit) {
                window.rc.retargetingHit(retargetingConf);
            }

            console.log('Invalid consent:', retargetingConf);
        }
    });

    window.addEventListener('cc:onConsent', () => {

        const targetingEnabled = CookieConsent.acceptedCategory('targeting') ? 1 : 0;

        retargetingConf = {rtgId: 123456, consent: targetingEnabled};
        if (window.rc && window.rc.retargetingHit) {
            window.rc.retargetingHit(retargetingConf);
        }

        console.log('onConsent targetingEnabled:', targetingEnabled, retargetingConf);
    });

    window.addEventListener('cc:onChange', ({ detail }) => {

        const { changedCategories } = detail;

        if(!changedCategories.includes('targeting'))
            return;

        const targetingEnabled = CookieConsent.acceptedCategory('targeting') ? 1 : 0;

        retargetingConf = {rtgId: 123456, consent: targetingEnabled};
        if (window.rc && window.rc.retargetingHit) {
            window.rc.retargetingHit(retargetingConf);
        }

        console.log('onChange targetingEnabled:', targetingEnabled, retargetingConf)
    });

</script>

Feel free to remove the console.log calls.

[darkWolf-PR]

Thanks a lot, this seems to be doint it right.

One small question - how can this be done if u use configuration from V3 demo page (where it is using cookieconsent-config.js with type="module") and imported ESM.js?

import { run } from 'https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/cookieconsent.esm.js';

run({ ...

This ways, it says CookieConsent is not defined. Whis is true i suppose. I tested it this way at first, but as I couldn´t find a reference, i changed it to setup from manual page.

[orestbida]

The ESM format, unlike UMD, doesn't expose the plugin to the window object. You could manually attach it to the window object, but at that point it would just be easier to use the UMD variant.

So simply import the UMD version like so:

import 'https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/cookieconsent.umd.js';

CookieConsent.run({...});

Now, the CookieConsent object can be accessed from any script;

I will update the demo, so that it uses the UMD format by default.

[darkWolf-PR]

Aaah, that´s it. It was kind of confusing for someone, who doesn´t know how this works.

[darkWolf-PR]

@orestbida I´ve been implementing GA4+AW scripts via GTAG after this one and I have a connected question - I have set it like this (found samewhere around in manual, issues like #110 and demos):

    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){ dataLayer.push(arguments); }
        gtag('consent', 'default', {
            'analytics_storage': 'denied',
            'ad_storage': 'denied',
            'wait_for_update': 500
        });
    </script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-123456789"></script>
    <script>
        let flags = 'max-age=7200;secure;samesite=none'
        if (document.location.protocol !== 'https:') { flags = 'max-age=7200;samesite=none';}
        window.dataLayer = window.dataLayer || [];
        function gtag(){ dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-123456789');
        gtag('config', 'AW-123456789');
    </script>
    <script type="text/plain" data-category="analytics">
        gtag('consent', 'update', {'analytics_storage': 'granted'});
   </script>
    <script type="text/plain" data-category="!analytics">
        gtag('consent', 'update', {'analytics_storage': 'denied'});
    </script>
    <script type="text/plain" data-category="targeting">
        gtag('consent', 'update', {'ad_storage': 'granted'});
    </script>
    <script type="text/plain" data-category="!targeting">
        gtag('consent', 'update', {'ad_storage': 'denied'});
    </script>

And it kind of implies me, that it works just as wrong as that my original retargeting code on top - on every page load, consent is set as denied at first and than changed. Or do I get it wrong? Cause I did not found any demo, that has it implemented with check on validConsent on load?

[orestbida]

It looks fine to me.

Note that due to gtm's nature, if you want the tracking to start/stop immediately (e.g. when the user enables/disables analytics), you'll have to also reload the page.

[darkWolf-PR]

I found this video: https://support.google.com/tagmanager/answer/10718549

Based on it, I got idea it should be better to make it something like this, not sure if it´s right:

    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){ dataLayer.push(arguments); }

        window.addEventListener('load', () => {
            if(!CookieConsent.validConsent()) {
                gtag('consent', 'default', {
                    'analytics_storage': 'denied',
                    'ad_storage': 'denied',
                    /*'wait_for_update': 500*/
                });

                console.log('Invalid consent:', 'no consent');
            } else {
                gtag('consent', 'default', {
                    'analytics_storage': CookieConsent.acceptedCategory('analytics') ? 'granged' : 'denied',
                    'ad_storage': CookieConsent.acceptedCategory('targeting') ? 'granged' : 'denied',
                    /*'wait_for_update': 500*/
                });
                
                console.log('Invalid consent:', 'already set consent');
            }
        });
    </script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-123456789"></script>
    <script>
        let flags = 'max-age=7200;secure;samesite=none'
        if (document.location.protocol !== 'https:') { flags = 'max-age=7200;samesite=none';}
        window.dataLayer = window.dataLayer || [];
        function gtag(){ dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-123456789', { cookie_flags: flags });
        gtag('config', 'AW-123456789', { cookie_flags: flags });
        
        window.addEventListener('cc:onChange', ({ detail }) => {

            const { changedCategories } = detail;

            if(!changedCategories.includes('analytics') && !changedCategories.includes('targeting') )
                return;

            gtag('consent', 'update', {
                'analytics_storage': CookieConsent.acceptedCategory('analytics') ? 'granged' : 'denied',
                'ad_storage': CookieConsent.acceptedCategory('targeting') ? 'granged' : 'denied'
            });

            console.log('onChange test:', 'updated')
        });
    </script>

When I looked through issues, I´ve found that someone does something pretty similar for FB pixel - like this:

!function(f,b,e,v,n,t,s){ if(f.fbq)return;n=f.fbq=function(){ n.callMethod?
                n.callMethod.apply(n,arguments):n.queue.push(arguments)};
                if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
                n.queue=[];t=b.createElement(e);t.async=!0;
                t.src=v;s=b.getElementsByTagName(e)[0];
                s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js');

            // fb consent
            let ccSettings = document.cookie.match(RegExp('cc_cookie=.[^;]*'));
            ccSettings = ccSettings ? JSON.parse(decodeURIComponent(ccSettings[0]).split('=')[1]) : {};
            fbq('consent', ccSettings.categories && ccSettings.categories.length && -1 !== ccSettings.categories.indexOf('targeting') ? 'grant' : 'revoke');

        fbq('init', '123456789');
        fbq('track', 'PageView');

It also checks for the consent status before setting it one way or another.

I´ve read through a lot of Google docs and I did not found anything about the need to reload page after setting the consent.