# GDPR Compliant Optional Tracking Button

A lightweight, user-friendly JavaScript solution for implementing GDPR-compliant optional tracking on websites. By default, only minimal tracking is enabled, and users can opt-in to enhanced tracking with a fun "Plz trac me!" button.

## Features

- 🔒 **GDPR Compliant by Default**: Minimal tracking until user consents
- 🎨 **Beautiful UI**: Gradient button with hover effects and smooth animations
- 📱 **Mobile Responsive**: Works perfectly on all device sizes
- ⚡ **Lightweight**: Pure vanilla JavaScript, no dependencies
- 🔧 **Easy Integration**: Drop-in solution for any website
- 🍪 **Cookie Management**: Automatic cleanup when tracking is disabled
- 📊 **Analytics Ready**: Google Analytics consent mode integration

## Demo

Open `gdpr-tracking-consent.html` in your browser to see the button in action!

## 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();
```

## Browser Support

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

## Files

- `gdpr-tracking-consent.html` - Complete demo with all features
- `integration-example.js` - Integration examples for different frameworks
- `README.md` - This documentation

## 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!