Guida Avanzata: Come Creare un File Cookie con Google Tag Manager

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

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.

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.

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

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.

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

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!