Advanced Cookie Consent Example

This example demonstrates advanced features including granular cookie controls, custom styling, and analytics integration.

Features Demonstrated

Granular cookie category controls
Custom positioning and animations
Analytics integration (Google Analytics)
Audit trail and consent recording
Custom callbacks and event handling
Real-time consent status tracking

Cookie Categories Status

Controls

Current Status:

Not initialized

Google Analytics Integration

This example includes Google Analytics integration that respects user consent choices:

Analytics Status: Disabled

Implementation Code

// Advanced configuration with all features
cookieconsent.extended.init({
  ui: {
    position: 'center',
    showPreferences: true,
    animationType: 'slide',
    backdrop: true
  },
  
  categories: {
    necessary: {
      enabled: true,
      locked: true,
      name: 'Essential Cookies',
      description: 'Required for basic website functionality including security, network management, and accessibility.'
    },
    analytics: {
      enabled: false,
      locked: false,
      name: 'Analytics Cookies',
      description: 'Help us understand how visitors interact with our website by collecting and reporting information anonymously.'
    },
    marketing: {
      enabled: false,
      locked: false,
      name: 'Marketing Cookies',
      description: 'Used to track visitors across websites to display relevant and engaging advertisements.'
    },
    preferences: {
      enabled: false,
      locked: false,
      name: 'Preference Cookies',
      description: 'Enable the website to remember information that changes how it behaves or looks.'
    }
  },
  
  analytics: {
    enabled: true,
    gtag: true,
    customCallback: function(action, categories) {
      console.log('Analytics callback:', action, categories);
    }
  },
  
  compliance: {
    gdprCompliant: true,
    recordConsent: true,
    auditTrail: true
  },
  
  callbacks: {
    onAcceptAll: function(categories) {
      enableAllTracking();
      updateStatus('All categories accepted');
    },
    
    onRejectAll: function(categories) {
      disableAllTracking();
      updateStatus('All non-essential categories rejected');
    },
    
    onCategoryToggle: function(category, enabled) {
      handleCategoryToggle(category, enabled);
    }
  }
});