Google CMP certification

[Massi03dev]

Hi,

First of all, thank you for the great work on django-cookie-consent! It has been really helpful for our project.

We were wondering if there are any plans to obtain Google CMP certification in the future. Is this something that might be considered?

Thanks again for maintaining this project!

[sergei-maertens]

I'm unfamiliar with Google CMP - can you explain what it is and share some resources + explain what the benefit of such a certification would be?

[Massi03dev]

Thank you for your reply!

Google CMP (Consent Management Platform) certification refers to compliance with Google’s policies for managing user consent, especially in the context of personalized ads in the EEA and UK under GDPR and the Digital Markets Act. Certified CMPs are required if you’re using services like Google AdSense or Ad Manager.

The main benefit for us—as developers and users of django-cookie-consent—would be the ability to use a single, unified consent banner for both analytics and advertising purposes. Currently, we’re forced to implement two separate solutions: one for GDPR-compliant consent (via django-cookie-consent), and a second CMP-certified banner for Google services. This leads to a confusing user experience and redundant technical effort.

Here are some resources that explain Google’s certification:
• Google CMP requirements
• List of certified CMPs
• IAB Europe’s TCF v2.2

Integrating TCF support and pursuing certification would make django-cookie-consent far more versatile, especially for sites that rely on both analytics and advertising.

Let me know if you would like other resources!

[some1ataplace]

Here is a good summary of why we should be implementing CMP:
https://secureprivacy.ai/blog/google-certified-cmp-new-publisher-consent-requirements

There are multiple ways to go about doing this, and I am very curious from everyone that reads this if there are better ways to solution this with Django and JavaScript.

You have the choice of using Google Tag Manager or adding gtag.js coding snippets from the Google service of your choice (Analytics, Adsense, Recaptcha Enterprise, etc.) individually.

Think of Google Tag Manager as a toolbox or container where we can manage all of the individual Google services in one place. This may sound good in theory, but in my opinion, in the context of cookie management, if you want more control of exactly what third party cookies you want to bring into your browser and when exactly they should appear in the browser then I would avoid using Google Tag Manager. Imagine if you want to accept only 1 cookie group. Since Google Tag Manager is a container, you pretty much have to load the entire container in 1 shot which may bring in other third party cookies into the browser that you do not want.

Anyways, we still need to use the Google Tag Manager Tag Assistant to test this Consent Mode stuff. However, supposedly Consent Mode grant and deny flags that you will see in Google Tag Manager Tag Assistant during testing are smart enough to 'activate' the third party cookies that belong to that particular Consent Mode flag. For example, Google Analytics requires 'ad_storage', 'ad_personalization', 'ad_user_data' and 'analytics_storage' to be granted in order for the Google Analytics cookies to be activated. So you can use Google Tag Manager if you wish. But in my opinion, I still do not trust it completely.

Google Tag Manager in general also requires a lot of training to use on its own. I found it very difficult to use when trying to figure out how to configure stuff. The Google documentation is not that helpful either. Supposedly, there are ways to configure most of what you need to do entirely in Google Tag Manager by setting up tags, triggers, variables, templates, and all sorts of other stuff. This may be helpful for the less technical folks, but for us technical folks, seemed like a nightmare to setup.

First, we need to understand what ID's we should use from the Google Services.

In Google Tag Manager in between the logo and the search bar is your container. Click on this to find your container ID.

In Google Analytics, go to Admin -> Data Streams -> Select your website -> Find the Measurement ID.

In Google Adsense, go to Account Information -> Find the Publisher ID.

In Google Console (Recaptcha Enterprise) you need to get the following:

• Get your project ID by clicking on your project next to the Google Cloud Console logo.
• Grant "Recaptcha enterprise agent" role based access control -> https://console.cloud.google.com/iam-admin/iam?project=<YOUR-PROJECT-NAME-HERE>
• Create and get your Recaptcha Enterprise API Key -> https://console.cloud.google.com/apis/credentials
• Create and get your Recaptcha Enterprise Site Key -> https://console.cloud.google.com/security/recaptcha?project=<YOUR-PROJECT-NAME-HERE>

