Eenvoudige WordPress cookie banner

Plak de volgende code aan het begin van je functions.php bestand:

// Hook om de cookie consent banner toe te voegen aan wp_head
add_action('wp_head', 'wpx_add_cookie_banner');

function wpx_add_cookie_banner() {
    ?>
    <style>
        /* Eenvoudige styling voor de cookie-banner */
        #cookie-consent-banner {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px;
            z-index: 9999;
        }
        #cookie-consent-banner button {
            background-color: #0073aa;
            color: #fff;
            border: none;
            padding: 5px 10px;
            margin-left: 10px;
            cursor: pointer;
        }
    </style>

    <div id="cookie-consent-banner" style="display: none;">
        Deze website gebruikt cookies om je ervaring te verbeteren. Door verder te gaan, stem je in met het gebruik van cookies.
        <button id="accept-cookies">Accepteer</button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Controleer of de consent cookie al bestaat
            if (!getCookie('cookie_consent')) {
                document.getElementById('cookie-consent-banner').style.display = 'block';
            }

            // Functie om een cookie in te stellen
            function setCookie(name, value, days) {
                var expires = "";
                if (days) {
                    var date = new Date();
                    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                    expires = "; expires=" + date.toUTCString();
                }
                document.cookie = name + "=" + (value || "") + expires + "; path=/";
            }

            // Functie om een cookie op te halen
            function getCookie(name) {
                var nameEQ = name + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
                }
                return null;
            }

            // Wanneer op de "Accepteer" knop wordt geklikt
            document.getElementById('accept-cookies').addEventListener('click', function () {
                setCookie('cookie_consent', 'accepted', 365); // Zet de cookie voor één jaar
                document.getElementById('cookie-consent-banner').style.display = 'none';

                // Nu de toestemming is gegeven, laad Google Tag
                loadGoogleTag();
            });

            // Functie om Google Tag te laden
            function loadGoogleTag() {
                var gtagScript = document.createElement('script');
                gtagScript.async = true;
                gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID';
                document.head.appendChild(gtagScript);

                gtagScript.onload = function () {
                    window.dataLayer = window.dataLayer || [];
                    function gtag() { dataLayer.push(arguments); }
                    gtag('js', new Date());
                    gtag('config', 'YOUR_TRACKING_ID');
                };
            }

            // Laad Google Tag direct als de toestemming al gegeven is
            if (getCookie('cookie_consent') === 'accepted') {
                loadGoogleTag();
            }
        });
    </script>
    <?php
}

Uitleg Cookie banner code

Cookie Banner HTML en CSS

De banner is simpel opgezet met een “Accepteer” knop die onderaan de pagina verschijnt als de toestemmingscookie niet is ingesteld.

JavaScript Logica

• Als de gebruiker geen cookies heeft geaccepteerd (gecontroleerd via een cookie), zal de banner worden weergegeven.
• Zodra de gebruiker op “Accepteer” klikt, wordt er een cookie (cookie_consent) ingesteld met de waarde ‘accepted’.
• Als cookies zijn geaccepteerd, laadt het script dynamisch Google Tag Manager (gtag.js).

Google Tag Manager Laden

Het Google Tag-script wordt alleen geladen als de gebruiker toestemming geeft, hetzij direct, of nadat de gebruiker op de “Accepteer” knop heeft geklikt.

Vervang Google Analytics Tracking ID

Zorg ervoor dat je YOUR_TRACKING_ID in het script vervangt door je daadwerkelijke Google Analytics Tracking ID.

Optioneel – Verbeter vormgeving cookie banner

Je kunt de stijl van de cookie-banner verder aanpassen met CSS om deze beter af te stemmen op het ontwerp van je website.

Met deze opzet wordt je Google Analytics-tag alleen geladen nadat de gebruiker toestemming geeft, wat je helpt om te voldoen aan privacyregelgeving zoals de GDPR.