Cookie Consent Banner for Your Website

A banner on its own changes nothing: a script tag runs the moment the page loads, whatever the visitor clicks. So tag each script that needs consent. Change its type to text/plain, which browsers do not run, and add data-zyff-consent naming its category: one of preferences, analytics, marketing. Once the visitor allows that category, the banner swaps the tag for a real one, in page order. Anything you leave untagged keeps running exactly as it does today.

<!-- Before: runs on every page load -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>

<!-- After: runs only once the visitor allows analytics -->
<script type="text/plain" data-zyff-consent="analytics" async
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script type="text/plain" data-zyff-consent="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

<!-- An embed that sets marketing cookies: data-src, not src -->
<iframe data-zyff-consent="marketing" data-src="https://www.youtube.com/embed/VIDEO_ID"></iframe>

Several names, separated by spaces, mean the script needs all of them. A misspelt name never matches, so that script stays off and a warning in the browser console names it. A script that loads as a module keeps data-type="module".

To give visitors a way back from a link of your own, such as one in your footer, add data-zyff-consent-open to it. Clicking it opens the preferences.

<a href="#" data-zyff-consent-open>Cookie settings</a>

The banner sends Google’s consent default command with every type denied except security storage as soon as its script runs, and a consent update once the visitor chooses. Analytics maps to analytics_storage; marketing to ad_storage, ad_user_data and ad_personalization; preferences to functionality_storage and personalization_storage.

For Basic Consent Mode, tag the Google tag itself as above, so it does not load at all before consent. For Advanced Consent Mode, where the Google tag loads first and sends cookieless pings, put the banner’s script tag first in your <head> without async, above the Google tag, so the denied default arrives before Google’s own configuration. Leave the banner’s container div where it is.

Every choice is also pushed to the dataLayer as a zyff_consent_update event, for a Google Tag Manager trigger, and announced on the window as zyff:consent for your own code.

window.addEventListener("zyff:consent", (e) => {
  if (e.detail.analytics) { /* start your own analytics */ }
});

The visitor’s answer is stored in a single first-party cookie on your own domain, named zyff_consent, holding which categories they allowed and when. It carries no identifier. Zyff never receives it and keeps no log of anyone’s choice; the banner’s only request to Zyff fetches its own settings and sends no cookies.

A view is counted only on a page load where the banner or its preferences actually appear. A returning visitor who has already chosen runs the script on every page and costs you nothing. If the banner cannot load, is switched off, or your account’s monthly views are used up, every tagged script stays blocked until it can: the banner never guesses on a visitor’s behalf.