Vediamo adesso uno dei concetti probabilmente più complicati del Google Tag Manager, ma anche uno dei più importanti.

Questo concetto è il data layer.

Facciamo un piccolo passo indietro.

Immaginiamo che noi abbiamo installato il Google Tax manager All'interno del nostro sito web, dopodiché abbiamo fatto delle configurazioni lato pannello web.

Ora, come fanno queste due parti a comunicare lo strumento che viene utilizzato per mettere in comunicazione la pagina web col pannello di Google Top manager? Anzi, nello specifico con la configurazione che noi abbiamo fatto nel pannello Google Top Manager è proprio il data layer.

Noi dobbiamo immaginarselo a livello molto elementare, come se fosse un WhatsApp che mette in comunicazione la pagina col pannello ogni volta che il data layer viene eseguito.

In pratica è come se partisse un messaggio dalla pagina arrivasse al pannello é sulla base del messaggio che arriva il pannello decide di fare qualcosa.

Facciamo un esempio pratico immaginiamo che noi abbiamo un sito e-commerce e vogliamo tracciare l'acquisto sulla homepage.

Quindi l'utente acquista un prodotto, viene indirizzato sulla pagina di ringraziamento di acquisto e noi in quel momento vogliamo effettuare il tracciamento proprio della transazione che è stata effettuata.

Ora noi dobbiamo far arrivare al pannello di Google Top manager tutte le informazioni perché lui possa eseguire poi il tacco di tracciamento di Google Analytics, inviare a Google Analytics tutte le informazioni su che cosa è stato acquistato, qual è il prodotto, qual è il prezzo, quanto erano le quantità, quanto erano eventualmente le tasse tutte le informazioni associate alla transazione.

Ora queste informazioni chiaramente cambiano di transazioni in transazione, quindi non sono informazioni che io posso scrivere direttamente all'interno del pannello o la necessità di recuperarle dalla pagina proprio al momento in cui L'utente acquista per poterle recuperare.

Io dirò al mio sviluppatore di inserire all'interno del sito questo codice che si chiama Data layer di fare in modo che quando l'utente acquistato nel data layer vengano inserite tutte le informazioni rispetto alla sua transazione e questo codice venga eseguita in modo tale che queste informazioni siano passate al Google Tag Manager, pannello che seguirà le sue configurazioni per fare in modo che poi scatta il tag di Google Analytics e che invia i dati al pannello di Google Analytics.

Quindi in pratica il data layer l'abbiamo utilizzato per mettere in comunicazione dei dati che altrimenti non sapevamo come portare all'interno del pannello del top manager e di conseguenza su google analytics.

Ora però il data layer in realtà non viene utilizzato soltanto da noi, quando ad esempio vogliamo fare il tracciamento di e-commerce o di qualche altra cosa per cui abbiamo necessità di portare informazioni da tailleur, è proprio lo strumento unico di comunicazione che usa il tag manager anche per se stesso.

Per esempio, quando noi clicchiamo un pulsante, il tag manager automaticamente fa eseguire un codice da player che manda le informazioni del pulsante cliccato attraverso il player di nuovo al pannello del tag manager, li mette a disposizione di tutti i tag e attivatori.

Ora vediamo come è fatto questo player qui mi trovo nella pagina della guida di google top manager.

Vediamo proprio un codice.

Quindi gli sviluppatori chiaramente non avranno alcuna difficoltà a interpretare queste scritte.

Però le persone senza un background tecnico magari potrebbero spaventarsi un minimo.

Nessuna paura adesso ce lo vediamo in maniera abbastanza tranquilla.

Qua vediamo di fatto proprio la scritta da thayer questo è come se fosse la nostra lista della spesa dove invece di esserci scritto lista della spesa c' è scritto da tailleur all'interno di queste parentesi c' è la nostra lista.

Questa non è la lista della spesa, ma è la lista di tutte le informazioni che noi vogliamo passare dalla pagina Pannella Google Tag Manager e queste informazioni sono di fatto una serie di righe.

Vedete qui C' è il nome del campo che vogliamo passare e qui c' è il valore del campo che vogliamo passare.

Quindi in questo caso, per esempio, stiamo dicendo che la page category, quindi il campo che si chiama category ha valore.

Poi però abbiamo una virgola e quindi abbiamo un'ulteriore informazione che il campo visitor types in questo caso ha valore high value.

Questa lista, chiaramente che stiamo vedendo, è solo un esempio.

