Nell’articolo andremo a capire come attivare/disattivare i Javascript previo consenso attivo dell’utente che sta navigando.
Se un tempo era possibile far accettare i cookie allo scroll della pagina e quindi attivare praticamente subito i pixel di tracciamento per Analytics, Facebook, Hotjar etc. adesso questo non è più possibile e dobbiamo chiedere il consenso attivo all’utente.
Tipicamente viene mostrato all’utente una richiesta per procedere con i cookie necessari o poter attivare anche eventuali script facoltativi.
Nell’esempio andremo a realizzare un sistema che, senza l’uso di tool esterni quali il Google Tag Manager o altro ci permetta di fare cose analoghe per il nostro uso quotiano. Iniziamo quindi!
Per prima cosa andremo a realizzare una pagina chiamata index.php con questo codice:
<html>
<head>
</head>
<body>
<p>Verifichiamo come attivare il tracciamento con ajax</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-XX"></script>
<?php
if (!(isset($_COOKIE['cookieBarra'])))
{
?>
<div id="show_banner_cookies">
<p>
<b>Il sito utilizza cookie tecnici, statistici e di marketing.</b><br />
Puoi modificare le tue preferenze dalla nostra cookie policy <a href='cookie.php'>cliccando qui</a>
</p>
<p><a href="#" onclick="chiudi(1); return false;" >Continua senza tracciamento</a></p>
<p><a href="#" onclick="chiudi(0); return false;" >Attiva il tracciamento</a></p>
</div>
<script type="text/javascript">
function chiudi(valore)
{
if (valore==0)
{
// Carico i js...
$.ajax({
type: "POST",
url: "js/mostraJs.php",
data: "ok",
dataType: "script",
success: function(resData) {
document.getElementById('show_banner_cookies').style.display = "none";
}
});
}
if (valore == 1)
document.getElementById('show_banner_cookies').style.display = "none";
}
</script>
<?php
}
else
{
?>
<script type="text/javascript">
$( document ).ready(function() {
// Carico i js...
$.ajax({
type: "POST",
url: "js/mostraJs.php",
data: "ok",
dataType: "script",
success: function(resData) {
}
});
});
</script>
<?php
}
?>
</body>
</html>Come si vede nell’esempio viene chiamata la libreria Jquery esterna da Google ed avviato l’attivatore per tracciare gli eventi su Google Analytics 4 ma non viene inviato nessun evento in modo che la pagina rispetti le nuove normative.
Occorre personalizzare il codice sopra inserendo il proprio codice UA al posto di UA-XXXXXXX-XX
Andiamo quindi a creare la cartella js dove andremo ad inserire il file chiamato mostraJs.php il seguente codice.
<?php
echo('
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
setCookie("cookieBarra","ok",30);
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(\'js\', new Date());
gtag(\'config\', \'UA-XXXXXXX-XX\');
');
?>Il codice seguente va ad iniettare nella pagina il codice javascript che ci occorre per creare/eliminare i cookie e per andare a tracciare le pageviews su Analytics con il nuovo tag.
Andiamo quindi a creare il file cookie.php nella cartella principale del nostro progetto con il seguente codice:
<?php
ini_set('session.cache_limiter','public');
session_cache_limiter(false);
session_start();
isset($_GET['delCookie']) ? $delCookie = (strip_tags($_GET['delCookie'])) : $delCookie = "100";
$checkedMarketing = "";
// Cancello il cookie?
if ( ($delCookie == "si") AND (isset($_COOKIE['cookieBarra'])) )
{
setcookie("cookieBarra", "", time() - 3600);
header('Location: cookie.php');
die();
}
else
{
if ($delCookie == "no")
{
setcookie("cookieBarra", "ok", time() + 36000);
header('Location: cookie.php');
die();
}
if (isset($_COOKIE['cookieBarra']))
$checkedMarketing = "checked";
}
?>
<html>
<head>
</head>
<body>
<input id='marketingcookiesflag' name='marketingcookie' onclick='if (this.checked == false) { document.location="cookie.php?delCookie=si"; return false; } else { document.location="cookie.php?delCookie=no"; return false;}' <?php echo($checkedMarketing); ?> type='checkbox' value='si' >Se flaggato il tracciamento è attivo.<br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-XX"></script>
<?php
if (!(isset($_COOKIE['cookieBarra'])))
{
?>
<div id="show_banner_cookies">
<p><b>Il sito utilizza cookie tecnici, statistici e di marketing.</b><br />
Puoi modificare le tue preferenze <a href='cookie.php'>cliccando qui</a>
</p>
<p><a href="#" onclick="chiudi(1); return false;" >Continua senza accettare</a></p>
<p><a href="#" onclick="chiudi(0); return false;" >Attiva il tracciamento</a></p>
</div>
<script type="text/javascript">
function chiudi(valore)
{
if (valore==0)
{
// Carico i js...
$.ajax({
type: "POST",
url: "js/mostraJs.php",
data: "ok",
dataType: "script",
success: function(resData) {
document.getElementById('show_banner_cookies').style.display = "none";
}
});
}
if (valore == 1)
document.getElementById('show_banner_cookies').style.display = "none";
}
</script>
<?php
}
else
{
?>
<script type="text/javascript">
$( document ).ready(function() {
// Carico i js...
$.ajax({
type: "POST",
url: "js/mostraJs.php",
data: "ok",
dataType: "script",
success: function(resData) {
}
});
});
</script>
<?php
}
?>
</body>
</html>In questo modo saremo in grado di iniettare nella nostra pagina i codice di tracciamento che ci occorrono di qualsiasi fonte in modo da essere compliant con la normativa vigente ed attivarli solo nel momento in cui l’utente accetta esplicitamente il tracciamento.
Per dubbi o chiarimenti scrivi nei commenti e sarò lieto di aiutarti.