Feature — Cookie & Tracking Notice

[Bond52]

Feature Goal

Inform users about cookies and tracking technologies used by the platform.

Business Value

Improves transparency
Supports informed user decisions
Builds trust
Supports privacy best practices

In Scope

Cookie inventory
Cookie Notice page
Cookie banner
Cookie preference management
Consent preference storage

Out of Scope

Advertising technology platforms
Cross-platform tracking management
Advanced analytics consent management

Success Criteria

Users can understand which cookies are used

[Digitload]

Implementing a comprehensive cookie and tracking notice system is crucial for transparency, building user trust, and adhering to privacy regulations like GDPR and CCPA. Your feature goal aligns perfectly with establishing a robust consent management framework.

The core components involve a visible cookie banner, a detailed cookie preference management interface, and a mechanism to store and respect user choices. This ensures users are informed about the cookies used, can review information, and manage their consent for optional cookie categories.

Below is a simplified example demonstrating how you might manually implement a basic cookie consent banner and preference management using HTML, CSS (implied), and JavaScript. This example uses localStorage to store consent preferences and shows how to conditionally load scripts based on those preferences.

<!-- HTML for the cookie banner -->
<div id="cookie-banner" style="display: none; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #333; color: white; padding: 15px; text-align: center; z-index: 1000;">
    This website uses cookies to ensure you get the best experience. By clicking "Accept All", you consent to the use of all cookies.
    <button id="accept-cookies" style="margin-left: 15px; padding: 8px 15px; background-color: #007bff; color: white; border: none; cursor: pointer;">Accept All</button>
    <button id="manage-preferences" style="margin-left: 10px; padding: 8px 15px; background-color: #6c757d; color: white; border: none; cursor: pointer;">Manage Preferences</button>
</div>

<!-- A simple modal for managing preferences -->
<div id="preference-modal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 1001;">
    <h3>Cookie Preferences</h3>
    <p>Choose which types of cookies you allow:</p>
    <label><input type="checkbox" id="essential-cookies" checked disabled> Essential (Always On)</label><br>
    <label><input type="checkbox" id="analytics-cookies"> Analytics</label><br>
    <label><input type="checkbox" id="marketing-cookies"> Marketing</label><br>
    <button id="save-preferences" style="margin-top: 20px; padding: 10px 20px; background-color: #28a745; color: white; border: none; cursor: pointer;">Save Preferences</button>
    <button id="close-modal" style="margin-top: 20px; margin-left: 10px; padding: 10px 20px; background-color: #dc3545; color: white; border: none; cursor: pointer;">Close</button>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const cookieBanner = document.getElementById('cookie-banner');
    const acceptButton = document.getElementById('accept-cookies');
    const manageButton = document.getElementById('manage-preferences');
    const preferenceModal = document.getElementById('preference-modal');
    const savePreferencesButton = document.getElementById('save-preferences');
    const closeModalButton = document.getElementById('close-modal');

    const analyticsCheckbox = document.getElementById('analytics-cookies');
    const marketingCheckbox = document.getElementById('marketing-cookies');

    function getConsent() {
        try {
            return JSON.parse(localStorage.getItem('cookieConsent'));
        } catch (e) {
            return null;
        }
    }

    function setConsent(consent) {
        localStorage.setItem('cookieConsent', JSON.stringify(consent));
        applyConsent(consent);
    }

    function applyConsent(consent) {
        // This is where you'd conditionally load scripts or initialize services
        // based on the user's consent choices.
        if (consent && consent.analytics) {
            console.log('Analytics cookies are allowed. Initializing analytics...');
            // Example: Load Google Analytics script here
        } else {
            console.log('Analytics cookies are NOT allowed.');
        }

        if (consent && consent.marketing) {
            console.log('Marketing cookies are allowed. Initializing marketing scripts...');
            // Example: Load Facebook Pixel or other marketing scripts here
        } else {
            console.log('Marketing cookies are NOT allowed.');
        }

        // Hide banner after consent is applied
        cookieBanner.style.display = 'none';
    }

    const currentConsent = getConsent();

    if (!currentConsent) {
        cookieBanner.style.display = 'block';
    } else {
        applyConsent(currentConsent);
    }

    acceptButton.addEventListener('click', () => {
        const consent = {
            essential: true,
            analytics: true,
            marketing: true
        };
        setConsent(consent);
    });

    manageButton.addEventListener('click', () => {
        preferenceModal.style.display = 'block';
        // Pre-fill checkboxes if consent exists
        if (currentConsent) {
            analyticsCheckbox.checked = currentConsent.analytics || false;
            marketingCheckbox.checked = currentConsent.marketing || false;
        }
    });

    savePreferencesButton.addEventListener('click', () => {
        const consent = {
            essential: true, // Essential cookies are always on
            analytics: analyticsCheckbox.checked,
            marketing: marketingCheckbox.checked
        };
        setConsent(consent);
        preferenceModal.style.display = 'none';
    });

    closeModalButton.addEventListener('click', () => {
        preferenceModal.style.display = 'none';
    });
});
</script>

This code works by first checking if a user's consent preferences are stored in localStorage. If not, it displays a cookie banner. Users can either accept all cookies or manage their preferences through a modal. Their choices are then saved, and the applyConsent function is called to conditionally load or block scripts based on the granted consent categories. This manual setup directly addresses your success criteria by allowing users to understand and manage cookie consent, with preferences being stored and respected.

For production setups, FitConsent handles this automatically, including Google Consent Mode V2, Microsoft UET, GDPR, and CCPA compliance, so you don't need to write this manually. You can find more details on integrating FitConsent into your website at https://fitconsent.com/en/documentation/getting-started-direct-embed.