Jeff Emmett
3e926fee0e
- Privacy policy template with GDPR Art. 13/14 requirements - Cookie consent React component with granular controls - GDPR-compliant analytics wrapper for Vercel/GA - Netcup DPA Annex 3 completion guide - Records of Processing Activities (ROPA) template - High-priority backlog task for deployment to all sites 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> |
||
|---|---|---|
| backlog | ||
| components | ||
| NETCUP_DPA_ANNEX3_GUIDE.md | ||
| PRIVACY_POLICY_TEMPLATE.md | ||
| README.md | ||
| RECORDS_OF_PROCESSING_ACTIVITIES.md | ||
README.md
GDPR Compliance Kit
A comprehensive toolkit for making your websites GDPR compliant.
Contents
gdpr-compliance-kit/
├── README.md # This file
├── PRIVACY_POLICY_TEMPLATE.md # Customizable privacy policy
├── NETCUP_DPA_ANNEX3_GUIDE.md # Guide for Netcup DPA form
├── RECORDS_OF_PROCESSING_ACTIVITIES.md # ROPA template (Art. 30)
└── components/
├── CookieConsent.tsx # React cookie banner component
└── GDPRAnalytics.tsx # Consent-aware analytics wrapper
Quick Start
1. Add Cookie Consent to Your Site
Copy the components to your Next.js project:
cp components/CookieConsent.tsx your-project/components/
cp components/GDPRAnalytics.tsx your-project/components/
Add to your app/layout.tsx:
import { CookieConsent } from "@/components/CookieConsent";
import { GDPRAnalytics } from "@/components/GDPRAnalytics";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<CookieConsent />
<GDPRAnalytics />
</body>
</html>
);
}
Remove the standard Analytics import from your layout:
- import { Analytics } from "@vercel/analytics/next";
...
- <Analytics />
+ <GDPRAnalytics />
2. Create Your Privacy Policy
- Copy
PRIVACY_POLICY_TEMPLATE.mdto your project - Replace all
[PLACEHOLDERS]with your actual info:[DATE]- Current date[WEBSITE_NAME]- Your site name[WEBSITE_URL]- Your domain[CONTACT_EMAIL]- Your contact email
- Review and customize based on your specific data processing
- Add as a page at
/privacyon your site
3. Complete Netcup DPA
- Log into Netcup CCP
- Go to Master Data → Agreement on contract data processing
- Follow
NETCUP_DPA_ANNEX3_GUIDE.mdto fill out the form - Submit the agreement
- Save a copy for your records
4. Maintain Records of Processing
- Customize
RECORDS_OF_PROCESSING_ACTIVITIES.mdwith your specific activities - Store it securely (not publicly accessible)
- Review and update annually or when processing changes
Component Details
CookieConsent.tsx
Features:
- Three-tier consent (Necessary, Analytics, Preferences)
- Customizable appearance via Tailwind classes
- Stores consent in localStorage
- Provides hooks for checking consent status
Custom styling: The component uses Tailwind CSS classes. Customize by editing the className props.
Integration with other consent managers:
The component stores consent in localStorage under gdpr_consent. You can read this from other parts of your app:
const consent = JSON.parse(localStorage.getItem('gdpr_consent') || '{}');
if (consent.analytics) {
// Load analytics
}
GDPRAnalytics.tsx
Wraps Vercel Analytics and only loads it after consent:
// Instead of:
import { Analytics } from "@vercel/analytics/react";
<Analytics />
// Use:
import { GDPRAnalytics } from "@/components/GDPRAnalytics";
<GDPRAnalytics />
For Google Analytics, use GDPRGoogleAnalytics:
<GDPRGoogleAnalytics measurementId="G-XXXXXXXXXX" />
ConsentGate Component
Conditionally render content based on consent:
import { ConsentGate } from "@/components/CookieConsent";
function MyComponent() {
return (
<ConsentGate type="analytics" fallback={<p>Analytics disabled</p>}>
<AnalyticsWidget />
</ConsentGate>
);
}
Checklist
Technical Implementation
- Cookie consent banner added to all sites
- Analytics wrapped with consent check
- Privacy policy page created at
/privacy - Cookie settings accessible from footer
- Contact forms have privacy notice
Legal/Administrative
- Netcup DPA Annex 3 completed and submitted
- Records of Processing Activities created
- Privacy policy reviewed for accuracy
- Data retention periods documented
- Data breach response plan documented
Ongoing Maintenance
- Annual privacy policy review scheduled
- ROPA review scheduled
- Processor agreements reviewed
- Staff awareness training (if applicable)
Deployment Script
To add GDPR compliance to all your sites at once:
#!/bin/bash
# deploy-gdpr.sh
SITES=(
"mycofi-earth-website"
"canvas-website"
# Add more sites
)
for site in "${SITES[@]}"; do
echo "Adding GDPR components to $site..."
cp components/CookieConsent.tsx /opt/websites/$site/components/
cp components/GDPRAnalytics.tsx /opt/websites/$site/components/
echo "Done with $site"
done
FAQ
Q: Do I need a cookie banner if I don't use cookies? A: If you use ANY analytics (even Vercel Analytics), you should have consent. Many analytics tools set cookies or use similar tracking technologies.
Q: What about Cloudflare's cookies?
A: Cloudflare sets some strictly necessary cookies for security (like __cf_bm). These don't require consent but should be mentioned in your privacy policy.
Q: Do I need a DPO? A: Likely not. A Data Protection Officer is required only if:
- You're a public authority
- Your core activities involve large-scale monitoring
- You process special categories of data at large scale
Q: What if someone requests data deletion? A: You have 30 days to respond. Delete from:
- Your databases
- Backups (when they rotate)
- Notify any processors (they should delete too)
Q: Is this enough for full GDPR compliance? A: This covers the major technical requirements. Full compliance also requires:
- Organizational measures (policies, training)
- Proper contracts with processors
- Breach response procedures
- Ongoing compliance monitoring
Consider consulting a legal professional for your specific situation.
Resources
License
This kit is provided as-is for informational purposes. Not legal advice. Consult with a legal professional for your specific compliance needs.