https://stackoverflow.com/questions/66755108/recaptcha-secret-key-where-is-it-in-my-google-cloud-recaptcha-account

Next, setup your Google Tag Manager tags.

In Google Tag Manager, setup Google Analytics Tag:
Tag Type: Google Analytics GA4 Event
Measurement ID:
Event Name: You will have to pick one of the many events that Google Analytics provides. Some examples: https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtag or https://support.google.com/analytics/answer/9267735?hl=en
(I picked page_view for an event name).
Trigger: All Pages

In Google Tag Manager, setup Consent Initialization Tag:
Tag Type: Google Tag
Tag ID: <YOUR-MEASUREMENT-ID>
Trigger: Consent Initialization - All Pages

In Google Tag Manager, setup Google Ads Conversion Tracking Tag:
Tag Type: Google Ads Conversion Tracking
Conversion ID: (requires live site, not available for testing in localhost)
Conversion Label: (requires live site, not available for testing in localhost)
Trigger: All Pages

In Google Tag Manager, setup Google Adsense Tag:
Tag Type: Custom HTML
HTML: Paste in JavaScript code provided by Adsense
Additional Consent Checks: Require Additional Consent For Tag To Fire: ad_storage

Some useful features in the tag configuration are under Advanced and Consent Settings. You can see built in consent checks and additional consent checks (flags) that are required to 'activate' this tag within Google Tag Manager.

On https://tagmanager.google.com/ on the right you will see a link for your container ID. Click this to reveal JavaScript code for how to setup Google Tag Manager on your site. To test if Google Tag Manager actually works, you must use the Preview button on the right and enter the Tag Assistant tester. I used ngrok to test. Also, before clicking Preview, be sure to click Submit to submit any new Google Tag Manager tag changes you made.

The key thing to keep in mind is we need a way for the JavaScript consent mode settings to be persisted on browser refreshes based on the user's accept/decline behavior. I opted for using browser localstorage for this, but curious if another method of persistence would be better. We need to set a default and we need to update the consent mode setting parameters whenever the user interacts with cookies on your site (accepting or declining all cookies from the cookie bar or accepting or declining individual cookie groups). Another thing to worry about is JavaScript can't access the cookie_cookie if it is set with the HttpOnly flag. Some users may not like having localstorage being populated in their browser. One idea is to delete the localstorage key value pair when cookie_consent cookie gets deleted.

https://developers.google.com/tag-platform/security/guides/consent?consentmode=advanced

In Tag Assistant, you will see a bunch of steps on the left, but the thing we care about most for Consent Mode is the Output's Consent tab to see what flags got granted or denied during that particular step.

Template code:

{% load cookie_consent_tags %}

    <script>
      // Initialize the dataLayer and gtag function
      window.dataLayer = window.dataLayer || [];
      function gtag() { dataLayer.push(arguments); }
      
      // This JSON is rendered by your Django context processor
      const serverConsentState = {{ google_consent_state_json }};

      // Function to update consent and store it in localStorage for persistence
      function updateConsent(consentState) {
        console.log('Updating consent:', consentState);
        gtag('consent', 'update', consentState);
        try {
          //create a localstorage key value pair
          localStorage.setItem('google_consent_state', JSON.stringify(consentState));
        } catch (e) {
          console.error('Could not save consent state to localStorage.', e);
        }
      }

      // --- Page Load Logic ---

      // Set the most restrictive default consent state immediately.
      // This ensures no tags fire with granted consent before we make a decision.
      gtag('consent', 'default', {
        'ad_storage': 'denied',
        'ad_user_data': 'denied',
        'ad_personalization': 'denied',
        'analytics_storage': 'denied',
        'functionality_storage': 'denied',
        'security_storage': 'denied',
        'personalization_storage': 'denied',
        'wait_for_update': 500 // Optional: Wait 500ms for async updates
      });
      

      // Now, update consent with the definitive state from the server.
      // This will override the default and fire any queued tags.
      updateConsent(serverConsentState);

    </script>


{% if request.COOKIES.cookie_consent|cookie_group_accepted:"Ads" %}
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=<YOUR-ADSENSE-PUBLISHER-ID>" crossorigin="anonymous"></script>
{% endif %}

