[Aggiornata il 27 Dicembre 2019]

Qualcuno ha detto cookie? No, non è ora di fare merenda, mi spiace 😛

I cookie sono dei file che vengono creati attraverso degli script nel browser e vengono memorizzati dal device in uso (pc, tablet, smartphone ecc…).

A volte potrebbe servirti di creare un cookie da installare in un device. In questo modo il client ID dell’utente (ad esempio) viene “etichettato” e riconosciuto, dunque può essere utilizzato per altri scopi.

Ok, come faccio a creare un cookie?

Per creare un cookie ti serve una pagina web “speciale” del tuo sito web dove far navigare l’utente e soprattutto delle forbici con la punta arrotondata (per non fargli male).
Non è vero, scherzavo, ovviamente ti serve Google Tag Manager 🙂

Ora ti spiego come fare.

PREMESSA SUL COOKIEGEDDON E COOKIE WARS

Prima di lanciarci sulla guida che spiegherà come creare i cookie, ti consiglio di leggere l’articolo sul Cookiegeddon e Cookie Wars e guardarti il video di oltre 1 ora 🙂

Nota: i primi 2 step sono opzionali, potresti far eseguire il cookie in tutte le pagine.

STEP 1 – CREAZIONE DELLA PAGINA O DELLA VARIABILE URL

Innanzitutto devi fare in modo di avere, sul tuo sito web, una pagina apposita dove portare l’utente a cui vuoi “affibbiare” il cookie. Se installi il cookie in questa pagina, quando l’utente vi navigherà, scaricherà automaticamente il cookie sul suo device (pc, smartphone o tablet che sia).

Per creare questa pagina particolare, puoi procedere in due modi diversi.

1 – Se ne hai la possibilità, puoi creare fisicamente una pagina apposita in cui installare il Tag che vedremo più avanti.

2 – Se non ne hai la possibilità, non temere: Google Tag Manager ti viene in soccorso, aiutandoti a creare una Variabile URL Query o URL Fragment. In questa guida ti spiego come procedere con URL Query.

CREAZIONE DELLA VARIABILE URL QUERY:

  • Vai su Variabili > Variabili definite dall’utente > Nuova > Configurazione variabile.
  • Tipo di variabile: URL.
  • Tipo di componente: Query.
  • Chiave Query: inserisci il nome della Query, in questo caso mycookie.
  • Nomina la variabile “URL mycookie”.
  • Salva.

variabile creare file cookie google tag manager

STEP 2 – CREA L’ATTIVATORE PER IL TAG DI INSTALLAZIONE DEL COOKIE

  • Attivatore > Nuovo > Configurazione attivatore.
  • Tipo di Attivatore: Visualizzazione di pagina.
  • Attivazione: Alcune Visualizzazione di Pagina.
  • Attiva quando: URL mycookie è uguale a 1.

In realtà al posto di 1 puoi mettere qualsiasi valore a tuo piacimento, questo è giusto un esempio.

  • Nomina l’Attivatore, ad esempio “URL mycookie”.
  • Salva.

attivatore creare cookie google tag manager

STEP 3 – CREA IL TAG PER L’INSTALLAZIONE DEL COOKIE

Adesso, con un bellissimo Tag HTML Personalizzato, andremo a creare il file cookie.

  • Tag > Nuovo > Configurazione Tag > Tag HTML Personalizzato.
  • Incolla questo script:
<script>
function createCookie(name, value, days, domain, sameSite) {
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      var expires = "; expires=" + date.toGMTString();
    } else {
      var expires = "";
    }
    domainStr = (domain == null ? "" : "; domain=" + domain);
    sameSiteStr = (sameSite == null ? ";SameSite=none;Secure" : "; SameSite=" + sameSite);
    document.cookie = name + "=" + value + expires + "; path=/" + domainStr + sameSiteStr;
 }
 createCookie("mycookie","1",1000);
 </script>

Attenzione: se hai cambiato il valore del cookie, cambialo anche nello script. Lo stesso vale per il nome del cookie, che nel nostro caso specifico è “mycookie“.

  • Attiva su: seleziona l’Attivatore creato nello step 2 ““URL mycookie”.
  • Nomina il Tag “cHTML – Cookie – xxx”.

Magari al posto di “xxx” puoi scrivere la funzione per cui ti serve il cookie, così da ricordartelo.

  • Salva e pubblica.

tag HTML come creare cookie con google tag manager

Da adesso in poi, se navighi su pagine come

www.nomedeltuosito.it/?mycookie=1
oppure
www.nomedeltuosito.it/cartella/?mycookie=1
oppure
www.nomedeltuosito.it/cartella/miapagina.html?mycookie=1
oppure
www.nomedeltuosito.it/cartella/miapagina.html?key=valore&mycookie=1

o qualsiasi altro percorso che contenga la URL Query mycookie=1 (o altro valore che tu hai deciso), ti verrà installato un cookie sul browser.

 

Ora puoi verificare che navigando su queste pagine ti venga installato effettivamente il cookie, andando su: F12 > Cookies > http://www.nomedeltuosito.it

