Implementing NextJS Cookie Consent with Google Tag Manager and Google Analytics GDPR-Compliant

				
					// components/CookieConsent.tsx
'use client';

import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
import 'vanilla-cookieconsent/dist/cookieconsent.css';
import * as CookieConsent from 'vanilla-cookieconsent';

interface CookieConsentContextType {
  acceptedServices: string[];
}

const CookieConsentContext = createContext<CookieConsentContextType | undefined>(undefined);

export const useCookieConsent = (): CookieConsentContextType => {
  const context = useContext(CookieConsentContext);
  if (!context) {
    throw new Error('useCookieConsent must be used within a CookieConsentProvider');
  }
  return context;
};

interface CookieConsentProviderProps {
  children: ReactNode;
}

export const CookieConsentProvider: React.FC<CookieConsentProviderProps> = ({ children }) => {
  const [acceptedServices, setAcceptedServices] = useState<string[]>([]);

  useEffect(() => {
    const updateGtmConsent = () => {
      if (typeof window.gtag !== 'function') return;

      const userPreferences = CookieConsent.getUserPreferences();
      const acceptedCategories: string[] = userPreferences.acceptedCategories || [];
      const acceptedServices = userPreferences.acceptedServices || {};

      // Check if analytics category is accepted AND google is specifically enabled
      const isGoogleAccepted = acceptedCategories.includes('analytics') &&
        acceptedServices.analytics?.includes('google');

      const consentUpdate = {
        analytics_storage: isGoogleAccepted ? 'granted' : 'denied',
        ad_storage: isGoogleAccepted ? 'granted' : 'denied',
        personalization_storage: isGoogleAccepted ? 'granted' : 'denied',
        functionality_storage: 'granted',
        ad_user_data: isGoogleAccepted ? 'granted' : 'denied',
        ad_personalization: isGoogleAccepted ? 'granted' : 'denied',
      };

      window.gtag('consent', 'update', consentUpdate);
    };

    const updateAcceptedServices = () => {
      const userPreferences = CookieConsent.getUserPreferences();
      const acceptedServices = userPreferences.acceptedServices || [];
      const acceptedServicesList = Object.values(acceptedServices).flat();
      setAcceptedServices(acceptedServicesList);
    };

    CookieConsent.run({
      cookie: {
        domain: process.env.NEXT_PUBLIC_COOKIE_DOMAIN || 'your-domain.com',
      },
      guiOptions: {
        consentModal: { layout: 'cloud' },
      },
      categories: {
        necessary: {
          enabled: true,
          readOnly: true,
        },
        analytics: {
          services: {
            google: { label: 'Google Analytics' },
          },
        },
      },
      language: {
        default: 'en',
        translations: {
          en: {
            consentModal: {
              title: 'Privacy Settings',
              description: 'We use cookies to enhance your experience. Please choose your preferences.',
              acceptAllBtn: 'Accept all',
              acceptNecessaryBtn: 'Accept only necessary cookies',
              showPreferencesBtn: 'Manage preferences',
            },
            preferencesModal: {
              title: 'Cookie Preferences',
              sections: [
                {
                  title: 'Necessary',
                  description: 'Required for the site to function.',
                  linkedCategory: 'necessary',
                },
                {
                  title: 'Analytics',
                  description: 'Helps us understand site usage.',
                  linkedCategory: 'analytics',
                },
              ],
              acceptAllBtn: 'Accept all',
              acceptNecessaryBtn: 'Accept only necessary cookies',
              savePreferencesBtn: 'Save preferences',
            },
          },
        },
      },
      onChange: () => {
        updateAcceptedServices();
        updateGtmConsent();
      },
      onFirstConsent: () => {
        updateAcceptedServices();
        updateGtmConsent();
      },
    });

    const existingPreferences = CookieConsent.getUserPreferences();
    if (existingPreferences && existingPreferences.acceptedCategories) {
      updateAcceptedServices();
      updateGtmConsent();
    }
  }, []);

  return <CookieConsentContext.Provider value={{ acceptedServices }}>{children}</CookieConsentContext.Provider>;
};