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
cookieConsentcookie. 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
cookieConsentcookie. 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.