Cookie-consent-v2 NPM

cookie-consent-v2

This project provides a fully compliant cookie consent banner developed in React.js. The banner adheres to Google Consent Mode v2 guidelines, enabling dynamic cookie consent management while maintaining compliance with GDPR and ePrivacy regulations.

Features
Installation
Google Tag Manager (GTM)
GTM Configuration
Usage
Test the banner
Optional: Add Google Analytics
Finalize
Additional Notes
Support My Work
Follow me on Instagram

Features

Google Consent Mode v2 Integration: Automatically manages consent states based on user preferences.
Granular Consent Options: Supports separate consent preferences for analytics, functional, and marketing cookies.
Responsive and Accessible: Optimized for all devices and meets accessibility standards.

Installation

Install the npm package

npm install cookie-consent-v2

Google Tag Manager (GTM)

Go to your Google Tag Manager and select your container (If you haven't one already, create one)

Creating the default Consent Mode

In your container create a new tag:

Go to tags
Click the New Button

Give the tag a name, this will be your default tag (ex. "Consent Mode - Default")
Press the "Tag Configuration"

Now you can choose a tag type --> press the Discover more tag types in the Community Template Gallery
Search for Consent Mode (Google + Microsoft tags) and add to workspace
Make sure you set all the consent settings on denied, except the security_storage (Is always granted)

Only select the Pass Ad Click Information Through URLs (url_passthrough) and Redact Ads Data (ads_data_redaction)
Add a trigger --> Choose Consent Initialization - All Pages
Now press save

Now you made your default Consent Mode behaviour

Make your Variables

Now we are going to make our variables that are equal to our cookies we give:

Make the Cookie Consent variable

Go to the variables section
Click the New Button

Give the variable a name, this one keeps track of the Cookie Consent (ex. Cookie Consent)
Choose the variable type 1st Party Cookie
Add the name of the cookie, make sure the cookie is called "cookie-consent". This is the name of the cookie I used in this package
Check the URI-decode cookie

Save the cookie

Make a variable for every option in the cookie consent

In this example we use the "Ad Storage" option:

Go to the variables section
Click the New Button
Give the variable a name so you know which option this is (ex. Lookup - Ad Storage)
Choose the variable type RegEx Table
For the "Input Variable", choose the Cookie Consent variable (In my case {{Cookie Consent}} )
Now add a row in the RegEx Table and set in the Pattern field "ads"\:true and in the Output granted. This is the name of the option as seen in the value of the cookies in the browser.

!!! Make sure the pattern field is correctly filled in or this won't work. Under these steps you can see a table with all variables you need to use and their patterns !!!

Set Default value on denied
Only check the Ignore Case checkbox

Now save it

Now repeat these 9 steps for every option:

Name variable (this you can choose)	Pattern
Lookup - Ad Storage	"ads"\:true
Lookup - Analytics Storage	"analytics"\:true
Lookup - Functional Storage	"functional"\:true
Lookup - Personalization Storage	"personalized"\:true

Create a tag that will update the consent mode

Go to tags
Click the New Button
Give the tag a name, this will be your update consent tag (ex. "Consent Mode - Update")
Choose now the under Custom again the Consent Mode (Google + Microsoft tags)
Now choose the Update command
Now add the right variables to the consent settings. (All the ones with "ad" are the same and security_storage is alwayes granted)
Only select the Pass Ad Click Information Through URLs (url_passthrough) and Redact Ads Data (ads_data_redaction)

Add a trigger --> Choose Consent Initialization - All Pages
Now press save

You now have everything set up in the GTM

GTM Configuration

First check in your GTM for your container ID (you can find it in the right up corner)

If you select this, you get two scripts. Paste it in your index.html. Make sure you add your container ID (Change the GTM-XXXXXXXX):

In your <head> tag as high as possible (Change the GTM-XXXXXXXX):

<head>
    <script>
        (function(w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime(),
                event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-XXXXXXXX');
    </script>
</head>

In your <body> tag (Change the GTM-XXXXXXXX):

<body>
    <noscript><iframe
        src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
        height="0" width="0"
        style="display:none;visibility:hidden"></iframe></noscript>
</body>

Usage

How to Use in React.js

Import and render the CookieConsentBanner component in your project (Change the GTM-XXXXXXXX):

import CookieConsentBanner from 'cookie-consent-v2';

function App() {
  return (
    <div>
      <CookieConsentBanner gtmId={'GTM-XXXXXXXX'} />
    </div>
  );
}

export default App;

Instructions for Vue.js Integration

To use this banner in a Vue.js application, follow these steps:

Create a Wrapper Component Create a new Vue component, called CookieConsentBanner.vue, that will host the React-based cookie consent banner (Change the GTM-XXXXXXXX):

<template>
    <div ref="reactRoot"></div>
</template>

<script>
import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue';
import React from 'react';
import ReactDOM from 'react-dom/client'; // Make sure to import from 'react-dom/client'
import CookieConsentBanner from 'cookie-consent-v2'; // CookieConsentBanner

export default defineComponent({
    name: 'CookieConsent',
    setup() {
        const reactRoot = ref(null);
        const reactRootInstance = ref(null);

        onMounted(() => {
            if (reactRoot.value) {
                reactRootInstance.value = ReactDOM.createRoot(reactRoot.value);
                reactRootInstance.value.render(
                    React.createElement(CookieConsentBanner, { gtmId: 'GTM-XXXXXXXX' }, null) // ADD HERE YOUR OWN CONTAINER ID
                );
            }
        });

        onBeforeUnmount(() => {
            if (reactRootInstance.value) {
                reactRootInstance.value.unmount();
            }
        });

        return { reactRoot };
    },
});
</script>

This should work if you just did the npm install cookie-consent-v2 in your project.

Use the Component in Vue:

<script setup>
 import CookieConsent from './components/CookieConsentBanner.vue'; //Change the location if needed
</script>

<template>
  <main>
    <CookieConsent />
  </main>
</template>

Instructions for Plain HTML Integration

Add this to your index.html file (Change the GTM-XXXXXXXX on all 3 places):

<!DOCTYPE html>
<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>React in Plain HTML</title>

     <!-- Google Tag Manager -->
     <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
         new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
         j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
         'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
         })(window,document,'script','dataLayer','GTM-XXXXXXXX');</script>
         <!-- End Google Tag Manager -->

     <!-- Load React and Emotion in the head (they are libraries, don't interact with the DOM directly) -->
     <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@emotion/react@11.10.5/dist/emotion-react.umd.min.js"></script>

     <script>
         window.react = React;
         window['@emotion/react'] = window.emotionReact;
     </script>
 </head>
 <body>
             <!-- Google Tag Manager (noscript) -->
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
         height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
         <!-- End Google Tag Manager (noscript) -->

     <!-- Div element where the React component will be mounted -->
     <div id="react-root"></div>

     <!-- Load application scripts at the end of body -->
     <script src="https://cdn.jsdelivr.net/npm/cookie-consent-v2/dist/cookie-consent-banner.js"></script>
     <script>
         document.addEventListener("DOMContentLoaded", function() {
             const container = document.getElementById('react-root');
             const CookieConsentBanner = window.CookieConsentBanner?.default || window.CookieConsentBanner;
         
             if (!CookieConsentBanner) {
                 console.error("CookieConsentBanner component is not available.");
                 return;
             }
         
             if (container) {
                 const root = ReactDOM.createRoot(container);
                 root.render(React.createElement(CookieConsentBanner, { gtmId: "GTM-XXXXXXXX" }));
             } else {
                 console.error("React root container not found.");
             }
         });
     </script>

 </body>
</html>

Test the banner

Go back to GTM and press Preview

Enter the URL you use to test (ex. http://localhost:3000/)
Press Connect
Now you can test the banner and change cookies

Optional: Add Google Analytics

As before add a new tag (Give a name for example: “GA4”), but this time choose Google Analytics and select the Google Tag.

Set it up like this. The Tag ID you see here is the one from the Google Analytics:

The banner and GA4 work together so everything is loaded correctly.

Finalize

If everything works, you are ready to submit this. But we need to do some steps first:

Go to the Admin tab in GTM

Press Container Settings
Enable consent overview

Press the save button
Go back to the Tags section on the left side
Now you can press next to the "New" Button on a Shield --> This is the Consent Overiew
Select now all tags and press again on the shield on the right side. (The shield is slightly different)
Press the radio button No additional consent required
Press the save button
Press Submit at the top right corner and publish it so it works on your website

Additional Notes

Ensure that Google Tag Manager (GTM) or Analytics configurations are set up properly to respect the consent state managed by this banner.
Ensure you added the container ID at all given places