consent

A zero-dependency, vanilla JavaScript consent manager with native Google Consent Mode v2 support.

Installation

NPM:

npm install @jarijokinen/consent

Usage

Load the consent-loader.js in the HEAD section before any GTM tags.

<head>
  <script src="path/to/consent-loader.js"></script>
  <script>
    // GTM and any other scripts
  </script>
</head>

Import consent from the npm package and initialize it later on the page.

import { consent } from '@jarijokinen/consent';

document.addEventListener('DOMContentLoaded', () => {
  consent();
});

Add link that opens the dialog:

<a href="#" class="consent-settings">Cookie Settings</a>

Configuration

ad_user_data and ad_personalization are always denied, regardless of country, saved preferences, or dialog selections (including Allow All).

The country cookie name defaults to cc. To use a different name, set window.consent.countryCookieName before loading consent-loader.js:

<script>
  window.consent = window.consent || {};
  window.consent.countryCookieName = 'country_code';
</script>
<script src="path/to/consent-loader.js"></script>

The cookie value should be a two-letter country code, such as FI or US. If the configured cookie is missing or empty, consent defaults to denied.

Customize configuration options by passing some or all of them as a first argument to the consent() function.

const options = {
  storages: {
    analytics_storage: 'Analytics',
    ad_storage: 'Marketing'
  },
  actions: {
    denyAll: 'Deny All',
    allowSelected: 'Allow Selected',
    allowAll: 'Allow All'
  },
  dialogMarkup: `
    <h2 class="consent-title"></h2>
    <div class="consent-message"></div>
    <div class="consent-fields"></div>
    <div class="consent-buttons"></div>
  `,
  dialogClass: 'consent',
  dialogTitle: 'Cookie Consent',
  dialogMessage: 'This website uses cookies for:',
  settingsLinkSelector: '.consent-settings'
};

consent(options);

License

MIT License. Copyright (c) 2022 - 2026 Jari Jokinen. See LICENSE for further details.