GDPR Compliant Optional Tracking Button

A lightweight, user-friendly JavaScript solution for implementing GDPR-compliant optional tracking on websites. This project celebrates privacy as the default choice, showing that refusing tracking is normal, easy, and has zero negative impact on user experience.

🌐 Now with full Norwegian and English language support!

Features

Core Privacy Features

• 🔒 GDPR Compliant by Default: Minimal tracking until user consents
• 🎉 Privacy-First Design: Refusing tracking is celebrated with achievements and positive messaging
• 🏆 Privacy Achievements: Unlock badges for choosing privacy
• 📊 Live Cookie Counter: See exactly how many cookies are active
• 💯 Privacy Score: Visual indicator showing your privacy level
• 🆚 Before/After Comparison: Clear visualization of what changes with tracking

User Experience

• 🌐 Multilingual Support: Norwegian and English with instant language switching
• 🎨 Beautiful UI: Gradient button with hover effects and smooth animations
• 📱 Mobile Responsive: Works perfectly on all device sizes
• ✨ Equal Choice Design: "No thanks" is as prominent as "Yes" in consent modal
• 📈 Privacy Statistics: Shows that 73% of users choose privacy
• 🍪 Cookie Education: Click cookie counter to learn about each cookie

Developer Features

• ⚡ Lightweight: Pure vanilla JavaScript, no dependencies
• 🔧 Easy Integration: Drop-in solution for any website
• 📝 Ultra-Simple Version: 30-line implementation in simple-gdpr.html
• 🍪 Cookie Management: Automatic cleanup when tracking is disabled
• 📊 Analytics Ready: Google Analytics consent mode integration
• 💾 Persistent Preferences: Language and consent choices remembered between visits

Demo

🚀 Live Demo: https://kode.naiv.no/olemd/gdpr

Open index.html in your browser to see the button in action!

Language Support:

• Click EN/NO toggle in the top-right corner to switch languages
• All content translates instantly without page reload
• Language preference persists between visits

Quick Start

Option 1: Standalone HTML (Recommended for testing)

<!-- Copy the contents of gdpr-tracking-consent.html -->
<!-- Everything you need is in one file -->

Option 2: Minified Snippet (Production ready)

<!-- Add this anywhere in your HTML body -->
<div class="tracking-consent-container" style="position:fixed;bottom:20px;right:20px;z-index:1000">
  <button id="trackingConsentBtn" class="tracking-consent-btn">
    <span>📊</span>
    <span id="btnText">Plz trac me!</span>
  </button>
</div>
<script>
// Minified version available in integration-example.js
</script>

How It Works

Default State (GDPR Compliant)

• Only essential cookies are allowed
• Basic analytics with anonymized IP
• No personalization or ad tracking
• No cross-site tracking

Enhanced Tracking (User Opt-in)

• Detailed page interactions
• User preferences for personalization
• Marketing campaign effectiveness
• Full Google Analytics features

Integration Examples

WordPress

// Add to functions.php
function add_gdpr_tracking_consent() {
    // Include the snippet
}
add_action('wp_footer', 'add_gdpr_tracking_consent');

React

import GDPRTrackingConsent from './GDPRTrackingConsent';

function App() {
  return (
    <div>
      {/* Your app content */}
      <GDPRTrackingConsent />
    </div>
  );
}

Google Analytics Setup

<script>
  gtag('consent', 'default', {
    'analytics_storage': 'denied',
    'ad_storage': 'denied'
  });
  
  // The button will update these settings when user consents
</script>

Customization

Button Text

// Change the button text
btnText.textContent = 'Enable Analytics';

Styling

.tracking-consent-btn {
  /* Customize colors, position, size */
  background: your-gradient;
  bottom: 30px;
  right: 30px;
}

Consent Modal

// Customize the consent message
const consentText = "Your custom consent message here";

API Events

The button fires custom events you can listen to:

document.addEventListener('trackingModeChanged', (e) => {
  console.log('Tracking mode:', e.detail.mode); // 'minimal' or 'enhanced'
});

Cookie Management

// Access the consent status
const isTrackingEnabled = localStorage.getItem('gdpr-tracking-consent') === 'true';

// Programmatically enable/disable
window.trackingConsent.enableTracking();
window.trackingConsent.disableTracking();

Internationalization (i18n)

Language Support

Supports Norwegian (Bokmål) and English with:

• Complete UI translation including consent modal
• Proper Norwegian capitalization and compound words
• Real-time language switching
• Persistent language preference

Language API

// Switch language programmatically
setLanguage('no'); // Norwegian
setLanguage('en'); // English

// Get current language
const currentLang = localStorage.getItem('gdpr-language') || 'en';

// Listen for language changes
document.addEventListener('DOMContentLoaded', () => {
  // Language is automatically loaded from localStorage
});

Adding New Languages

1. Add translations to the translations object:

const translations = {
  en: { /* English translations */ },
  no: { /* Norwegian translations */ },
  de: { /* German translations */ }
};

2. Add language button:

<button class="lang-btn" onclick="setLanguage('de')" id="langDe">DE</button>

Browser Support

• Modern browsers (ES6+)
• Internet Explorer 11+ (with polyfills)
• All mobile browsers

Files

• index.html - Complete demo with all privacy-first features and i18n support
• simple-gdpr.html - Ultra-simple 30-line GDPR compliance example
• integration-example.js - Integration examples for different frameworks
• README.md - This documentation
• CLAUDE.md - Repository guidance for Claude Code
• AGENTS.md - Development guidelines for coding agents
• favicon.svg, favicon.ico - Privacy-themed favicon files

Legal Compliance

This solution helps with:

• ✅ GDPR Article 7 (Consent)
• ✅ ePrivacy Directive
• ✅ CCPA compliance
• ✅ Cookie Law compliance

Note: This is a technical implementation. Always consult with legal experts for complete GDPR compliance in your specific jurisdiction and use case.

License

MIT License - Feel free to use in any project!