{% if request.COOKIES.cookie_consent|cookie_group_accepted:"Analytics" %}
<script async src="https://www.googletagmanager.com/gtag/js?id=<YOUR-GOOGLE-ANALYTICS-MEASUREMENT-ID>"></script>
<script nonce="{{request.csp_nonce}}">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '<YOUR-GOOGLE-ANALYTICS-MEASUREMENT-ID>', {
      'anonymize_ip': true
  });
</script>
{% endif %}


{% if not request.COOKIES.cookie_consent %}
<script>
//Delete localstorage key value pair when cookie_consent cookie is not in the browser. 
localStorage.removeItem('google_consent_state');
</script>
{% endif %}

Context Processor:

import json
from django.conf import settings
from django.utils.html import format_html
from django.utils.safestring import mark_safe

def google_consent_state(request):
    """
    Parses the HttpOnly cookie_consent and prepares a JSON object
    for the frontend gtag.js script.
    """
    # Define the default, most restrictive consent state.
    # This is used if the cookie is not set.
    consent_map = {
        'ad_storage': 'denied',
        'ad_user_data': 'denied',
        'ad_personalization': 'denied',
        'analytics_storage': 'denied',
        'functionality_storage': 'denied',
        'security_storage': 'denied',
        'personalization_storage': 'denied',
    }

    cookie_consent_value = request.COOKIES.get(settings.COOKIE_CONSENT_NAME)

    if cookie_consent_value:
        # Parse the cookie string: "Ads=1|Analytics=0" -> {'Ads': '1', 'Analytics': '0'}
        user_choices = dict(item.split('=') for item in cookie_consent_value.split('|'))
        
        # Get the mapping from settings
        google_mapping = settings.COOKIE_CONSENT_GOOGLE_MAPPING

        # Update the consent_map based on user choices
        for group_name, choice in user_choices.items():
            if choice == '1' and group_name in google_mapping:
                # User has granted consent for this group, update the map
                consent_map.update(google_mapping[group_name])

    # Use format_html with mark_safe to prevent double-escaping
    return {
        'google_consent_state_json': format_html('{}', mark_safe(json.dumps(consent_map))),
    }

settings.py:

COOKIE_CONSENT_GOOGLE_MAPPING = {
    "Ads": {
        "ad_storage": "granted",
        "ad_user_data": "granted",
        "ad_personalization": "granted",
    },
    "Analytics": {
        "analytics_storage": "granted",
    },
    "Google Tag Manager": {
        "functionality_storage": "granted",
    },
    "reCAPTCHA": {
        "security_storage": "granted",
    },
    "Stripe": {
        "functionality_storage": "granted",
    },
    "Youtube": {
        "personalization_storage": "granted",
    },
}

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,"templates")],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'cookie_consent.context_processors.google_consent_state', 
            ],
        },
    },
]

The above is using gtag.js and avoids using Google Tag Manager code that we got from https://tagmanager.google.com/. But if you want to use Google Tag Manager, you would add that Google Tag Manager code snippet that Google provides you to your code and you should be able to remove the {% if request.COOKIES.cookie_consent|cookie_group_accepted:"GROUPNAME" %} code snippets I have above since Google Tag Manager supposedly handles it for you with the grant/deny flags. I still prefer the extra cookie_group_accepted template tag filter for extra control and privacy of user cookies.

