Chome end of third-party cookies

[adriallongarriu]

Starting on January 4th 2024 chome will start blocking third-party cookies for 1% of users and for the Q3 2024 will be the 100%
https://developers.google.com/privacy-sandbox/blog/cookie-countdown-2023oct?hl=en

My principal concert is how will this affect my sites using Google Analytics or Google Tag Manager?
If i set a default consent:

gtag('consent', 'default', { 'ad_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalization': 'denied', 'analytics_storage': 'denied' });

And when the user accepts de banner i updated to:

<script type="text/plain" data-category="analytics">
gtag('consent', 'update', { 'ad_storage': 'granted' });
</script>

Is this correct? and how will be applied on other third-party cookies that don't use Consent Mode V2?

[orestbida]

@adriallongarriu, we're talking about third party cookies. We don't interact directly with third party cookies, those are set from external services and removed when the browser session ends. I assume nothing will change for us, since this plugin only handles first party cookies.

This is how I would implement google consent mode v2 using script tags:

<script 
    type="text/plain"
    data-category="necessary">

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

    gtag('consent', 'default', {
        ad_storage: 'denied',
        ad_user_data: 'denied',
        ad_personalization: 'denied',
        analytics_storage: 'denied',
        functionality_storage: 'denied',
        personalization_storage: 'denied',
        wait_for_update: 500
    });

    gtag('set', 'ads_data_redaction', true);
    gtag('set', 'url_passthrough', true);
</script>

<script
    type="text/plain"
    data-category="analytics"
    data-service="Google Analytics 4">

    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXX');

    gtag('consent', 'update', {
        personalization_storage: 'granted',
        functionality_storage: 'granted',
        analytics_storage: 'granted'
    });
    console.log("gtag: analytics_storage=granted");
</script>

<!-- Stop sending events to google analytics on opt-out -->
<script
    type="text/plain"
    data-category="analytics"
    data-service="!Google Analytics 4">

    window['ga-disable-G-XXXXXXXXXX'] = true;
    CookieConsent.eraseCookies(/^(_ga|gid|__utm)/);
    console.log("gtag: disable tracking");
</script>

<script
    type="text/plain"
    data-category="ads"
    data-service="Google Ads">

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

    gtag('consent', 'update', {
        ad_storage: 'granted'
    });

    console.log("gtag: ad_storage=granted");
</script>

<script
    type="text/plain"
    data-category="analytics"
    data-service="Google Analytics 4"
    async
    data-src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX">
</script>

[adriallongarriu]

Thanks for the help and the quick response. 👍

[pedrouran]

Hello @orestbida , I am using your consent plugin into a propietary development.

Is this method valid to get 2 greens in Google Analytics consent mode?

Thank you in advance.

[pedrouran]

I got the tags consent, so I guess it is enought for Google Consent V2, althought I still don't have the 2 greens on Analytics.

I will report it 48 hours later, it is the estimated time for detecting signals in Google Analytics.

[pedrouran]

Hello everyone,

Finally I got 2 greens in Google Analytics, and all its working normally.

Thank you all and especially @orestbida for sharing your knowelage.

[darkWolf-PR]

Right now, I´m mostly doing it this way:

    <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('consent', 'default', {
            'ad_user_data': 'denied',
            'ad_personalization': 'denied',
            'ad_storage': 'denied',
            'analytics_storage': 'denied',
            'wait_for_update': 500
        });
        /*gtag('set', 'url_passthrough', true);
        gtag("set", "ads_data_redaction", true);*/
        gtag('js', new Date());
        gtag('config', 'G-XXXXXXXXXX', {cookie_flags: flags});
        gtag('config', 'AW-XXXXXXXXXX', {cookie_flags: flags});
    </script>

    <script type="text/plain" data-category="analytics">
        window.dataLayer = window.dataLayer || [];
        function gtag(){ dataLayer.push(arguments); }
        gtag('consent', 'update', {'analytics_storage': 'granted'});
    </script>
    <script type="text/plain" data-category="!analytics">
        window.dataLayer = window.dataLayer || [];
        function gtag(){ dataLayer.push(arguments); }
        gtag('consent', 'update', {'analytics_storage': 'denied'});
        window['ga-disable-G-XXXXXXXXXX'] = true;
        CookieConsent.eraseCookies(/^(_ga|gid|__utm)/);
    </script>

    <script type="text/plain" data-category="targeting">
        window.dataLayer = window.dataLayer || [];
        function gtag(){ dataLayer.push(arguments); }
        gtag('consent', 'update', {'ad_storage': 'granted', 'ad_user_data': 'granted', 'ad_personalization': 'granted'});
    </script>
    <script type="text/plain" data-category="!targeting">
        window.dataLayer = window.dataLayer || [];
        function gtag(){ dataLayer.push(arguments); }
        gtag('consent', 'update', {'ad_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalization': 'denied'});
        CookieConsent.eraseCookies(/^(_ga|gid|__utm)/);
    </script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX / AW-XXXXXXXXXX"></script>

