Quick Navigation

🔍 Troubleshooting Guide

Solve common issues and get Extended Cookie Consent working perfectly.

🚨 Most Common Issues

❌ Cookie consent popup not showing

Symptoms: No popup appears on page load

✅ Solutions (try in order):
  1. Clear browser data: Remove all cookies and localStorage for your domain
  2. Check console: Open browser DevTools and look for JavaScript errors
  3. Verify files loaded: Check Network tab to ensure CSS/JS files loaded successfully
  4. Check initialization: Ensure cookieconsent.extended.init() is called
// Debug: Check if library loaded
console.log('cookieconsent available:', typeof cookieconsent);
console.log('extended available:', typeof cookieconsent.extended);

// Force clear and reinitialize
localStorage.clear();
document.cookie.split(";").forEach(function(c) { 
    document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); 
});
location.reload();

⚠ī¸ Popup appears but styling is broken

Symptoms: Popup shows but looks unstyled or wrong

✅ Solutions:
  1. CSS loading: Verify CSS file loaded in Network tab
  2. CSS conflicts: Check for CSS conflicts with existing styles
  3. Theme issues: Try without theme first: ui: { theme: null }
  4. Z-index problems: Increase z-index in CSS if popup is behind other elements
/* Fix z-index issues */
.cc-popup-extended {
    z-index: 999999 !important;
}

/* Override conflicting styles */
.cc-popup-extended * {
    box-sizing: border-box !important;
}

ℹī¸ Popup shows every time (not remembering choice)

Symptoms: User choices aren't saved between sessions

✅ Solutions:
  1. Check localStorage: Ensure browser allows localStorage
  2. Domain issues: Verify domain configuration if using subdomains
  3. Cookie path: Check cookie path configuration
  4. Incognito mode: Private browsing might prevent storage

đŸ“Ļ Installation Problems

CDN Files Not Loading

Troubleshooting Steps:
  1. Check URLs: Verify CDN links are correct
  2. Network issues: Test CDN accessibility
  3. CORS problems: Some networks block external resources
  4. Fallback solution: Download files and host locally
<!-- Test if CDN is accessible -->
<script>
fetch('https://cdn.jsdelivr.net/gh/casjay-templates/cookieconsent@main/dist/cookieconsent.min.js')
    .then(response => console.log('CDN accessible:', response.ok))
    .catch(error => console.error('CDN error:', error));
</script>

<!-- Fallback to local files -->
<link rel="stylesheet" href="/assets/css/cookieconsent.min.css">
<script src="/assets/js/cookieconsent.min.js"></script>

Module Loading Issues

// If using module bundlers, try:
import cookieconsent from './path/to/cookieconsent.js';

// Or for ES modules:
import('./cookieconsent.min.js')
    .then(module => {
        // Initialize here
        window.cookieconsent.extended.init();
    });

⚙ī¸ Configuration Issues

Configuration Not Applied

Common configuration mistakes and fixes:

// ❌ Wrong: Missing nested structure
cookieconsent.extended.init({
    theme: 'dracula',  // Should be ui.theme
    position: 'center' // Should be ui.position
});

// ✅ Correct: Proper nesting
cookieconsent.extended.init({
    ui: {
        theme: 'dracula',
        position: 'center'
    },
    content: {
        header: 'Cookie Notice',
        message: 'We use cookies...'
    }
});

Category Configuration Issues

// ❌ Wrong: Missing required properties
categories: {
    analytics: {
        name: 'Analytics'  // Missing enabled, locked, description
    }
}

// ✅ Correct: Complete category configuration
categories: {
    analytics: {
        enabled: false,    // Required
        locked: false,     // Required
        name: 'Analytics', // Required
        description: 'Help us improve our website.' // Required
    }
}

🎨 Theme Problems

Theme Not Applying

Check these items:
  1. Theme name: Verify theme name is spelled correctly
  2. CSS loading: Ensure Extended Cookie Consent CSS is loaded
  3. CSS specificity: Check for conflicting CSS rules
// Debug: Check available themes
console.log('Available themes:', cookieconsent.extended.getAvailableThemes());

// Test with a simple theme
cookieconsent.extended.init({
    ui: { theme: 'github-light' }  // Try a basic theme first
});

Custom Theme Issues

/* Create custom theme with CSS variables */
.cc-popup-extended.cc-theme-custom {
    --cc-primary-color: #your-color;
    --cc-background: #your-background;
    --cc-text-primary: #your-text;
}

/* Then use it */
cookieconsent.extended.init({
    ui: { theme: 'custom' }
});

📊 Analytics Integration Issues

Google Analytics Not Working

Common GA4 Integration Issues:
// ❌ Wrong: GA initialized with granted consent
gtag('config', 'GA_MEASUREMENT_ID');

// ✅ Correct: Initialize with denied, update on consent
gtag('consent', 'default', {
    'analytics_storage': 'denied',
    'ad_storage': 'denied'
});
gtag('config', 'GA_MEASUREMENT_ID');

// Update when user consents
cookieconsent.extended.init({
    callbacks: {
        onAcceptAll: function(categories) {
            gtag('consent', 'update', {
                'analytics_storage': 'granted',
                'ad_storage': 'granted'
            });
        }
    }
});

GTM Integration Problems