Noi possiamo costruire la nostra lista con tutte le informazioni specifiche che di volta in volta, a seconda delle azioni degli utenti delle pagine che stanno vedendo, possiamo inviare la Google Tax Manager per poi poterle farle processare via pannello e inviare a Google Analytics.

Ora come facciamo però a operare su questa lista? Quello che dobbiamo fare in realtà e fare in modo che all'interno del sito vengano eseguiti dei codici che non sono esattamente uguale a quello che abbiamo appena mostrato, ma che siano esattamente simili a questo, cioè da tailleur punto push Voi immaginate che da tailleur è proprio questa lista di informazioni.

Ora questa lista di informazioni proprio all'inizio inizio è completamente vuota.

Però man mano che succedono cose all'interno della pagina, la lista inizia a riempirsi con nuove informazioni e come dicevo prima, queste informazioni possono anche essere aggiunte da Google Tag Manager stesso.

Per esempio, quando viene caricato il codice contenitore del Google Tag Manager da tailleur, inizia a riempirsi con delle informazioni che specificano alcune cose che stanno succedendo nella pagina.

Noi possiamo aggiungere informazioni a questa lista e per aggiungere informazioni, quello che dobbiamo fare eseguire proprio un codice di questo tipo che si chiama Data layer push.

Immaginate che proprio l'operazione di Pouchy è io che vado a inserire all'interno della lista nuove informazioni con questa caratteristica che se il campo quindi in questo caso il nome che mi trovo qui nella colonna sinistra era già presente nella lista, io andrò a modificare il valore che già era presente.

Quindi se qui nella lista c'era scritto color uguale a Blue, io con questa istruzione che vediamo qui a schermo vado a fare in modo che questo variabile color valga adesso Red, quindi andando a modificare un'informazione esistente.

Se però questo campo non c' era già nella lista, il campo viene aggiunto ex novo, quindi è come se ci fossero una nuova informazione, una nuova riga che viene aggiunta all'interno della DALAYER e che quindi è a disposizione del pannello del Google Top manager.

Ora, in questa lista di informazioni, le informazioni sono tutte diciamo dal punto di vista logico, simili.

Nel senso sono informazioni che io posso passare relativamente a qualsiasi cosa, per esempio attributi utente, attributi della pagina, attributi degli elementi cliccati e così via, tranne un campo che si chiama event, che è questo qui che stiamo andando a schermo.

Questo campo event è particolare perché di fatto viene utilizzato dal tag manager per configurare gli attivatori.

Quindi quando io specifico un valore del campo, è come se stessi dicendo al top manager che è stata effettuata una certa azione all'interno della pagina.

Per esempio, se l'utente clicca il pulsante io potrei far eseguire all'interno del sito.

Questo codice é popolare la variabile event con un valore che è click sul pulsante.

A questo punto io poi all'interno del team manager posso creare un attivatore che vada proprio a vedere se questa variabile event vale click sul pulsante e se vale click sul pulsante far eseguire qualche tag che fa scattare qualche tipo di tracciamento.

Quindi l'unica l'unico campo che io non posso utilizzare in maniera completamente diciamo puramente informativa è il campo vivente ed è molto importante che in tutti i codici dei player che io faccio eseguire all'interno della pagina ci sia una variabile event che sia popolato con qualche valore, perché questo è proprio quello che io vai.

Vado a utilizzare per far scattare tag nel momento in cui questa azione viene effettuata.

Altra informazione ok, ma chi è che deve inserire questo codice all'interno delle pagine del mio sito? Questa operazione deve farla normalmente lo sviluppatore, quindi io quando voglio fare dei traccia menti che vanno a utilizzare di fatto delle informazioni custom oppure delle azioni che non sono gestibili attraverso i taxi gli attivatori normalmente diciamo implementati su Google top manager, quindi di fatto devi fare un tracciamento casto.

Io devo fare un documento che contiene tutta una serie di codici di questo tipo e che specificano effettivamente per ogni azione quale codice deve essere inserito.

Questa è una cosa che purtroppo va fatta per poter fare un trattamento in maniera corretta e che quindi diciamo, è necessario conoscere chiaramente questa parte leggermente più tecnica.

Per cui se noi non abbiamo un background tecnico possiamo delegare.

Questa operazione ha uno sviluppatore, dandogli ovviamente istruzioni su quali sono le informazioni che vogliamo tracciare e quali sono le azioni in cui vogliamo che questo snip venga eseguito.

Poi lo snipe te lo costruirà il nostro sviluppatore.

Però la cosa importante è quantomeno è che noi siamo a conoscenza di questo processo per fare in modo che possa essere implementato sul sito.

