Dependency-free cookie consent banner that integrates with Google Consent Mode V2.
What it does:
- Initializes a conservative consent default before tags run.
- Persists user choices in
localStorage(consentMode). - Applies stored consent on subsequent visits.
- Supports Do Not Track (
navigator.doNotTrack) and Global Privacy Control (navigator.globalPrivacyControl). - Exposes a small public API (
window.cookieconsent). - Supports optional region-scoped default consent behavior.
- Loads GTM automatically after consent boot when
gtmIdis configured. - Skips GTM loading when no GTM ID is configured.
- Include
cookieconsent.css. - Define
window.cookieconsentConfig = { gtmId: 'GTM-XXXXXXX' }beforecookieconsent.js. - Include
cookieconsent.jsin<head>(not deferred). - Add a
.cookie-consent-banner-openelement anywhere in the page. - Enable Consent Mode in GTM and align tag consent requirements.
Minimal example:
<link rel="stylesheet" href="cookieconsent.css" />
<script>
// GTM will load automatically when consent setup is ready.
window.cookieconsentConfig = { gtmId: 'GTM-XXXXXXX' };
</script>
<script src="cookieconsent.js"></script>Recommended order in <head>:
cookieconsent.csswindow.cookieconsentConfig = { gtmId: ... }cookieconsent.js- Other analytics/marketing scripts only if they are also consent-aware
Why: this guarantees consent defaults are available before GTM/tag execution.
In cookieconsent.js:
USE_REGION_LIST = false: default-deny is applied globally.USE_REGION_LIST = true: default-deny is scoped toCONSENT_REGION_LIST.
Update CONSENT_REGION_LIST to match your legal/compliance policy.
Set either:
window.cookieconsentConfig = { gtmId: 'GTM-XXXXXXX' }window.COOKIECONSENT_GTM_ID = 'GTM-XXXXXXX'
cookieconsent.js loads GTM once consent defaults/stored state have been applied.
If neither value is set, GTM is not loaded by this script.
Copy/paste examples:
<script>
window.cookieconsentConfig = { gtmId: 'GTM-XXXXXXX' };
</script><script>
window.COOKIECONSENT_GTM_ID = 'GTM-XXXXXXX';
</script>This repository includes a GTM workspace export with consent support assets:
The export is intended as a starter and includes:
consent_updatedcustom event triggers- data layer variables such as
dlv - ad_storageanddlv - analytics_storage
Import notes:
- Import into a workspace first, review all assets, then publish.
- Container IDs, tag names, and firing logic may need adjustment for your site.
- Keep your
cookieconsent.jsevent payload keys aligned with imported DLV names.
window.cookieconsent.show()
- Opens the banner.
window.cookieconsent.hide()
- Hides the banner.
window.cookieconsent.setConsent(selection)
- Programmatically sets consent.
selection shape:
{
necessary: true,
analytics: true | false,
preferences: true | false,
marketing: true | false,
partners: true | false
}Selections are mapped to Google Consent Mode keys:
marketing->ad_storage,ad_user_dataanalytics->analytics_storagepartners->ad_personalizationpreferences->personalization_storagenecessary->functionality_storage,security_storage
DNT/GPC can force denial for related fields.
Consent is saved as JSON in:
localStorage['consentMode']
- Clear
localStorage['consentMode']and reload. - Confirm banner appears.
- Make each choice (accept all, reject all, accept selection).
- Verify
localStorage['consentMode']updates correctly. - Verify GTM loads after consent boot (single script injection).
- Verify reopening banner with
.cookie-consent-banner-open.
Quick checks in browser devtools:
// Confirm stored consent state:
localStorage.getItem('consentMode')
// Confirm GTM script injected by cookieconsent.js:
document.querySelector('script[data-gtm-loader]')- Loading
cookieconsent.jsafter GTM or other trackers. - Defining GTM ID config after loading
cookieconsent.js. - Forgetting to set either
window.cookieconsentConfig.gtmIdorwindow.COOKIECONSENT_GTM_ID. - Assuming region list values are legally complete without compliance review.
- Banner does not appear:
- Check whether
localStorage['consentMode']already exists. - Call
window.cookieconsent.show()manually to verify rendering.
- Check whether
- GTM does not load:
- Check console warning for missing GTM ID.
- Confirm
window.cookieconsentConfig.gtmId(orwindow.COOKIECONSENT_GTM_ID) is defined beforecookieconsent.js. - Confirm no CSP rule blocks
https://www.googletagmanager.com.
This implementation provides technical controls for consent signaling and regional scoping. It is not legal advice. Validate region strategy, defaults, and tagging behavior with legal/compliance stakeholders.
Tip: index.html in this repo demonstrates the config-based flow.
