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)

<!-- 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();

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!