I stand up for children in need. Please join me in helping this family.

Skip to content
Steven Roland

How to Create a Cookie Consent Banner with PHP and JavaScript

HTML , JavaScript , PHP , Google Analytics

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.

Support My Work

If you enjoy my content, consider supporting me through Buy Me a Coffee or GitHub Sponsors.

Buy Me A Coffee
or

More posts

Supercharge Your Laravel Debugging with Telescope

Laravel Telescope is a powerful debugging and monitoring tool for Laravel applications. It offers features like request monitoring, exception tracking, database query logging, and job queue monitoring. Key uses include performance optimization, debugging production issues, API development, and error tracking. Best practices involve securing access, limiting data collection, using tags, and regular data pruning.

Laravel's email Validation Rule: Ensuring Valid Email Addresses

This post explains Laravel's email validation rule, its usage, and provides real-world examples for user registration, newsletter subscription, and contact form submission. It also covers advanced usage, error handling, and best practices for email validation.