Banner

<!-- 1. In <head>, before the GA tag: deny everything by default -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }

  gtag("consent", "default", {
    ad_storage: "denied",
    ad_user_data: "denied",
    ad_personalization: "denied",
    analytics_storage: "denied",
  });
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  gtag("js", new Date());
  gtag("config", "G-XXXXXXXXXX");
</script>

<!-- 2. The banner, hidden until we know there's no stored choice -->
<div class="mdst-banner mdst-banner--sm mdst-banner--fixed mdst-banner--bottom mdst-banner--end"
     id="cookie-banner" data-state="hidden"
     role="region" aria-label="Cookie consent">
  <p class="mdst-banner-content">
    We use Google Analytics cookies to see how the site is used.
    <a href="/privacy/">Privacy</a>
  </p>
  <div class="mdst-banner-actions">
    <button class="mdst-button mdst-button--sm mdst-button--inverted" data-consent="granted">Accept</button>
    <button class="mdst-button mdst-button--sm mdst-button--ghost" data-consent="denied">Decline</button>
  </div>
</div>

<!-- 3. Show the banner, store the choice, update GA -->
<script>
  const STORAGE_KEY = "cookie-consent";
  const banner = document.querySelector("#cookie-banner");

  function readConsent() {
    try { return localStorage.getItem(STORAGE_KEY); } catch { return null; }
  }

  function applyConsent(value) {
    gtag("consent", "update", {
      ad_storage: value,
      ad_user_data: value,
      ad_personalization: value,
      analytics_storage: value,
    });
  }

  function choose(value) {
    try { localStorage.setItem(STORAGE_KEY, value); } catch {}
    applyConsent(value);
    banner.setAttribute("data-state", "hidden");
  }

  banner.querySelectorAll("[data-consent]").forEach((btn) => {
    btn.addEventListener("click", () => choose(btn.dataset.consent));
  });

  const stored = readConsent();
  if (stored) {
    applyConsent(stored);
  } else {
    banner.setAttribute("data-state", "visible");
  }
</script>