Add GDPR compliant optional tracking solution
- Complete demo with privacy-first hero section and live status indicator - Production-ready integration examples for React, Vue, WordPress, and vanilla JS - Comprehensive documentation covering API, customization, and legal compliance - GDPR compliant by default with enhanced tracking only on explicit consent 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
commit
2d693605cf
4 changed files with 1130 additions and 0 deletions
289
integration-example.js
Normal file
289
integration-example.js
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
/**
|
||||
* GDPR Tracking Consent - Integration Example
|
||||
*
|
||||
* This file shows how to integrate the GDPR tracking consent button
|
||||
* into your existing website or application.
|
||||
*/
|
||||
|
||||
// Standalone JavaScript snippet (minified version for production)
|
||||
const gdprTrackingSnippet = `
|
||||
<div class="tracking-consent-container" style="position:fixed;bottom:20px;right:20px;z-index:1000">
|
||||
<button id="trackingConsentBtn" class="tracking-consent-btn" style="background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;padding:12px 24px;border-radius:25px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 4px 15px rgba(0,0,0,0.2);transition:all 0.3s ease;display:flex;align-items:center;gap:8px">
|
||||
<span style="font-size:16px">📊</span>
|
||||
<span id="btnText">Plz trac me!</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="consentModal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1001;justify-content:center;align-items:center">
|
||||
<div style="background:white;padding:30px;border-radius:12px;max-width:500px;margin:20px;box-shadow:0 10px 30px rgba(0,0,0,0.3)">
|
||||
<h3 style="margin:0 0 16px 0;color:#333">Optional Enhanced Tracking</h3>
|
||||
<p style="margin:0 0 20px 0;color:#666;line-height:1.5">We respect your privacy! By default, we only use essential cookies and basic analytics.</p>
|
||||
<div style="display:flex;gap:12px;justify-content:flex-end">
|
||||
<button onclick="window.trackingConsent.closeConsentModal()" style="padding:10px 20px;border:none;border-radius:6px;background:#f5f5f5;color:#333;cursor:pointer">No, thanks</button>
|
||||
<button onclick="window.trackingConsent.enableTracking()" style="padding:10px 20px;border:none;border-radius:6px;background:#667eea;color:white;cursor:pointer">Yes, track me!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
class GDPRTrackingConsent{constructor(){this.storageKey='gdpr-tracking-consent';this.isTrackingEnabled=localStorage.getItem(this.storageKey)==='true';this.init()}init(){this.updateButtonState();document.getElementById('trackingConsentBtn').onclick=()=>{this.isTrackingEnabled?confirm('Disable enhanced tracking?')&&this.disableTracking():document.getElementById('consentModal').style.display='flex'};this.isTrackingEnabled?this.enableEnhancedTracking():this.enableMinimalTracking()}updateButtonState(){const btn=document.getElementById('trackingConsentBtn');const text=document.getElementById('btnText');if(this.isTrackingEnabled){btn.style.background='linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)';text.textContent='Tracking ON'}else{btn.style.background='linear-gradient(135deg,#667eea 0%,#764ba2 100%)';text.textContent='Plz trac me!'}}enableTracking(){localStorage.setItem(this.storageKey,'true');this.isTrackingEnabled=true;this.updateButtonState();document.getElementById('consentModal').style.display='none';this.enableEnhancedTracking()}disableTracking(){localStorage.setItem(this.storageKey,'false');this.isTrackingEnabled=false;this.updateButtonState();this.enableMinimalTracking()}enableMinimalTracking(){console.log('🔒 GDPR Mode: Minimal tracking');if(typeof gtag!=='undefined'){gtag('consent','update',{analytics_storage:'denied',ad_storage:'denied'})}}enableEnhancedTracking(){console.log('📊 Enhanced tracking enabled');if(typeof gtag!=='undefined'){gtag('consent','update',{analytics_storage:'granted',ad_storage:'granted'})}}}window.trackingConsent=new GDPRTrackingConsent();
|
||||
</script>`;
|
||||
|
||||
// Integration examples for different scenarios
|
||||
|
||||
// 1. WordPress Integration
|
||||
const wordPressIntegration = {
|
||||
// Add to functions.php
|
||||
php: `
|
||||
<?php
|
||||
// Add GDPR tracking consent to WordPress footer
|
||||
function add_gdpr_tracking_consent() {
|
||||
?>
|
||||
<!-- GDPR Tracking Consent Button -->
|
||||
${gdprTrackingSnippet}
|
||||
<?php
|
||||
}
|
||||
add_action('wp_footer', 'add_gdpr_tracking_consent');
|
||||
?>`,
|
||||
|
||||
// Or as a WordPress shortcode
|
||||
shortcode: `
|
||||
<?php
|
||||
function gdpr_tracking_shortcode() {
|
||||
return '${gdprTrackingSnippet}';
|
||||
}
|
||||
add_shortcode('gdpr_tracking', 'gdpr_tracking_shortcode');
|
||||
?>
|
||||
<!-- Usage: [gdpr_tracking] -->`
|
||||
};
|
||||
|
||||
// 2. React Integration
|
||||
const reactIntegration = `
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const GDPRTrackingConsent = () => {
|
||||
const [isTrackingEnabled, setIsTrackingEnabled] = useState(false);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const consent = localStorage.getItem('gdpr-tracking-consent') === 'true';
|
||||
setIsTrackingEnabled(consent);
|
||||
|
||||
if (consent) {
|
||||
enableEnhancedTracking();
|
||||
} else {
|
||||
enableMinimalTracking();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const enableTracking = () => {
|
||||
localStorage.setItem('gdpr-tracking-consent', 'true');
|
||||
setIsTrackingEnabled(true);
|
||||
setShowModal(false);
|
||||
enableEnhancedTracking();
|
||||
};
|
||||
|
||||
const disableTracking = () => {
|
||||
if (window.confirm('Disable enhanced tracking?')) {
|
||||
localStorage.setItem('gdpr-tracking-consent', 'false');
|
||||
setIsTrackingEnabled(false);
|
||||
enableMinimalTracking();
|
||||
}
|
||||
};
|
||||
|
||||
const enableMinimalTracking = () => {
|
||||
console.log('🔒 GDPR Mode: Minimal tracking');
|
||||
if (typeof window.gtag !== 'undefined') {
|
||||
window.gtag('consent', 'update', {
|
||||
'analytics_storage': 'denied',
|
||||
'ad_storage': 'denied'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const enableEnhancedTracking = () => {
|
||||
console.log('📊 Enhanced tracking enabled');
|
||||
if (typeof window.gtag !== 'undefined') {
|
||||
window.gtag('consent', 'update', {
|
||||
'analytics_storage': 'granted',
|
||||
'ad_storage': 'granted'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{position: 'fixed', bottom: '20px', right: '20px', zIndex: 1000}}>
|
||||
<button
|
||||
onClick={isTrackingEnabled ? disableTracking : () => setShowModal(true)}
|
||||
style={{
|
||||
background: isTrackingEnabled
|
||||
? 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
|
||||
: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
padding: '12px 24px',
|
||||
borderRadius: '25px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
📊 {isTrackingEnabled ? 'Tracking ON' : 'Plz trac me!'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showModal && (
|
||||
<div style={{
|
||||
position: 'fixed', top: 0, left: 0, width: '100%', height: '100%',
|
||||
background: 'rgba(0,0,0,0.5)', zIndex: 1001, display: 'flex',
|
||||
justifyContent: 'center', alignItems: 'center'
|
||||
}}>
|
||||
<div style={{
|
||||
background: 'white', padding: '30px', borderRadius: '12px',
|
||||
maxWidth: '500px', margin: '20px'
|
||||
}}>
|
||||
<h3>Optional Enhanced Tracking</h3>
|
||||
<p>We respect your privacy! Enable enhanced tracking to help us improve.</p>
|
||||
<div>
|
||||
<button onClick={() => setShowModal(false)}>No, thanks</button>
|
||||
<button onClick={enableTracking}>Yes, track me!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default GDPRTrackingConsent;`;
|
||||
|
||||
// 3. Vue.js Integration
|
||||
const vueIntegration = `
|
||||
<template>
|
||||
<div>
|
||||
<div class="tracking-consent-container">
|
||||
<button @click="handleButtonClick" class="tracking-consent-btn" :class="{ enabled: isTrackingEnabled }">
|
||||
<span>📊</span>
|
||||
<span>{{ isTrackingEnabled ? 'Tracking ON' : 'Plz trac me!' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="showModal" class="consent-modal" @click.self="showModal = false">
|
||||
<div class="consent-modal-content">
|
||||
<h3>Optional Enhanced Tracking</h3>
|
||||
<p>We respect your privacy! Enable enhanced tracking to help us improve.</p>
|
||||
<div>
|
||||
<button @click="showModal = false">No, thanks</button>
|
||||
<button @click="enableTracking">Yes, track me!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isTrackingEnabled: false,
|
||||
showModal: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.isTrackingEnabled = localStorage.getItem('gdpr-tracking-consent') === 'true';
|
||||
this.isTrackingEnabled ? this.enableEnhancedTracking() : this.enableMinimalTracking();
|
||||
},
|
||||
methods: {
|
||||
handleButtonClick() {
|
||||
if (this.isTrackingEnabled) {
|
||||
this.disableTracking();
|
||||
} else {
|
||||
this.showModal = true;
|
||||
}
|
||||
},
|
||||
enableTracking() {
|
||||
localStorage.setItem('gdpr-tracking-consent', 'true');
|
||||
this.isTrackingEnabled = true;
|
||||
this.showModal = false;
|
||||
this.enableEnhancedTracking();
|
||||
},
|
||||
disableTracking() {
|
||||
if (confirm('Disable enhanced tracking?')) {
|
||||
localStorage.setItem('gdpr-tracking-consent', 'false');
|
||||
this.isTrackingEnabled = false;
|
||||
this.enableMinimalTracking();
|
||||
}
|
||||
},
|
||||
enableMinimalTracking() {
|
||||
console.log('🔒 GDPR Mode: Minimal tracking');
|
||||
if (typeof gtag !== 'undefined') {
|
||||
gtag('consent', 'update', { 'analytics_storage': 'denied', 'ad_storage': 'denied' });
|
||||
}
|
||||
},
|
||||
enableEnhancedTracking() {
|
||||
console.log('📊 Enhanced tracking enabled');
|
||||
if (typeof gtag !== 'undefined') {
|
||||
gtag('consent', 'update', { 'analytics_storage': 'granted', 'ad_storage': 'granted' });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>`;
|
||||
|
||||
// 4. Google Analytics Integration
|
||||
const googleAnalyticsSetup = `
|
||||
<!-- Google Analytics with GDPR Consent -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
// Initialize with minimal consent (GDPR compliant by default)
|
||||
gtag('consent', 'default', {
|
||||
'analytics_storage': 'denied',
|
||||
'ad_storage': 'denied',
|
||||
'personalization_storage': 'denied',
|
||||
'functionality_storage': 'granted',
|
||||
'security_storage': 'granted'
|
||||
});
|
||||
|
||||
gtag('config', 'GA_MEASUREMENT_ID', {
|
||||
anonymize_ip: true,
|
||||
allow_google_signals: false,
|
||||
allow_ad_personalization_signals: false
|
||||
});
|
||||
</script>`;
|
||||
|
||||
// 5. Cookie Management Integration
|
||||
const cookieManagement = `
|
||||
// Cookie utility functions for GDPR compliance
|
||||
class GDPRCookieManager {
|
||||
static setCookie(name, value, days = 365, sameSite = 'Lax') {
|
||||
const expires = new Date(Date.now() + days * 864e5).toUTCString();
|
||||
document.cookie = \`\${name}=\${value}; expires=\${expires}; path=/; SameSite=\${sameSite}\`;
|
||||
}
|
||||
|
||||
static getCookie(name) {
|
||||
return document.cookie.split('; ').reduce((r, v) => {
|
||||
const parts = v.split('=');
|
||||
return parts[0] === name ? decodeURIComponent(parts[1]) : r;
|
||||
}, '');
|
||||
}
|
||||
|
||||
static deleteCookie(name) {
|
||||
document.cookie = \`\${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/\`;
|
||||
}
|
||||
|
||||
static cleanupTrackingCookies() {
|
||||
const trackingCookies = ['_ga', '_gid', '_gat', '_fbp', '_fbc', '_hjid'];
|
||||
trackingCookies.forEach(cookie => this.deleteCookie(cookie));
|
||||
}
|
||||
}`;
|
||||
|
||||
// Export all integration examples
|
||||
module.exports = {
|
||||
gdprTrackingSnippet,
|
||||
wordPressIntegration,
|
||||
reactIntegration,
|
||||
vueIntegration,
|
||||
googleAnalyticsSetup,
|
||||
cookieManagement
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue