Create a Cookie Consent Banner with PHP & JavaScript

In today's digital landscape, respecting user privacy and complying with regulations like GDPR is crucial. One way to do this is by implementing a cookie consent banner on your website. This tutorial will guide you through creating a simple cookie consent banner using pure PHP and JavaScript, ensuring that tracking scripts like Google Tag Manager (GTM) or Google Analytics (GA) are only loaded after the user consents.

Step 1: HTML and CSS for the Cookie Banner

The first step is to create the HTML structure for the cookie consent banner and style it using CSS. This banner will appear at the bottom of your webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #cookieConsent {
            position: fixed;
            bottom: 0;
            background-color: #333;
            color: white;
            width: 100%;
            padding: 10px;
            text-align: center;
            display: none; /* Initially hidden */
        }

        #cookieConsent button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="cookieConsent">
        <p>We use cookies to improve your experience. By clicking "Accept", you consent to the use of cookies.</p>
        <button id="acceptCookies">Accept</button>
    </div>
</body>
</html>

Step 2: JavaScript for Handling Consent

Next, add JavaScript to manage the display of the banner and store the user's consent in a cookie. This script will also handle loading the tracking scripts once consent is given.

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Check if the cookie consent has been given
        if (!document.cookie.split('; ').find(row => row.startsWith('cookieConsent='))) {
            document.getElementById('cookieConsent').style.display = 'block';
        }

        document.getElementById('acceptCookies').addEventListener('click', function() {
            // Set a cookie to remember the user's consent
            document.cookie = "cookieConsent=accepted; path=/; max-age=" + 60*60*24*30; // 30 days
            document.getElementById('cookieConsent').style.display = 'none';
            loadTrackingScripts();
        });
    });

    function loadTrackingScripts() {
        // Load Google Tag Manager or Google Analytics scripts here
        var script = document.createElement('script');
        script.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXX'; // Replace with your GTM ID
        document.head.appendChild(script);
    }
</script>

Step 3: PHP to Check Consent on Server-Side

Finally, use PHP to check if the user has already given consent. If consent is present, you can include the tracking scripts directly in the page.

<?php
if (isset($_COOKIE['cookieConsent']) && $_COOKIE['cookieConsent'] == 'accepted') {
    echo '<script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXX"></script>'; // Replace with your GTM ID
}
?>

Explanation

HTML/CSS: The consent banner is styled to appear at the bottom of the page. It is initially hidden and only displayed if consent has not been given.
JavaScript: The script checks for a cookieConsent cookie. If not found, it displays the banner. When the user clicks "Accept," a cookie is set, and the banner is hidden. The tracking scripts are then loaded.
PHP: On the server side, PHP checks the cookieConsent cookie. If consent is already given, it includes the tracking script directly in the page.

This setup ensures that Google Tag Manager or Google Analytics scripts are only loaded after the user has explicitly accepted the cookie policy, complying with GDPR requirements.

By following these steps, you can create a simple yet effective cookie consent banner that respects user privacy and aligns with legal standards.

How to Create a Cookie Consent Banner with PHP and JavaScript

Step 1: HTML and CSS for the Cookie Banner

Step 2: JavaScript for Handling Consent

Step 3: PHP to Check Consent on Server-Side

Explanation

More posts

Streamlining Code Style with Laravel Pint

The "Support" Stage: Your Full-Service Partner for Continued Success

The Power of Words: Markus Zusak's Poetic Insight in "The Book Thief"