I´ve removed php code used for building this, as it´s only included if any G / AW tag is set and based on it, it decided which parts are used - not sure, if it´s right, but I´m granting ad_* parameters only when AW code for adwords is present.
Not using "url_passthrough" and "ads_data_redaction" till now as I kind of still not understand, what they do...

And I have no idea, if I have to have this in every script block:

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

?

Also, I´m not setting defaults and last script async via CC, because after reading whole a lot of stuff on Google, I think It does get some analytics data without cookies and I should be able to get these anonymous analytics that do not use cookies without any consents.

What do you think @orestbida ?

[orestbida]

As far as I know, the instruction gtag('consent', 'update' ... does not immediately update your preferences. It only takes effect if the update happens within the specified wait_for_update time.

With your current config., when a user initially expresses consent and accepts the analytics category, the tracking won't take place until the next page reload. This is because the gtag('consent', 'update) instruction is essentially ignored, given that a default consent is already loaded and enabled.

At the very least this was the behavior I noticed 1 year ago, perhaps it is different now.

Google analytics/gtm were not built to be used alongside consent tools, and while google consent mode does help a bit
, it's still far from perfect.

[darkWolf-PR]

@orestbida I´ve been messing a bit with https://tagassistant.google.com/

When I dump all the cookies for the page and load it with tagassistant, I get these events(they have em reversed - from bottom...):

1. Consent
2. Consent Initialization
3. Container Loaded
4. Config
5. DOM Ready
6. Window Loaded

• these are without interaction from user, consent set as "on-page default" = denied

Then, when I click on Accept All... (definitely not instant action, TagAssistent takes some time to load etc...), 2 more events pop up:

7. Consent
8. user_engagement

• point 7 gets API call "consent", "update" and sets On-page Update as "granted" for the selected storage/all of them

Not sure, how much time is it - 500ms? how to count it...but I have waited quite a bit before accepting.

[orestbida]

Oh, so the update is detected after the time out, interesting.

And I have no idea, if I have to have this in every script block:

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

You can avoid repeating this snippet, as long as you've declared once at the top (which you did).

[axelf]

I think with consent mode 2 we don't need the text/plain attribute within the script tag, because the "granted" or "denied" values decide (in combination with the correct implementation of the tag in the GTM Backend) if data are being tracked

[ibarral]

Hello! I'm trying to configure GTM as mentioned in this comment:

#634 (comment)

And apparently GTM receives the gta event that updates the consent, but still won't load the script that requieres an specific consent. This is how I setup a test tag:

https://share.cleanshot.com/8ZwcC1P8

This is what I see on Google Tag Assistant (analytics_storage is granted "on-page update" and in "current state"):

https://share.cleanshot.com/7CNGRLc3

But still the tag is not fired:

https://share.cleanshot.com/dYv8PX8J // https://share.cleanshot.com/v7sTVgPd

What I'm missing?

Thanks!

[nyccp]

@orestbida
thank you for your solution. where do I have to put the scripts in next js 14? can you help me with that?
I am a little confused with the docs

[orestbida]

@nyccp, you shouldn't use script tags in a react framework. Instead you'll have to rely on callbacks/events.

For example, these 2 script tags:

<script type="text/plain" data-category="analytics">
    window.dataLayer = window.dataLayer || [];
    function gtag(){ dataLayer.push(arguments); }
    gtag('consent', 'update', {'analytics_storage': 'granted'});
</script>
<script type="text/plain" data-category="!analytics">
    window.dataLayer = window.dataLayer || [];
    function gtag(){ dataLayer.push(arguments); }
    gtag('consent', 'update', {'analytics_storage': 'denied'});
    window['ga-disable-G-XXXXXXXXXX'] = true;
    CookieConsent.eraseCookies(/^(_ga|gid|__utm)/);
</script>

can be converted to the event version:

import { eraseCookies } from 'vanilla-cookieconsent';

const enableAnalytics = () => {
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments); }
  gtag('consent', 'update', {'analytics_storage': 'granted'});
}

const disableAnalytics = () => {
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments); }
  gtag('consent', 'update', {'analytics_storage': 'denied'});
  window['ga-disable-G-XXXXXXXXXX'] = true;
  eraseCookies(/^(_ga|gid|__utm)/);
}

window.addEventListener('cc:onConsent', ({ detail }) => {
  if (detail.cookie.categories.includes('analytics')) {
    enableAnalytics();
  }
});

window.addEventListener('cc:onChange', ({ detail }) => {
  if (detail.changedCategories.includes('analytics')) {
    if (detail.cookie.categories.includes('analytics')) {
      enableAnalytics();
    } else {
      disableAnalytics();
    }
  }
});

Make sure you execute the above code once, perhaps in the root layout or in the App object.

If you need further help, please open a new discussion.

[nyccp]

thanks @orestbida for your quick reply, I will try it and keep you updated how my progress on that is - I have read about putting scripts into the _document.js part, but this looks much better!!