In ultimo andiamo a vedere come il data layer può essere visionato all'interno della pagina.

Qui nel bagher vedete che c' è un tabù che si chiama proprio da thayer.

Se io lo clicco, io posso vedere il data lawyer in ogni momento per ogni azione effettuata dall'utente nota importante ogni volta che io cambio pagina di fatto viene ricaricato tutto da zero, quindi è come se da thayer si svuota asse e tutto il contenitore del tag manager fosse ricaricato daccapo con tutte le varie configurazioni che io ho impostato.

Quindi adesso io posso provare a ricaricare da zero la pagina e non fare ancora nessuna azione per vedere come il atelier si presenta all'inizio.

Questa è una cosa estremamente importante.

A questo punto io apro un pochino il bagher, clicco qui sul tablet tailleur e vedete che mi compare proprio questa scritta carried the lives of the DALAYER, che di fatto rappresenta tutta la lista con tutte le informazioni che in questo momento sono a disposizione del manager.

In pratica è equivalente a questa lista che abbiamo visto prima questa qui solo che invece di esserci questi due valori di esempio ci sono tutta una serie di valori che sono stati acquisiti durante il caricamento della pagina dal team manager che installato su questo sito di esempio.

Ora qua vedete sulla sinistra che c' è una colonna con una serie di righe numerate una, due, tre, quattro, cinque, sei voi immaginatevi una sequenza temporale in cui l'utente carica la pagina e da questo momento in poi iniziano a succedere una serie di cose.

La prima cosa che succede è che viene caricato il contenitore del google top manager perché immaginatevi che la pagina html viene letta dal browser dall'alto verso il basso man mano che viene eletto a un certo punto il browser legge proprio il contenitore del google tax manager e quindi carica il google tax manager con tutte le configurazioni che abbiamo impostato dal pannello.

Questo momento esatto é quello che qui sulla colonna di sinistra troviamo raffigurato con una container lod ed è questo il momento in cui il contenitore viene caricato.

Questa corona in pratica si legge dal basso verso l'alto è come se fosse un flusso temporale in cui io mi devo muovere dal basso verso l'alto.

La seconda cosa che io vedo qui scritta è due gtm evento.

Ecco, questo è un codice che ho inserito io in maniera totalmente custom, in cui ho riportato alcune informazioni e che possiamo vedere tra l'altro direttamente in questo quadro.

Quindi io qui se sono nella parte su marie e mi sposto dal player posso vedere da tailleur il risultato finale.

Ma se mi sposto qui sulla sinistra cliccando ogni singola riga, io posso vedere lo stato del player proprio in quel preciso momento.

Perché è importante? Perché io, in corrispondenza proprio di questo preciso momento, posso decidere di far scattare dei tag e io attraverso questa visione posso capire se tutto sta funzionando correttamente.

Quindi quando uno deve fare un'operazione di debugging, di fatto deve fare questa operazione deve muoversi tra i vari momenti di caricamento e tra le variazioni e verificare che il dato layer contenga tutte le informazioni corrette.

Quindi, ad esempio in questo punto gtm evento io vedo la variabile event che io popolato in maniera totalmente arbitraria con la scritta gtm evento e poi una serie di altre informazioni, categoria azione di etichetta e poi rivenditore e poi altre cose ancora.

Non è importante adesso sapere cosa vogliono dire queste informazioni.

La cosa importante è che noi dobbiamo sapere e come funziona questo meccanismo e sapere che ogni volta che noi vogliamo fare dei bug, dobbiamo andare a vedere queste informazioni qua.

Se vogliamo capire effettivamente che cosa sta succedendo Ultimissima ultimissima cosa proviamo ad esempio a cliccare qui sul pulsante Scarica la brochure, ci clicco, torno qui di nuovo sul tablet e vedete questo click che ho appena fatto su scarica la brochure è il numero sette.

É questo che nella lista compare come un numero sette.

Io qua ci clicco e se vado nel tablet DALAYER posso vedere tutti gli elementi che sono stati portati in andata layer dalla pagina nel momento del click al pannello del tag manager e quindi posso vedere effettivamente quali informazioni ho a disposizione tra queste vedete cioè proprio la urla questa questa questa scritta qui gtm element four contiene proprio Laura Dell'elemento cliccato e che poi va a finire attraverso proprio questo collegamento nella variabile click urla che abbiamo visto nelle elezioni precedenti e serve proprio popolare con la variabile col valore del lavoro cliccata.

Questo vale di fatto per tutte le variabili che vengono connesse a da tailleur e che io ho creato.

É configurato il pannello del google tax manager.