Set 2019

Guida Avanzata: Come Installare Cookie Saver e salvarti dall’ITP e dal Cookiegeddon

In questa guida ti spiegherò come salvarti definitivamente dal Cookiegeddon creato dall’ITP attraverso il servizio di Cookie Saver (puoi iscriviti attraverso questo link)

Finalmente potrai essere sicuro che i cookie continueranno ad esistere e non perderai il tracciamento di Google Analytics, Hotjar, Cookiebot, Iubenda e così via.

Le cose da fare sono principalmente tre:

Avere l’accesso al pannello del vostro gestore del dominio perché dovrete inserire due nuovi CNAME
Avere la possibilità di inserire uno script JavaScript prima dello snippet di Google Tag Manager
Avere già l’elenco dei nomi dei cookie che vuoi salvare dal Cookiegeddon per inserirli in un Tag HTML personalizzato di Google Tag Manager.

Quindi per risolvere il problema devi avere fisicamente la possibilità di avere queste condizioni.

Bando alle ciance, sei pronto?

STEP 1 – CREA UN ACCOUNT SU COOKIE SAVER

Il primo step ovviamente è quello di avere un account su Cookie Saver. Ti consiglio vivamente di iscriverti a questo link in quanto Tag Manager Italia è un rivenditore ufficiale (e potremmo darti supporto):

Registrati da questo link a Cookie Saver

Bene ora non ti resta che fare login e passare al prossimo step.

STEP 2 – CREA UN NUOVO SETUP SU COOKIE SAVER

Ora che sei qui devi creare un nuovo setup di Cookie Saver.

Lo puoi fare andando sul tuo profilo scegliendo la voce “Create Setup“.

A questo punto dovrai inserire il Name e il Subdomains.

Vediamo di capire cosa diavolo vuol dire.

Name è semplicemente il nome de tuo Setup. Quindi non ha alcuna rilevanza il nome che darai.

Subdomains è il dominio che Cookie Saver userà come appoggio per salvare i Cookie. Ad esempio se il tuo sito è www.nomedeltuosito.it potresti inserire cookiesaver.www.nomedeltuosito.it

Puoi inserire qualsiasi valore al dominio di terzo/quarto livello, ovviamente deve non essere già presente nella lista dei tuoi domini 🙂

In questa guida puoi trovare altri esempi.

Facciamo quindi l’esempio che io abbia un dominio senza il www davanti, devo quindi fare così:

Nome: “Nome del Tuo Sito“
Subdomains: “cookiesaver.nomedeltuosito.it“
Premi “Create“

A questo punto avrai la conferma e un messaggio che ti inviterà ad aspettare fino ad un massimo di 30 minuti per la creazione del DNS da parte di Cookie Saver.

Una volta passato il tempo necessario ti arriverà anche una email dove ti verranno indicati i record DNS da inserire nel tuo pannello di gestione dominio.

Avrai anche nel pannello i due record DNS da impostare:

Nel dettaglio i record creati nell’esempio sono questi:

DNS records for: cookiesaver.nomedeltuosito.it

Name: _e97155ae1847e785b2f86e2db6236ec3.cookiesaver.nomedeltuosito.it.
Type: CNAME
Value: _e2098f742eab33c7a21cafc2b36465f9.duyqrilejt.acm-validations.aws.


Name: cookiesaver.nomedeltuosito.it
Type: CNAME
Value: in-risalto-srl-nome-del-tuo-sito.cookiesaver.accutics.net.

Non ci resta che configurare il DNS dal nostro pannello di gestione dominio.

STEP 3 – CREA I DUE RECORD DNS DI TIPO CNAME SUL TUO DOMINIO

Se non hai idea dove sbattere la testa, chiedi al reparto IT o più semplicemente a chi ha acquistato il dominio.

Quindi loggati sul tuo pannello (Go Daddy nel mio caso):

E aggiungi i due record DNS con tipologia CNAME.

A questo punto dovrai attendere che il tuo gestore del dominio applichi i records DNS e che Cookie Saver li veda.

[Attendi un po’ di tempo]

Boom! Eccolo!

Step 4 – Inserisci lo script JavaScript sul tuo sito

