Solución moderna y completa para la gestión de consentimiento de cookies con integración directa a Google Tag Manager
npx shadcn@latest add https://jondotsoy.github.io/opencmp/cookies-manager.jsonpnpm dlx shadcn@latest add https://jondotsoy.github.io/opencmp/cookies-manager.jsonbunx shadcn@latest add https://jondotsoy.github.io/opencmp/cookies-manager.jsonEn el panorama digital actual, el cumplimiento de las regulaciones de privacidad es fundamental. OpenCMP Cookies Manager te permite mantener el cumplimiento legal sin comprometer la experiencia de usuario.
La plataforma facilita la implementación técnica mientras garantiza que tu sitio web cumple con las normativas internacionales de protección de datos más estrictas.
Integra OpenCMP Cookies Manager en tu proyecto en minutos. Compatible con React, Next.js, Astro y cualquier framework moderno.
Utiliza shadcn CLI para instalar el componente directamente en tu proyecto:
npx shadcn@latest add https://jondotsoy.github.io/opencmp/cookies-manager.jsonpnpm dlx shadcn@latest add https://jondotsoy.github.io/opencmp/cookies-manager.jsonbunx shadcn@latest add https://jondotsoy.github.io/opencmp/cookies-manager.jsonImporta y utiliza el componente en tu aplicación según el framework que uses:
---
import { CookieDialogSettings, CookiesManager } from "@/components/ui/cookies-manager";
---
<CookiesManager client:only="react" />
import { CookieDialogSettings, CookiesManager } from "@/components/ui/cookies-manager";
// Layout is a Server Component by default
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<>
<main>
<CookiesManager />
{children}
</main>
</>
)
}
Tu gestor de cookies estará funcionando inmediatamente. El componente incluye configuración predeterminada para cumplimiento GDPR y se integra automáticamente con Google Tag Manager.
Agrega un botón para que los usuarios puedan abrir el panel de configuración de cookies en cualquier momento y desde cualquier parte de tu sitio:
---
import { CookieDialogSettings, CookiesManager } from "@/components/ui/cookies-manager";
---
<CookieDialogSettings client:load>
<button>
Customize your cookie preferences
</button>
</CookieDialogSettings>
💡 Tip: Esta etiqueta permite abrir el panel de preferencias desde cualquier parte del sitio. Úsala en tu footer, navbar o donde consideres más apropiado para la experiencia de usuario.