How to correctly setup Google Consent mode v2 with Zaraz?

Greatings, first of all thanks for Zaraz team for this tool, looks like nice replacement for GTM, and I really believe that this is the future of the tracking. Unfortunately for last 2 days I’m trying to set-up test environment with Zaraz implementation, in order to check if it can potentially replace GTM for us. I have limited time for this task and it seems that with Zaraz, configuring google consent mode v2 can be a bit challanging or even frustrating.
I need to mention that I never set up something like that before, so maybe this is the main reason why everything that someone sees as obvious is unclear to me.
I read Google Consent Mode · Cloudflare Zaraz docs docs and didn’t get it, how it supposed to work. I need to mention that I have configured consent with modal on Zaraz, but it appears for each pageview and all the time I need to give consent, I don’t know why but cookie with given consent clears after a half of minute or so. Now my goal that is when user clicks on some purpose(group) and consents all related tools fires and works fine, when didn’t tools working without cookies. So I read on topics, still didn’t get it how to properly configure it, but in one of such I understood that I need to has 2 versions of each tool to activate those with blocked or active cookies. But what about consent mode, analytics4 and google ADS already demands consent mode pings to be sent in specific format. So I would like to clarify:
zaraz.set(“google_consent_default”, {
‘ad_storage’: ‘denied’,
‘ad_user_data’: ‘denied’,
‘ad_personalization’: ‘denied’,
‘analytics_storage’: ‘denied’
})
zaraz.set(“google_consent_update”, {
‘ad_storage’: ‘granted’,
‘ad_user_data’: ‘denied’,
‘ad_personalization’: ‘granted’,
‘analytics_storage’: ‘denied’
})

  • those code snippets has to be integrated on Zaraz side with some tool to bind with user consents in modal or on website and write there custom logic that tracks for what types of cookies has been granted consent?
  • second how that consent must be sent to the GA4 or Google ADS? I understand that maybe my questions can be stupid, but I need to figure this out, and better sooner than later.
  • and in documentation is sad that consent mode v2 is automatically supported, but what I need to setup in my tools, what to change, how consent mode understad which of my puproses equivalent to default consent storages set by google?
    Thanks for you answer, I really appreciate that.

Hey,

I’m with you I’ve been trying to get clarity on that as well and I’ve not seen any confirmations from anyone that they were able to get rid of the notices in GA.

However I just implemented this, which theoretically makes sense to me, but I don’t know a way to debug it, except to wait for GA to show it.

<script>
  const cookiesSet = (val) => !!val;
  const isEuCountry = (val) => val === 1;

  const updateButtonDisplay = () => {
    const host = document.querySelector('.cf_modal_container').shadowRoot;
    const button = host.getElementById('cf_consent-buttons__save');
    button.style.display = (host.getElementById('checkbox-0').checked && host.getElementById('checkbox-1').checked) ? 'none' : 'block';
  };

  const handleZarazConsentAPIReady = () => {
    const consentHasBeenSet = cookiesSet({{ system.cookies.cf_consent }});

    zaraz.set("google_consent_default", {
      'ad_storage': 'denied',
      'ad_user_data': 'denied',
      'ad_personalization': 'denied',
      'analytics_storage': 'denied'
    });

    if (isEuCountry({{system.device.location.isEUCountry}})) {
      if (!consentHasBeenSet) {
        zaraz.consent.modal = true;
        zaraz.consent.setAllCheckboxes(true);
        const host = document.querySelector('.cf_modal_container').shadowRoot;
        host.querySelector('#checkbox-0').addEventListener('change', updateButtonDisplay);
        host.querySelector('#checkbox-1').addEventListener('change', updateButtonDisplay);
      }
    } else {
      zaraz.set("google_consent_update", {
        'ad_storage': 'granted',
        'ad_user_data': 'granted',
        'ad_personalization': 'granted',
        'analytics_storage': 'granted'
      });
      zaraz.consent.setAll(true);
      zaraz.consent.sendQueuedEvents();
    }
  };

  const zarazConsentChoicesUpdated = () => {
    const consent = zaraz.consent.getAll();
    zaraz.set("google_consent_default", {
      'ad_storage': "granted",
      'ad_user_data': consent.lqVu ? "granted" : "denied",
      'ad_personalization': "granted",
      'analytics_storage': consent.ntGo ? "granted" : "denied"
    });
  };

  const initZarazConsent = () => {
    if (zaraz.consent?.APIReady) {
      handleZarazConsentAPIReady();
    } else {
      document.addEventListener("zarazConsentAPIReady", handleZarazConsentAPIReady);
    }
    document.addEventListener("zarazConsentChoicesUpdated", zarazConsentChoicesUpdated);
  };

  initZarazConsent();
</script>

I’ve the GA and GAds tools set up quite normal, but I need them to send data, even when no consent choice has been made (pageview without consent) so I couldn’t make the tools dependent on a purpose. That’s why I added 2 Empty HTML Tools each of them dependent on either ad_user_data or ad_personalization purpose, else my modal wouldn’t show up.

Let’s work together and try to figure that out.