// Push consent data to GTM dataLayer
window.addEventListener('cookieConsentChange', function(event) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'event': 'cookie_consent_update',
        'analytics_consent': event.detail.categories.analytics,
        'marketing_consent': event.detail.categories.marketing
    });
});

📱 Mobile Issues

Mobile Layout Problems

Mobile-specific fixes:
  1. Viewport issues: Ensure proper viewport meta tag
  2. Touch targets: Buttons might be too small
  3. Position problems: Use bottom-bar for mobile
<!-- Ensure proper viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// Responsive positioning
const isMobile = window.innerWidth <= 768;
cookieconsent.extended.init({
    ui: {
        position: isMobile ? 'bottom-bar' : 'bottom-right',
        theme: 'material-light'
    }
});

iOS Safari Issues

/* Fix iOS Safari scrolling issues */
.cc-popup-extended {
    -webkit-overflow-scrolling: touch;
}

/* Fix position fixed issues */
.cc-popup-container.bottom-bar {
    position: absolute;
    bottom: 0;
}

⚡ Performance Issues

Slow Loading

Performance optimization:
  1. Use minified files: Always use .min.css and .min.js
  2. Defer loading: Load cookie consent after critical content
  3. Reduce features: Disable unnecessary options
<!-- Defer loading for better performance -->
<script defer src="cookieconsent.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    cookieconsent.extended.init({
        ui: {
            showPreferences: false,  // Reduce complexity
            animationType: 'fade'    // Lighter animation
        }
    });
});
</script>

Memory Leaks

// Proper cleanup in SPAs
function cleanupCookieConsent() {
    // Remove event listeners
    window.removeEventListener('cookieConsentChange', yourHandler);
    
    // Clear any intervals/timeouts
    // Remove DOM elements if needed
}

// Call cleanup when navigating in SPAs
window.addEventListener('beforeunload', cleanupCookieConsent);

🛠ī¸ Diagnostic Tools

Browser Console Diagnostics

Copy and paste these commands in your browser console:

// Check if library is loaded
console.log('Cookie Consent Library Check:');
console.log('- Main library:', typeof cookieconsent !== 'undefined');
console.log('- Extended API:', typeof cookieconsent?.extended !== 'undefined');
console.log('- Version info:', cookieconsent?.version || 'Unknown');

// Check current consent status
console.log('\nCurrent Consent Status:');
console.log('- Categories:', cookieconsent.extended.getConsent());
console.log('- Timestamp:', localStorage.getItem('cc_timestamp'));
console.log('- Action:', localStorage.getItem('cc_action'));

// Check available themes
console.log('\nAvailable Themes:');
console.log('- All themes:', Object.keys(cookieconsent.extended.getAvailableThemes()));
console.log('- Light themes:', Object.keys(cookieconsent.extended.getThemesByType('light')));
console.log('- Dark themes:', Object.keys(cookieconsent.extended.getThemesByType('dark')));

// Check DOM elements
console.log('\nDOM Check:');
console.log('- Popup element:', document.querySelector('.cc-popup-extended'));
console.log('- Original element:', document.querySelector('.cc-window'));

// Check localStorage
console.log('\nLocalStorage:');
Object.keys(localStorage).filter(key => key.startsWith('cc_')).forEach(key => {
    console.log(`- ${key}:`, localStorage.getItem(key));
});

Network Diagnostics

// Test CDN accessibility
async function testCDN() {
    const files = [
        'https://cdn.jsdelivr.net/gh/casjay-templates/cookieconsent@main/dist/cookieconsent.min.css',
        'https://cdn.jsdelivr.net/gh/casjay-templates/cookieconsent@main/dist/cookieconsent.min.js'
    ];
    
    for (const file of files) {
        try {
            const response = await fetch(file, { method: 'HEAD' });
            console.log(`${file}: ${response.ok ? '✅ OK' : '❌ Failed'}`);
        } catch (error) {
            console.log(`${file}: ❌ Error - ${error.message}`);
        }
    }
}

testCDN();

Theme Testing Tool

// Test all themes quickly
function testAllThemes() {
    const themes = cookieconsent.extended.getAvailableThemes();
    let index = 0;
    const themeKeys = Object.keys(themes);
    
    function showNextTheme() {
        if (index >= themeKeys.length) {
            console.log('Theme testing complete!');
            return;
        }
        
        const theme = themeKeys[index];
        console.log(`Testing theme: ${theme}`);
        
        // Clear existing
        localStorage.clear();
        const existing = document.querySelector('.cc-popup-extended');
        if (existing) existing.remove();
        
        // Show new theme
        setTimeout(() => {
            cookieconsent.extended.init({
                ui: { theme: theme, position: 'center' },
                content: { header: `Testing: ${theme}` }
            });
            
            setTimeout(() => {
                index++;
                showNextTheme();
            }, 2000);
        }, 100);
    }
    
    showNextTheme();
}

// Run theme test
// testAllThemes();

🆘 Still Need Help?

📋 Before Reporting Issues

  1. Run the diagnostic tools above
  2. Check browser console for errors
  3. Test in incognito/private mode
  4. Try with minimal configuration
  5. Test in different browsers

🔗 Get Support

💡 Pro Tip

When reporting issues, include:

  • Browser and version
  • Console error messages
  • Your configuration code
  • Steps to reproduce