In questo tutorial vedremo come permettere agli utenti di negare il loro consenso all'uso di cookie di terze parti.
Per cominciare creiamo un semplice file JavaScript che simulerà la creazione di un cookie di terze parti.
'use strict';
(function() {
const date = new Date();
const daysToExpire = 365;
const cookieName = 'testcookie';
const cookieValue = 'test';
date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
document.cookie = `${cookieName}=${cookieValue}; expires=${date.toGMTString()}`;
})();
La logica è questa: se l'utente acconsente all'uso dei cookie, inseriamo lo script nell'elemento head delle pagine, viceversa non lo inseriamo. Per memorizzare la scelta dell'utente useremo un nostro cookie tecnico oppure potremmo usare il web storage ma in questo caso non saremo in grado di gestirne la durata e l'utente avrà più difficoltà a gestirlo nel browser.
Scriviamo quindi:
<head>
<?php if(isset($_COOKIE['cookies-accepted']) && intval($_COOKIE['cookies-accepted']) == 1): ?>
<script src="/js/cookie.js"></script>
<?php endif; ?>
</head>
L'inserimento del banner di scelta seguirà la stessa logica:
<?php if(!isset($_COOKIE['cookies-accepted'])): ?>
<div id="cookie-policy-banner">
<p>
Lorem ipsum dolor sit amet ete ideo autem aquis ut meus est mos.
</p>
<div>
<button type="button" id="reject-cookie-policy" data-choice="0">No thanks</button>
<button type="button" id="accept-cookie-policy" data-choice="1">Accept</button>
</div>
</div>
<?php endif; ?>
Il banner verrà inserito solo se l'utente non ha ancora effettuato una scelta. Gli attributi di dati dei pulsanti serviranno ad effettuare l'operazione via AJAX (di seguito useremo jQuery). Quindi implementiamo la creazione del cookie che memorizzerà la scelta dell'utente:
$choice = intval($_POST['choice']);
$allowed_choices = [0, 1];
if(!in_array($choice, $allowed_choices)) {
header('HTTP/1.1 400 Bad Request');
exit;
}
setcookie('cookies-accepted', $choice, time() + 60 * 60 * 24 * 365);
echo $choice;
exit;
Noterete che entrambi i cookie hanno una scadenza di 1 anno. Questo valore è usato in modo puramente indicativo e si può adattarlo alle varie esigenze della vostra policy.
Non ci resta che implementare la richiesta in AJAX:
"use strict";
$(function() {
var $cookieBanner = $( "#cookie-policy-banner" );
if( $cookieBanner.length ) {
$cookieBanner.find( "button" ).click(function() {
var choice = $( this ).data( "choice" );
$.post( "ajax.php", { choice: choice }, function( res ) {
if( $.isNumeric( res ) ) {
window.location = location.href;
}
});
});
}
});
Qui ci limitiamo a ricaricare la pagina corrente in modo da rendere immediatamente effettive le modifiche apportate.