# 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](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)
```html
<!-- Copy the contents of gdpr-tracking-consent.html -->
<!-- Everything you need is in one file -->
```

### Option 2: Minified Snippet (Production ready)
```html
<!-- 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
```php
// Add to functions.php
function add_gdpr_tracking_consent() {
    // Include the snippet
}
add_action('wp_footer', 'add_gdpr_tracking_consent');
```

### React
```jsx
import GDPRTrackingConsent from './GDPRTrackingConsent';

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

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

## Customization

### Button Text
```javascript
// Change the button text
btnText.textContent = 'Enable Analytics';
```

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

### Consent Modal
```javascript
// Customize the consent message
const consentText = "Your custom consent message here";
```

## API Events

The button fires custom events you can listen to:

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

## Cookie Management

```javascript
// 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
```javascript
// 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:
```javascript
const translations = {
  en: { /* English translations */ },
  no: { /* Norwegian translations */ },
  de: { /* German translations */ }
};
```

2. Add language button:
```html
<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!