installare cookie google tag manager

Ecco fatto! Hai creato il tuo primo cookie! 😀 Ma vediamo cosa succede se vogliamo usarlo dentro Google Tag Manager.

Step 4 – Preleva il cookie con una variabile di tipo cookie con Google Tag Manager

Adesso che abbiamo creato e installato il cookie, potremmo voler prelevare il suo valore per usarlo dentro un Tag (anche come eccezione) oppure come condizione di un Attivatore. Per farlo ci basterà creare una Variabile.

  • Variabili > Nuova > Variabili definite dell’utente > Configurazione Variabile.
  • Tipo di Variabile: Cookie Proprietario.
  • Nome Cookie: scegliamo il cookie creato in precedenza, in questo caso mycookie.
  • Spunta Decodifica in formato URI il cookie.
  • Dai alla Variabile lo stesso nome del cookie, quindi “mycookie”.
  • Salva.

variabile2 creare file cookie google tag manager

Step 5 – Crea l’Attivatore del Cookie Proprietario

In questo passaggio andiamo a creare l’Attivatore che si attiverà in presenza del cookie con valore da noi scelto.

  • Attivatori > Nuovo > Configurazione Attivatore.
  • Tipo di Attivatore: Visualizzazione di pagina.
  • Si attiva su: Alcune visualizzazioni di pagina.
  • Attiva quando: mycookie è uguale a 1. Ricordati di cambiare i valori se li hai modificati in precedenza!
  • Puoi rinominare l’Attivatore sempre col nome del cookie, ovvero “mycookie”.
  • Salva

attivatore2 creare cookie google tag manager

Ecco fatto! Se tutto funziona come previsto, torna sul contenitore e clicca sul pulsante blu “Invia” per pubblicare ufficialmente le modifiche.

Adesso puoi utilizzare il cookie per i tuoi #barbatrucchi su Google Tag Manager 🙂 Buon Tag!

Condividi anche tu Google Tag Manager!
  • Reply

    Riccardo

    29 11 2020

    Ho installato passo passo come descritto ma non c’è niente su f12 > cookie > nomesito…. non c’è alcun “mycookie”…. come fare?

    • Federica

      29 11 2020

      Lo snippet che ci hai dato da incollare non è uguale a quello che hai mostrato nella configurazione del tag…. infatti il cookie non me lo da installato su f12… puoi dare delle dritte più precise?

    • Matteo Zambon

      30 11 2020

      Ciao Federica, nello screenshot ci sono altre funzioni che servono a leggere, cancellare e pulire il cookie. Quello riportato nel codice da copiare e incollare basta per quello che è spiegato nella guida.

      A presto!

    • Matteo Zambon

      30 11 2020

      Ciao, puoi condividere l’URL e la configurazione che hai fatto? Ho appena copiato e incollato lo script sulla console del mio browser ed eseguito e il cookie appare 🙂

      A presto!

  • Reply

    Giusi

    15 10 2020

    Ciao, come posso visualizzare le informazioni dei cookie con Google Tag Manager in WordPress utilizzando come Plugin per i cookie Borlabs Cookie?

    • Matteo Zambon

      19 10 2020

      Ciao Giusi, non conosco il Plugin quindi non ne ho idea :\ Tieni presente che i Cookie sono nel browser e non in GTM, quindi qualsiasi script che analizzi i cookie ci riesce 🙂

      Fammi sapere

  • Reply

    Arthur

    22 03 2019

    Ciao Matteo,

    Tu per caso sai come faccio ad aggiungere il cookie che funziona solo per la Sessione attuale ?
    Ho trovato online degli articoli che dicono che basta lasciare vuoto il parametro “days” ma se lo lascio vuoto mi da 1969 come expires date.
    Hai qualche idea ?

    Grazie 🙂

    • Matteo Zambon

      25 03 2019

      Sessione attuale (su Google Analytics) significa che ad ogni hit dovresti aggiornare il cookie per 30 minuti. Ti consiglierei di usare il local storage 🙂

  • Reply

    Davide

    22 09 2017

    Bella guida boss 😉

    Domanda da 1 milione di bitcoin: non è possibile in una vista non-user-ID (vista normale quindi) cambiare il client ID tramite utilizzo del cookie, giusto? Avrò sempre un client-ID anonimo in base al dispositivo, corretto?

    • Matteo Zambon

      02 10 2017

      Il client ID lo puoi modificare via cookie (o cambiandolo nel protocollo di misurazione). E sì, il client ID è cookie e quindi legato al device/browser.

      Scusa il ritardo ma era finita in spam (forse la email 😀 )

  • Reply

    luca

    22 09 2017

    ciao con questo metodo il cookie verrà creato anche per i sottodomini es blog.nomedeltuosito.it o news.nomedeltuosito.it ?

    in tal caso non sarebbe possibile specificare un singolo dominio su cui farlo attivare es limitarlo a http://www.nomedeltuosito.it ?

    ciao!

    • Matteo Zambon

      25 09 2017

      Ciao, il cookie viene associato al dominio dove il JS sta girando.

      A presto!

Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.