Bene, lato server tutto e gestito. Ora quello che bisogna fare è inserire uno script all’interno di tutte le pagine del tuo sito web, PRIMA dello snippet di Google Tag Manager.

Dove trovi lo script? A questa pagina: app.cookiesaver.io/instructions troverai una voce “Preload Script“.

Dovresti vedere una cosa del genere:

Nel dettaglio:

Copia lo script: Accutics Cookie Saver Preload
Incollalo nell’elemento <head> delle tue pagine: sopra lo snippet di GTM

<!-- Accutics Cookie Saver Preload -->
<script>
(function(){function r(n,t,e){function i(o,u){if(!t[o]){if(!n[o]){var f="function"==typeof require&&require;if(!u&&f)return f(o,!0);if(a)return a(o,!0);var c=new Error("Cannot find module '"+o+"'");throw c.code="MODULE_NOT_FOUND",c}var s=t[o]={exports:{}};n[o][0].call(s.exports,function(r){var t=n[o][1][r];return i(t||r)},s,s.exports,r,n,t,e)}return t[o].exports}for(var a="function"==typeof require&&require,o=0;o<e.length;o++)i(e[o]);return i}return r})()({1:[function(r,n,t){"use strict";function e(r,n){return o(r)||a(r,n)||i()}function i(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function a(r,n){var t=[];var e=true;var i=false;var a=undefined;try{for(var o=r[Symbol.iterator](),u;!(e=(u=o.next()).done);e=true){t.push(u.value);if(n&&t.length===n)break}}catch(r){i=true;a=r}finally{try{if(!e&&o["return"]!=null)o["return"]()}finally{if(i)throw a}}return t}function o(r){if(Array.isArray(r))return r}(function(r,n){var t="3.1";var i=Date.now();function a(){var r="cs_test_cookie=1";var n=document.location.hostname.split(".");for(var t=n.length-1;t>=0;t--){var e=n.slice(t).join(".");document.cookie=r+";domain=."+e+";";if(document.cookie.indexOf(r)>-1){document.cookie=r.split("=")[0]+"=;domain=."+e+";expires=Thu, 01 Jan 1970 00:00:01 GMT;";return e}}return document.location.hostname}function o(r,n){var t=[n];var e=r.substring(0,r.length-n.length);if(e.length>0){var i=e.split(".");i.pop();var a=n;for(var o=i.length-1;o>=0;o--){a=i[o]+"."+a;t.push(a)}}return t}function u(r,n,t,e,i){var a=r+"="+n+";";if(t!==null){a+="expires="+t+";"}if(e!==null){a+="domain="+e+";"}if(i){a+="secure;"}a+="path=/;";document.cookie=a}var f=Date.now();var c=[];var s=document.cookie;if(!s){return}var l=a();var v=o(document.location.hostname,l);s=s.split(/; */);var h={};for(var d=0;d<s.length;d++){h[s[d].substring(0,s[d].indexOf("="))]=s[d].substring(s[d].indexOf("=")+1)}var p="_acs_";var g="_acs__acsr_";var m=[];Object.entries(h).forEach(function(r){var n=e(r,2),t=n[0],i=n[1];if(t.indexOf(p)===0){var a=true;for(var o in v){if(t===p+v[o]){a=false;break}}if(a){m.push(t);return}try{var s=JSON.parse(h[t]);if(s.c){var l=t.substring(p.length);for(var d=0,g=Object.entries(s.c);d<g.length;d++){var b=e(g[d],2),x=b[0],w=b[1];var O=parseInt(w.e,36)*1e3;if(!(x in h)&&O>f){u(x,w.v,new Date(O).toUTCString(),w.r?null:"."+l,w.s?true:false)}}}}catch(r){c.push({n:t,v:h[t],e:r})}}});m.forEach(function(r){var n=h[r];if(r.indexOf(g)===0){if(!(r.substring(g.length)in h)){u(r.substring(g.length),n,null,null,null);return}}if(r.indexOf(p)===0){if(!(r.substring(p.length)in h)){u(r.substring(p.length),n,null,l,null)}}});var b=Date.now();r.acqps={v:t,s:i,e:b,t:b-i,w:c}})(window)},{}]},{},[1]);
</script>
<!-- End Accutics Cookie Saver Preload -->

Il risultato dovrebbe essere una cosa simile a questa:

Bene, ora non ci resta che decidere quali cookie salvare e gestirli con Google Tag Manager 🙂

Step 5 – Indentifica i cookie che vuoi salvare

Siamo quasi arrivati alla fine del salvataggio dei cookie. Prima però devi essere sicuro di quali vuoi salvare 😀

Ricorda che a noi interessano solo i cookie di prima parte. Ecco un elenco dei più utilizzati (in rosso valori variabili):

- _ga (Google Analytics)
- _fbp (Facebook)
- _fpc (Facebook)
- CookieConsent (Cookiebot)
- _iub_cs-XXXYYY (Iubenda)

Step 6 – Crea il tag HTML personalizzato su Google Tag Manager

Siamo alla fase finale di configurazione dove grazie a Google Tag Manager permetteremo di dire a Cookie Saver quali cookie vogliamo salvare.

Preleviamo lo snippet di codice:

<!-- Accutics Cookie Saver -->
<script>
(function(e,t,n,c,a,u,o){if(e.acq){return}a=function(){a.callMethod?a.callMethod.apply(a,arguments):a.queue.push(arguments)};e.acq=a;a.push=a;a.loaded=true;a.version="3.0";a.queue=[];u=t.createElement(n);u.async=true;u.src=c;o=t.getElementsByTagName(n)[0];o.parentNode.insertBefore(u,o)})(window,document,"script","https://cdn.accutics.net/cookiesaver/3/main.min.js");
// Add custom cookie configuration here!

</script>
<!-- End Accutics Cookie Saver -->

E aggiungiamo delle righe sotto al commento Add custom cookie configuration here!

Gestiamo l’inizializzazione (init)

La prima cosa che dobbiamo aggiungere è l’evento init:

acq("init", {
"endpoint": "INSERT ENDPOINT",
"domain": "INSERT WEBSITE DOMAIN"
});

Aspetta ora ti spiego cosa diavolo significano endpoint e domain:

endpoint è il nome del sottodominio che hai precedentemente inserito nella configurazione di Cookie Saver e del CNAME del record DNS del dominio
domain è il top level domain che tradotto significa il nome del tuo sito senza il www davanti 🙂

Quindi nel nostro esempio si tramuterà in:

acq("init", {
"endpoint": "cookiesaver.nomedeltuosito.it",
"domain": "nomedeltuosito.it"
});

Semplice no?

Parametri avanzati dell’init

Di default il sistema di Cookie Saver è pensato per solo i browser Safari. Questo parametro è di tipo booleano (true o false) e di default è a true (quindi se non lo metti Cookie Saver lo considera a true). Se vuoi far in modo che funzioni fregandosene di quale browser gestirà i cookie dovrai aggiungere un parametro nell’init chiamato: safariOnly.

Un altro parametro è httpsOnly che di default è a true. Se lo metti a false significa che il tuo sito risponde solo http o su entrambi.

acq("init", {
"endpoint": "cookiesaver.nomedeltuosito.it",
"domain": "nomedeltuosito.it",
"safaryOnly": false,
"httpsOnly": false
});

Se vuoi rimanere aggiornato ecco la guida ufficiale.

Configurazione di cookie

Dopo l’inizializzazione quello che dovremmo fare sarà inserire l’elenco di tutti i cookie, indicando i giorni di permanenza di quei cookie.

Anche qui dobbiamo inserire delle righe di codice, una per ogni cookie 🙂

acq("addCookie", {
"name": "_ga",
"expirationDays":730
});

Vediamo un po’ cosa significano i parametri.

name è il nome effettivo del cookie. In questo caso _ga è quello di Google Analytics.
expirationDays è il numero di giorni che il cookie deve sopravvivere. In questo caso 730 giorni sono due anni.

Parametri avanzati

Esistono dei parametri aggiuntivi che possiamo inserire per ogni configurazione del cookie:

acq("addCookie", {
"name": "INSERT COOKIE NAME",
"expirationDays": INSERT VALUE,
"safariOnly": INSERT VALUE,
"domain": "INSERT DOMAIN",
"autoExtend": INSERT VALUE,
"backup": INSERT VALUE,
"secure": INSERT VALUE 
});

Andando con ordine vediamoli uno ad uno.

safariOnly lo abbiamo già visto. È identico. Di default è a true e semplicemente sovrascrive l’impostazione che ha lo stesso parametro nell’init.
domain molto utile nel caso in cui il cookie non si trova nel top domain (ovvero nomedeltuosito.it) ma si trova su un altro sottodominio (esempio shop.nomedeltuosito.it)
autoExtend è un altro valore booleano (true o false). Di default è a true e identifica se il tempo di permanenza del cookie riparte da zero ogni volta che l’utente lo carica.
backup sempre un booleano e identifica se si vuole creare un cookie di backup con prefisso “_acs_”. Di default è a true.
secure valore booleano che indica a CookieSaver di ripristinare il cookie originale come sicuro.

Per restare sempre informato ecco la guida ufficiale.

Facciamo partire Cookie Saver

L’ultima cosa che manca dopo aver inserito tutti i cookie è far partire Cookie Saver. Basterà questa semplice istruzione:

acq("start");

Yeah! Dai che ci manca poco 😉

Installiamo tutto con Google Tag Manager

Bene, ora che abbiamo la lista non ci resta che installare tutto.

Ovviamente per farlo useremo un Tag di tipo HTML personalizzato. Daremo anche una priorità all’attivazione del Tag rispetto agli altri.

Tag > Nuovo > Configurazione tag.
Tipo di tag: Tag HTML personalizzato.
Incolla lo snippet di Cookie Saver.
Attivazione: All pages (Tutte le pagine)
Impostazioni avanzate > Priorità di attivazione > 99999.

Dovresti incollare una cosa del genere:

<script>
(function(e,t,n,c,a,u,o){if(e.acq){return}a=function(){a.callMethod?a.callMethod.apply(a,arguments):a.queue.push(arguments)};e.acq=a;a.push=a;a.loaded=true;a.version="1.0";a.queue=[];u=t.createElement(n);u.async=true;u.src=c;o=t.getElementsByTagName(n)[0];o.parentNode.insertBefore(u,o)})(window,document,"script","https://cdn.accutics.net/cookiesaver/2/main.min.js");

acq("init", {
"endpoint": "cookiesaver.nomedeltuosito.it",
"domain": "nomedeltuosito.it",
"safariOnly":false
}); 

acq("addCookie", {
"name": "_ga",
"expirationDays":730
});
acq("addCookie", {
"name": "_fbp",
"expirationDays":90
});
acq("addCookie", {
"name": "_fbc",
"expirationDays":90
});
acq("addCookie", {
"name":"CookieConsent",
"expirationDays":365,
"autoExtend":false
});
acq("start");
</script>

Salva, metti i debug mode e verifichiamo se tutto è ok 🙂

Step 7 – Verifica da debug mode

Non ci resta che verificare se è tutto effettivamente funzionante. Per farlo devi usare la console degli sviluppatori del tuo browser (io userò Google Chrome) ed andare sulla gestione dei cookie.

Abilita per sviluppatori: tasto destro oppure dal menù a pallini in alto a destra > altri strumenti > Strumento per sviluppatori
Seleziona il tab: Application.
Voci laterali scegli: Cookie e il dominio del sito (nel mio caso demo.tagmanageritalia.it)
Filtra: cercara “_acs” e troverai tutti i cookie di backup
Cancella un cookie: filtra e cancella il cookie “_ga” dovresti vedere che si ricrea dopo qualche secondo

Bene ce l’hai fatta!

Ci siamo salvati dal Cookiegeddon

Grazie a questo bellissimo #barbatrucco ora non hai più scuse per continuare ad avere i dati e il tracciamento dei tuoi siti corretti.

Ti ricordo che se vuoi provare a utilizzare questo servizio puoi farlo con una trial di 14 giorni 🙂
Però mi raccomando, iscriviti dal mio link partner: Registrati da questo link a Cookie Saver

Ti è stata utile questa guida? Fammelo sapere nei commenti!