orestbida / cookieconsent

:cookie: Simple cross-browser cookie-consent plugin written in vanilla js
https://playground.cookieconsent.orestbida.com/
MIT License
3.68k stars 387 forks source link

[Bug]: Compatibility with GA4 consent and services #652

Closed MelCCI closed 4 months ago

MelCCI commented 4 months ago

Expected Behavior

You can choose between different categories, and only the categories you select will appear as granted in the Google Analytics consent mode. image image image

Current Behavior

Even if you check only certain categories, they will all appear in the modes consent because this does not filter out the cookie.services section. image image image

Steps to reproduce

Setup following CookieConsent, then configure Google Analytics with consent mod depending on cc_cookie

CookieConsent.run({ guiOptions: { consentModal: { layout: "box", position: "bottom left", equalWeightButtons: true, flipButtons: true }, preferencesModal: { layout: "box", position: "right", equalWeightButtons: true, flipButtons: false } }, categories: { necessary: { readOnly: true }, analytics: {}, ads: {} }, language: { default: "fr", autoDetect: "browser", translations: { fr: { consentModal: { description: "Chez Stores-et-rideaux.com, nous utilisons les cookies nécessaires pour faciliter votre navigation.", acceptAllBtn: "ACCEPTER ET FERMER", acceptNecessaryBtn: "Refuser", showPreferencesBtn: "Personnaliser" }, preferencesModal: { title: "Choisir les cookies à accepter", acceptAllBtn: "Tout Accepter", acceptNecessaryBtn: "Refuser", savePreferencesBtn: "Accepter et fermer", closeIconLabel: "Close modal", serviceCounterLabel: "Service|Services", sections: [ { title: "Essentiels", linkedCategory: "necessary" }, { title: "Analytics", linkedCategory: "analytics" }, { title: "Ads", linkedCategory: "ads" }, ] } } } }); });

Proposed fix or additional info.

I finished by create a new cookie, to edit it myself and remove the services part. I think that google see the services part and use it too for gtag consent mod. When I remove manually the service part in cc_cookie it works fine (thats's why I'm able to reproduce it)

I've seen stories everywhere about services for categories, but nothing about the general service that encompasses all categories. I based myself on the github and the doc. https://cookieconsent.orestbida.com/reference/api-reference.html

Version

3.0.0-rc.15

On which browser do you see the issue?

Chrome

orestbida commented 4 months ago

Not sure I understand. How did you set up gtag? What does the plugin's cookie have to do with gtag?

MelCCI commented 4 months ago

When I accept cookies, it creates a cc_cookie in the site's cookies, and sends a Consent event to Google Tag Assistant, containing all the information needed to accept or reject certain cookies

Do you mean that we manage the sending of gtag with granted ourselves? We don't have any such system on our side I suppose the two are linked because if I delete categories it changes the content of the gtag by denying the elements not present

How is managed the checked information and sent to Google tag assistant if not by this system? image My problem is that no matter which categories I choose in preferences, I still get all the existing categories in granted

Thanks in advance

orestbida commented 4 months ago

Do you mean that we manage the sending of gtag with granted ourselves?

Yes, since the plugin doesn't come with any pre-configured service. The fact that you are actually getting some consent info means that you are actually loading the gtag script.

Also, there is no relation between the plugin's own cookie (cc_cookie by default) and the ones gtag/ga4 reads, so I don't see how you're getting a list of the accepted categories in the first place.

Here is an example setup of GTM with google consent mode v2.

You might have to change a few things, based on your needs. For example, if you don't use google ads, simply delete the script with the data-service="Google Ads" attribute.

MelCCI commented 4 months ago

Thank you for the quick answers to my problem. I managed to find the solution.

For those of you in the same situation, I took the problem the other way round and looked at the GA4 settings.

I changed the data search to a regular expression that only takes into account items inserted in categories

image

Thanks for your help

alexanderloewe commented 1 month ago

I think you could do something like this

{# Google Consent Mode V2 – Set Default #}
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}

        gtag('consent', 'default', {
            'personalization_storage': 'granted',
            'functionality_storage': 'granted',
            'security_storage': 'granted',
            'ad_storage': 'denied',
            'analytics_storage': 'denied',
            'ad_user_data': 'denied',
            'ad_personalization': 'denied'
        });
    </script>

{# Analytics #}
    Scripts here

{# Google Consent Mode V2 – Update #}
    <script type="text/plain" data-category="analytics" data-service="Analytics Tag Consent">
        gtag('consent', 'update', {
            'analytics_storage': 'granted'
        });
    </script>
    <script type="text/plain" data-category="marketing" data-service="Marketing Tag Consent">
        gtag('consent', 'update', {
            'ad_storage': 'granted',
            'ad_user_data': 'granted',
            'ad_personalization': 'granted' });
    </script>