I'll create a cookie consent component with toggle switches for different cookie options and an "Accept All" button.
This cookie consent component includes:
The component uses React state to track user preferences. In a real implementation, you would want to:
To use this component, you can place it in your layout or on specific pages where you need cookie consent.
I'll create a production-ready cookie consent system that integrates with Google Analytics, Facebook Pixel, PostHog, and other tracking services. This solution will be compliant with privacy regulations and properly manage script loading based on user consent.
This production-ready cookie consent system integrates with Google Analytics, Facebook Pixel, PostHog, and can be extended to support other tracking services. Here's what it includes:
Complete Consent Management System:
Production-Ready Tracking Integration:
User-Friendly Interface:
Privacy Compliance:
Set up your environment variables:
NEXT_PUBLIC_GA_ID=your-google-analytics-id
NEXT_PUBLIC_FB_PIXEL_ID=your-facebook-pixel-id
NEXT_PUBLIC_POSTHOG_KEY=your-posthog-api-keyThe system is already integrated in your app layout:
Add the settings button anywhere you want:
<CookieSettingsButton /> componentUse the consent hook in your own components:
import { useConsent, useConsentFor } from "@/components/cookie-consent/use-consent"
// Check if analytics are allowed
const analyticsAllowed = useConsentFor("analytics")
// Or get the full consent state
const { consent } = useConsent()This solution gives you a complete, production-ready cookie consent system that properly integrates with the most common tracking services while respecting user privacy preferences.
Please make sure to add the following environment variables to your project: