Skip to Content
InstallationCloudflare Zaraz

Cloudflare Zaraz

Cloudflare Zaraz is a tag management and script loading platform that runs third-party tools such as analytics, marketing pixels and chat widgets on Cloudflare’s edge network instead of in the browser. Its Consent Management module decides when each tool fires based on the visitor’s consent, so it can be driven by CookieHub: CookieHub collects the consent, and passes each category’s state to the matching Zaraz purpose.

This requires CookieHub 2.8.13 or later.

  1. Go to your Cloudflare dashboard.
  2. Navigate to Protect & Connect → Delivery & performance → Web tag management (Zaraz).
  3. Select Consent and choose the domain where you want to install CookieHub.
  1. Check Enable Consent Management.
  2. Uncheck Show consent modal and Use IAB TCF compliant modal. CookieHub provides the consent dialog, and the IAB TCF modal is only supported with the Zaraz modal.
  1. Scroll down to the Purposes section and click Add new purpose.
  2. Create a purpose for each cookie category your tags need. For most sites that is Analytics and Marketing.
  3. Enter a name and description for each purpose.
  4. Note the Purpose IDs. You need them when connecting CookieHub.

Step 4: Assign purposes to tools

  1. Scroll down to Assign Purposes to tools.
  2. Assign the right purpose to each tool that depends on consent.
  3. Save.

Zaraz now fires each of those tools only when CookieHub has granted consent for the matching category.

Step 5: Add CookieHub as a Custom HTML tool

Skip this step if CookieHub is already installed on the site by another method, and use the script under If CookieHub is already installed instead.

  1. Open Tag setup and choose the domain.
  2. Click Add new tool and choose Custom HTML.
  3. Give the tool a name, for example CookieHub CMP.
  4. Select Pageview as the firing trigger.
  5. In the script below, replace <domain-code> with your domain code, and replace <analytics-purpose-id> and <marketing-purpose-id> in COOKIEHUB_TO_ZARAZ_PURPOSES with the Purpose IDs from step 3. Remove any category you do not use.
  6. Paste the script into the HTML Code field and save.
// Remember to replace the <domain-code> with your CookieHub domain code 
<script src="https://cdn.cookiehub.eu/c2/<domain-code>.js"></script>
<script type="text/javascript">
window.COOKIEHUB_TO_ZARAZ_PURPOSES = {
  // CookieHub category -> array of Zaraz purpose IDs
  // Leave empty or remove categories that aren't used
  necessary:        [],
  preferences:      [],
  analytics:        ["<analytics-purpose-id>"],
  marketing:        ["<marketing-purpose-id>"],
  uncategorized:    []
};
 
var cpm = {
  onInitialise: function(status) {
    syncConsentToZaraz();
  },
  onStatusChange: function(status, previousStatus) {
    syncConsentToZaraz();
  }
}
if (window.cookiehub) {
window.cookiehub.load(cpm);
}
else {
    setTimeout(function () {
    if (window.cookiehub) {
      window.cookiehub.load(cpm);
    }
  }, 500);
}
 
// Build a Zaraz consent object from current CookieHub state
function buildZarazConsentFromCookieHub() {
  if (!window.cookiehub) {
    return {};
  }
 
  const consentPreferences = {};
 
  Object.entries(window.COOKIEHUB_TO_ZARAZ_PURPOSES).forEach(
    ([cookiehubCategory, zarazPurposes]) => {
 
      if (!Array.isArray(zarazPurposes) || zarazPurposes.length === 0) {
        return;
      }
 
      const allowed = window.cookiehub.hasConsented(cookiehubCategory);
 
      zarazPurposes.forEach((purposeId) => {
        consentPreferences[purposeId] = allowed;
      });
    }
  );
 
  return consentPreferences;
}
 
// Apply CookieHub state to Zaraz
function syncConsentToZaraz() {
  if (!window.cookiehub || !window.zaraz || !window.zaraz?.consent?.APIReady) {
    return;
  }
 
  const consentPreferences = buildZarazConsentFromCookieHub();
 
  // Set consent per purpose in Zaraz
  window.zaraz.consent.set(consentPreferences);
 
  //console.log("Synced CookieHub consent to Zaraz:", consentPreferences);
}
 
document.addEventListener("zarazConsentAPIReady", () => {
  syncConsentToZaraz();
});
</script>

CookieHub and Zaraz are now connected. When a visitor changes their consent in CookieHub, the state is passed to Zaraz immediately and applies to every tool assigned to those purposes.

If CookieHub is already installed

If CookieHub is already on the site, for example in the page HTML or through Google Tag Manager, do not install it a second time. Add only the sync script below, for example as a Custom HTML tool in Zaraz. Replace the Purpose IDs in COOKIEHUB_TO_ZARAZ_PURPOSES as in step 5.

<script type="text/javascript">
window.COOKIEHUB_TO_ZARAZ_PURPOSES = {
  // CookieHub category -> array of Zaraz purpose IDs
  // Leave empty or remove categories that aren't used
  necessary:        [],
  preferences:      [],
  analytics:        ["<analytics-purpose-id>"],
  marketing:        ["<marketing-purpose-id>"],
  uncategorized:    []
};
 
// Build a Zaraz consent object from current CookieHub state
function buildZarazConsentFromCookieHub() {
  if (!window.cookiehub) {
    return {};
  }
 
  const consentPreferences = {};
 
  Object.entries(window.COOKIEHUB_TO_ZARAZ_PURPOSES).forEach(
    ([cookiehubCategory, zarazPurposes]) => {
 
      if (!Array.isArray(zarazPurposes) || zarazPurposes.length === 0) {
        return;
      }
 
      const allowed = window.cookiehub.hasConsented(cookiehubCategory);
 
      zarazPurposes.forEach((purposeId) => {
        consentPreferences[purposeId] = allowed;
      });
    }
  );
 
  return consentPreferences;
}
 
// Apply CookieHub state to Zaraz
function syncConsentToZaraz() {
  if (!window.cookiehub || !window.zaraz || !window.zaraz?.consent?.APIReady) {
    return;
  }
 
  const consentPreferences = buildZarazConsentFromCookieHub();
 
  // Set consent per purpose in Zaraz
  window.zaraz.consent.set(consentPreferences);
 
  //console.log("Synced CookieHub consent to Zaraz:", consentPreferences);
}
 
/* --------- CookieHub event listeners --------- */
// Fires when CookieHub is initialized
document.addEventListener("cookiehub_onInitialise", (eventData) => {
  syncConsentToZaraz();
});
 
// Fires whenever user changes settings / accepts all / rejects all
document.addEventListener("cookiehub_onStatusChange", (eventData) => {
  syncConsentToZaraz();
});
 
document.addEventListener("zarazConsentAPIReady", () => {
  syncConsentToZaraz();
});
 
</script>
Last updated on
Matomo Tag ManagerTroubleshooting