Loading...
Loading...
> GDPR-compliant cookie banner with Google Consent Mode v2 integration.
If your app has users in Europe, you're legally required to ask permission before tracking them with cookies. This component handles that for you. Think of it like asking guests if they want coffee before pouring - some want it (marketing cookies), some don't (privacy-focused users). This lets them choose.
DESC: The cookie consent component is already in your layout. No setup required!
1// Already in src/app/layout.tsx2import { CookieConsent } from "@/components/cookie-consent";3import { CardHeader } from "@/components/ui/card";45export default function RootLayout({ children }) {6 return (7 <html>8 <body>9 {children}10 <CookieConsent /> {/* Automatically shows for new visitors */}11 </body>12 </html>13 );14}
The component automatically integrates with Google Consent Mode v2
1// Automatically called when user saves preferences2gtag("consent", "update", {3 ad_storage: marketing ? "granted" : "denied",4 ad_user_data: marketing ? "granted" : "denied",5 ad_personalization: marketing ? "granted" : "denied",6 analytics_storage: statistics ? "granted" : "denied",7 functionality_storage: preferences ? "granted" : "denied",8 personalization_storage: marketing ? "granted" : "denied",9});1011// Event also pushed for GTM triggers12dataLayer.push({13 event: "cookie_consent_update",14 cookie_consent: { necessary, preferences, statistics, marketing }15});
Edit the categories in src/components/cookie-consent/tabs.tsx
1// In DetailsTabContent function2const categories: CookieCategory[] = [3 {4 id: "necessary",5 name: "Necessary",6 description: "Essential for website functionality.",7 required: true, // Cannot be disabled8 cookies: [9 {10 name: "cookie-consent",11 description: "Stores your cookie preferences",12 duration: "1 year",13 },14 // Add your cookies here15 ],16 },17 // Add more categories...18];
By default, consent is valid for 1 year. Edit in src/components/cookie-consent/index.tsx
1// In getInitialPreferences function2const daysSinceConsent = Math.floor(3 (Date.now() - new Date(consentDate).getTime()) / (1000 * 60 * 60 * 24)4);5if (daysSinceConsent < 365) { // Change 365 to your desired days6 return { preferences: JSON.parse(consent), showButton: false };7}
Banner with cookie icon and text. Opens comprehensive modal with tabs when clicked. Best for main app layout.
import { CookieConsent } from "@/components/cookie-consent";
// Default bannerVariant is "full"
<CookieConsent />
// Or explicitly:
<CookieConsent bannerVariant="full" />> We use cookies to enhance your experience. Select your preferences:
1import { CookieConsent } from "@/components/cookie-consent";23// Already included in layout.tsx4<CookieConsent />
Compact terminal-styled banner. Opens the same modal as full version when clicked. Best for marketing pages. Currently used in marketing layout.
import { CookieConsent } from "@/components/cookie-consent";
// Use minimal banner style
<CookieConsent bannerVariant="minimal" />1import { CookieConsent } from "@/components/cookie-consent";23// In marketing layout:4<CookieConsent bannerVariant="minimal" />
New visitors see a "Cookie Settings" button in the bottom-right corner. All non-essential cookies are blocked until they make a choice.
Clicking the button opens a modal with three tabs: Consent (quick toggles), Details (see exactly which cookies), and About (their privacy rights).
Their preference is stored in localStorage for 1 year. Google Consent Mode is updated automatically, enabling/disabling analytics and ads accordingly.
The banner doesn't show again (unless they clear storage). Their saved preferences are applied immediately on page load.
Necessary (Always On)
Essential for the site to work. Includes session cookies and consent storage. Cannot be disabled.
Preferences
Remember settings like theme (dark/light) and language. Off by default.
Statistics
Google Analytics and similar tools. Helps you understand how people use your app. Off by default.
Marketing
Facebook Pixel, Google Ads conversion tracking. Used for targeted advertising. Off by default.
Technically no, but it's good practice. California (CCPA), Brazil (LGPD), and other regions have similar requirements. Plus, Google requires Consent Mode v2 for personalized ads even in the US.
As of March 2024, Google requires Consent Mode v2 for any site that uses Google Ads remarketing or audience features. Without it, your ads may not work properly and you could lose audience data.
Yes! In cookie-consent.tsx, find the button element and change the Tailwind classes. It's currently bottom-6 right-6. Change to bottom-6 left-6 for bottom-left, etc.
All non-essential cookies remain blocked. The button stays visible on every page until they interact with it. This is the GDPR-compliant default.
cookie-consentdataLayer and press Entercookie_consent_update events