Crear un aviso de Cookies para React con Next.js

Tiempo de lectura: 2 minutos

Hoy vamos a crear un aviso de Cookies para React con Next.js

Este componente nos servirá para obtener el consentimiento de cookies de los visitantes de nuestra web.

Creamos un componente llamado Cookie Banner:

import React, { useState, useEffect } from 'react';

const CookieBanner: React.FC = () => {
  const [showBanner, setShowBanner] = useState(false);

  useEffect(() => {
    // Mostrar el banner si no hay consentimiento guardado
    const consent = localStorage.getItem('analyticsConsent');
    if (consent === null) {
      setShowBanner(true);
    }
  }, []);

  const handleAccept = () => {
    localStorage.setItem('analyticsConsent', 'true');
    setShowBanner(false);
    // Habilitar Google Analytics
    loadGoogleAnalytics();
  };

  const handleReject = () => {
    localStorage.setItem('analyticsConsent', 'false');
    setShowBanner(false);
  };

  const loadGoogleAnalytics = () => {
    // Añadir el script de Google Analytics
    const script = document.createElement('script');
    script.src = `https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX`; // Reemplaza con tu ID de Google Analytics
    script.async = true;
    document.head.appendChild(script);

    script.onload = () => {
      window.dataLayer = window.dataLayer || [];
      function gtag(...args: any[]) {
        window.dataLayer.push(args);
      }
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXXXXX'); // Reemplaza con tu ID de Google Analytics
    };
  };

  if (!showBanner) return null;

  return (
    <div style={bannerStyles}>
      <p>
        Usamos cookies para mejorar tu experiencia en nuestra web y analizar
        datos con Google Analytics. ¿Aceptas el uso de estas cookies?
      </p>
      <div style={buttonContainerStyles}>
        <button onClick={handleAccept} style={acceptButtonStyles}>
          Aceptar
        </button>
        <button onClick={handleReject} style={rejectButtonStyles}>
          Rechazar
        </button>
      </div>
    </div>
  );
};

const bannerStyles: React.CSSProperties = {
  position: 'fixed',
  bottom: 0,
  left: 0,
  right: 0,
  backgroundColor: '#333',
  color: '#fff',
  padding: '16px',
  textAlign: 'center',
  zIndex: 1000,
};

const buttonContainerStyles: React.CSSProperties = {
  marginTop: '8px',
};

const acceptButtonStyles: React.CSSProperties = {
  backgroundColor: '#4CAF50',
  color: '#fff',
  padding: '8px 16px',
  border: 'none',
  borderRadius: '4px',
  marginRight: '8px',
  cursor: 'pointer',
};

const rejectButtonStyles: React.CSSProperties = {
  backgroundColor: '#f44336',
  color: '#fff',
  padding: '8px 16px',
  border: 'none',
  borderRadius: '4px',
  cursor: 'pointer',
};

export default CookieBanner;

Uso:

import '../styles/globals.css';
import type { AppProps } from 'next/app';
import CookieBanner from '../components/CookieBanner';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <CookieBanner />
    </>
  );
}

export default MyApp;

Notas importantes

• ID de Google Analytics: Asegúrate de reemplazar G-XXXXXXXXXX con tu ID real.
• Estilos: Puedes ajustar los estilos según el diseño de tu web.
• Comprobación de consentimiento: El banner comprueba si el consentimiento ya está guardado en localStorage y no se muestra de nuevo si el usuario ya aceptó o rechazó.