Oct 15 2012

HelpSemaforoQuesto semaforo indica il livello difficoltà del post
semaforo verde - articolo per tutti semaforo giallo - articolo avanzato semaforo rosso - articolo per esperti

L’uso di un datalayer nel Tag Manager

autore: categoria: tagmanager

Quando vi ho parlato del Google Tag Manager ho volontariamente omesso un particolare sul suo funzionamento: l’ho fatto per non appesantire troppo il post, che conteneva già abbastanza concetti nuovi e che non volevo risultasse troppo ostico da digerire 🙂

Il concetto che ho omesso è quello del datalayer, cioè di un livello di astrazione dei dati passabili al GTM: pensiamo al datalayer come a un baule che contiene tutti – o quasi tutti – i dati possibili e immaginabili che ci potrebbero servire: li contiene sempre, anche quando in realtà non ci servono, ed è presente in ogni pagina; naturalmente i dati sono generati dinamicamente, non è importante come anche perché dipende da molti fattori, l’importante è sapere che esso ci potrebbe essere.

Un semplice datalayer di esempio per il Google Tag Manager potrebbe essere fatto così:


<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>

questo baule contiene la categoria della pagina e il tipo del visitatore, e abbiamo detto che è sempre presente in tutte le pagine, anche se con valori differenti. Lo stesso datalayer per un’altra pagina potrebbe avere pageCategory: news, lo stesso datalayer per un altro utente potrebbe avere visitorType: non-customer.

Il Tag Manager attraverso una macro può facilmente estrarre uno di questi valori, è una funzione già presente nell’interfaccia:

e una volta estratta la può utilizzare all’interno dei tag presenti nel container.

Non solo, attraverso una apposita funzione, dataLayer.push({‘Data Layer Variable Name’: ‘value’}) si possono aggiungere al volo variabili che non erano previste in partenza, o sovrascriverne altre che invece c’erano.

A questo punto dovrebbe essere chiaro perché un dataLayer può fare la differenza in un progetto di analisi web: vi è mai capitato di dover implementare qualcosa su Google Analytics che richiedesse una modifica del codice? se si, forse avete dovuto passare per la fase “devo spiegare a chi gestisce il sito cosa fare, dove farlo, come farlo”, che poi è il motivo per cui esiste il GTM. Ecco, tanto quanto l’implementazione dei codici è facilitata dall’inserimento di un solo container del Tag Manager, una buona pianificazione del dataLayer e delle chiamate permette allo sviluppatore di lavorare una volta sola, e a noi di avere sempre a disposizione tutte le informazioni utili al nostro piano di tracciamento del progetto.

Tanto per farvi un’idea, vi mostro un esempio un po’ più complesso (ma secondo me ancora incompleto di come vedrei io un dataLayer) fatto da Justin Cutroni qualche mese fa:


var dataLayer = {
"pageTitle" : "Receipt Page",
"pageURL" : "/pages/checkout/receipt",
"pageCat" : "Checkout Pages",
"PageCat2" : "",
"tranID" : "17658726382",
"tranTotal" : "34.95",
"tranTax" : "0.00",
"tranShipping" : "0.00",
"tranShippingMethod" : "USPS",
"tranCurrency" : "USD",
"tranProds" : "249|398",
"tranSKUs" : "249-32|398-12",
"tranProdNames" : "Kids Onsie|Kids Lava Lamp",
"tranCategories" : "Kids|Kids",
"tranPayMethod" : "VISA",
"visitorType" : "RETURN",
"visitorState" : "Logged In",
"visitorFirstPurchDate" : "20111205",
"visitorFirstProds" : "822"
}

La sintassi non è quella del Google Tag Manager, il post è di Maggio, ma siccome Justin lavorava già per Google, col senno di poi quel post che allora mi sembrava solo una buona idea lungimirante si rivela per quel che è: una comunicazione di intenti per un prodotto in fase di sviluppo 🙂

[edit: L’editor s’è mangiato un pezzo del post. Un dataLayer in realtà è un altro concetto che è trasversale al Tag Management; fatto così al momento funziona solo sul GTM, ma io penso che Google abbia la forza e il dovere di provare a creare uno standard per il datalayer, in modo che possa essere più facile in futuro cambiare soluzione di Tag Management senza dover rifare questa parte di implementazione.]

Condividi l'articolo:

12 Commenti

  1. Ci stavo giusto guardando oggi, ma mi manca un pezzo: come prendere i dati dal datalayer per passarli a google analytics?
    Io ho una pagina con doppio codice analytics, come faccio a passare, ad esempio, una virtual pageview su entrambi i profili di analytics da GTM ?

  2. Credo di esserci riuscito con un profilo, quindi farlo per due è una cosa fattibile. Però nel contempo ho trovato una montagna di bachi da far mettere a posto, tu hai una linea preferenziale per farli pervenire ?

  3. prova a mandarmi una mail

  4. fatto 🙂

  5. Ciao Marco,
    riflettevo sul tracciamento degli eventi, che dal GTM si potrebbero gestire col Data Layer.

    Ad esempio un vecchio
    onclick=”_gaq.push([‘_trackEvent’, ‘categoria’, ‘azione’]);”>

    ora potrebbe diventare:
    onclick=”dataLayer.push({‘event’: ‘nome evento’});”

    gestito poi dalla console GTM.

    Secondo te tecnicamente è possibile bypassare anche questo passaggio gestendo una chiamata del tipo:
    getElementById(‘id elemento’).onclick=dataLayer.push({‘event’: ‘nome evento’});
    ?

    Ho provato a farlo ma sembra non funzionare.
    Tu cosa ne pensi?

  6. secondo me dovrebbe funzionare, in fondo è jvascript

  7. Ieri ci ho riflettuto a lungo.

    Credo non funzioni a causa del fatto che il tutto avviene in modo asincrono.
    Quindi non si riesce ad intervenire direttamente, ma occorre passare dall’oggetto dataLayer.

    La mia però è solo una supposizione,
    è un argomento ancora molto fresco e non mi sono ancora fatta un’idea precisa.

  8. sono abbastanza convinto che dovrebbe funzionare. E fare il push di event:nome evento è *esattamente* passare attraverso il datalayer. se funziona con onclick – e funziona ne sono certo perché lo uso – deve funzionare anche con getelementbyid

  9. Ho il responso!
    La chiamata funziona se faccio eseguire direttamente questo codice:
    onclick=”_gaq.push([‘_trackEvent’, ‘categoria’, ‘azione’]);”

    senza popolare, quindi, il dataLayer.

  10. così deve funzionare per forza, ma ti ripeto che è possibile passare dal datalayer.

  11. Io ce l’ho fatta, ma bisogna settare la “firing rule” per intercettare l’evento, per esempio: se il mio evento si chiama “cliccato” la firing rules sarà “{{event}} equals cliccato”.

  12. Ciao Andrea,
    anche io avevo fatto così.
    Cercherò di capire dove sta l’errore.

    intanto grazie a tutti

Scrivi un Commento