gdpr/integration-example.js

/**
 * 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
};