Another area of concern is how to setup the mapping of consent flags for each of your cookie groups. I did this within a setting variable, but some problems can occur like what if there are 2 functionality_storage cookie groups and a user declines one functionality_storage mapped group and accepts the other functionality_storage mapped group. Would the localstorage variable contain functionality_storage grant or declined? Maybe depending on the last user interaction (accept/decline) with any functionality_storage cookie group then you can leave that as the latest flag grant/deny setting in localstorage. I could just bite the bullet and literally setup general cookie groups like other Cookie Consent competitors do (example https://stripe.com/cookie-settings - Essential, Functional, Advertising), but I would lose the complete control of defining every single group individually for each of my third party services. I thought about setting up some database models to allow users in the django admin site to configure the type/category of consent mode settings mapping for each cookie group as an alternative to a settings variable.

Warning: I purposely in the code above left 2 functionality_storage groups in the mapping. With the above code, if the user accepts all cookies then declines the Stripe group then the functionality_storage will still remain as granted due to there being 2 functionality_storage mappings in the settings variable. This means if all groups that belong to functionality_storage are the same value of accepted/declined at the same time then the value of functionality_storage will change to granted/denied (it only gets updated when they are all the same value - all or nothing). You will not get the latest grant/deny value (from the user's latest interaction) if only one of the functionality_storage mapping group gets accepted/declined.

If you want all or nothing, then keep pass 1 code. If you want to change grant/denied flags based on every single user accept/decline interaction then keep both pass 1 and pass 2 code.

        # --- Pass 1: Tentatively GRANT consent based on user 'accept' choices ---
        # This loop runs first, setting storage to 'granted' if ANY corresponding group is accepted.
        for group_name, choice in user_choices.items():
            if choice == '1' and group_name in google_mapping:
                # User has granted consent for this group, update the map
                consent_map.update(google_mapping[group_name])

        # --- Pass 2: Forcefully REVOKE consent based on user 'decline' choices ---
        # This loop runs second. If a group is denied, it will override any 'granted'
        # state set in the first pass for the same storage type.
        for group_name, choice in user_choices.items():
            if choice == '0' and group_name in google_mapping:
                # User has denied this group. Revoke consent for all storage types it maps to.
                for storage_type in google_mapping[group_name].keys():
                    consent_map[storage_type] = 'denied'

Also be careful about race conditions about grant/deny flags firing or updating in different tags at different times. I was very confused to see in Tag Assistant tester that both Google Analytics tag and Google Tag Manager Container tag to fire at different times. I may be overthinking this part, and that is supposed to happen, but just be aware.

For production, I would go without Google Tag Manager, but for testing I would use Google Tag Manager and the code that comes with it in so you can see the grants/deny flags firing. Otherwise, it is harder to test and you would need to create each tag like Google Analytics separately within Google Tag Manager to see the tags firing just for that 1 tag only.

Google Tag Manager Provided Code:

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','YOUR-GOOGLE-TAG-MANAGER-CONTAINER-ID');</script>

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=YOUR-GOOGLE-TAG-MANAGER-CONTAINER-ID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

Any feedback would be appreciated. This took me a really long time to figure out, and I still wonder if my solution here really is adequate and the best possible way to go about this. Maybe it can be entirely done with JavaScript by itself or Django by itself. Hopefully this helps people.

Other Helpful Links:

https://www.youtube.com/watch?v=Weml0MiOk-o

https://www.youtube.com/watch?v=MqAEbshMv84

https://www.youtube.com/watch?v=H5dyrs84bIQ&t=82s

[sergei-maertens]

@some1ataplace that's a really good write-up that helps me understand what the user is trying to achieve and what it takes to get there.

@Massi03dev - thanks for the links and I can indeed see the benefits from being CMP-certified.

Now, I see a lot of work in @some1ataplace's post that's (of course) super specific to google services and I have a bit of a hard time picturing how much of this should be left to the project (users of django-cookie-consent) and what should be done on our side in the library. I'm pacticularly curious about the amount of effort/maintenance/commitment required by the maintainers of django-cookie-consent and if it's complex or a lot of work, whether that's a responsible action for us to take.

Can any of you outline the process to get here, roughly?

• Is there development required on django-cookie-consent's side. If so, what would be needed and how much time and effort would this cost?
• Who is responsible for starting the certification process? Looking at https://support.google.com/admanager/answer/13554020?sjid=3143211061605211178-EU this all seems pretty vague.
• Apparently, this requires re-certification every 12 months.

At this point in time, I'm (me, personally) not feeling particularly eager to take this upon me, so we would need another maintainer to step up and take responsibility of this.

So, to anser the initial question:

We were wondering if there are any plans to obtain Google CMP certification in the future. Is this something that might be considered?

There are no such plans. We can consider it if there's someone willing to back/own this and commit to maintaining it.