Google Consent Mode v2

<div class="demo">
  <div class="demo-row">
    <button class="demo-btn" id="accept">Accept all</button>
    <button class="demo-btn" id="analytics">Analytics only</button>
    <button class="demo-btn" id="reject">Reject all</button>
  </div>
  <p class="demo-hint">What Google would receive:</p>
  <pre class="demo-out" id="out"></pre>
</div>

import { consentModeDefaults, createCookieConsent } from 'https://www.devix.pk/cdn/oss/cookie-consent@1.0.0/index.js';

window.dataLayer = [];
// Before any Google tag: everything denied, and tags wait 500ms for the answer.
consentModeDefaults();

const out = document.getElementById('out');

const consent = createCookieConsent({
  autoShow: false,
  storage: { name: 'demo_gcm', days: 1 },
  consentMode: {
    map: {
      analytics_storage: 'analytics',
      ad_storage: 'marketing',
      ad_user_data: 'marketing',
      ad_personalization: 'marketing',
      functionality_storage: 'preferences',
    },
  },
  categories: [
    { id: 'necessary', label: 'Strictly necessary', required: true },
    { id: 'preferences', label: 'Preferences' },
    { id: 'analytics', label: 'Analytics' },
    { id: 'marketing', label: 'Marketing' },
  ],
});

const show = () => {
  const entries = window.dataLayer.filter((row) => row[0] === 'consent');
  out.textContent = entries.map((row) => `gtag('consent', '${row[1]}', ${JSON.stringify(row[2], null, 2)})`).join('\n\n');
};

consent.on('change', show);
consent.on('firstconsent', show);
document.getElementById('accept').addEventListener('click', () => (consent.acceptAll(), show()));
document.getElementById('reject').addEventListener('click', () => (consent.rejectAll(), show()));
document.getElementById('analytics').addEventListener('click', () => (consent.save(['analytics']), show()));
show();

@import url('https://www.devix.pk/cdn/oss/cookie-consent@1.0.0/cookie-consent.min.css');
.dxcc-banner { position: absolute; }
#out { min-height: 150px; }