Implementazione avanzata di Google Tag Manager (parte I)

Introduzione

Nel mondo del digital marketing e dell’analisi dei dati, la raccolta degli stessi è un processo fondamentale per avere una panoramica di di come gli utenti stiano interagendo con la tua app e/o il tuo sito web. Tuttavia conoscere il numero di utenti attivi, di conversioni e di visite mensili potrebbe non essere abbastanza se si vuole integrare una strategia di marketing mirata.

In questo articolo, ci addentreremo nelle profondità di Google Tag Manager, esplorando tecniche e strategie che vanno ben oltre l’implementazione standard. Che tu sia un esperto di analytics alla ricerca di modi per ottimizzare il tuo stack tecnologico o un marketer desideroso di sfruttare al massimo i tuoi dati, questo guide ti fornirà gli strumenti necessari per portare il tuo utilizzo di GTM al livello successivo.

Partiremo dalle fondamenta, esplorando configurazioni del Data Layer, per poi passare a variabili e trigger complessi che ti permetteranno di catturare dati con una precisione senza precedenti. Esamineremo anche come creare tag personalizzati per tracciamenti sofisticati e come ottimizzare le prestazioni del tuo sito web pur mantenendo un tracking robusto.

Configurazione avanzata del Data Layer

Strutturazione efficiente dei dati

Il Data Layer è uno dei concetti principali di Google Tag Manager, che garantisce la massima flessibilità, portabilità e facilità di implementazione. Senza di esso, non ci sarebbero variabili o trigger in GTM, né i tag verrebbero attivati. Il concetto di “Data Layer” è la chiave per sbloccare il potenziale di Google Tag Manager.

Cos’è il Data Layer

Il Data Layer è, in gergo tecnico, un array Javascript contenente uno o più oggetti. In poche parole è un contenitore organizzato di dati o, per fare un parallelo, uno schedario. Il ruolo del Data Layer è quello di raccogliere i dati ed inviarli ai server di Google secondo un formato riconoscibile da questi ultimi; infatti, i loro servizi non mostrano i dati inviati dal nostro sito web se formattati in maniera errata.

La formattazione che Google si aspetta è la seguente:

[{
  event: "purchase",
  ecommerce: {
    transaction_id: "T_12345",
    coupon: "socksSale",
    value: 12.00, 
    currency: "USD", 
    items: [
    {
      item_id: "SKU_12345",
      item_name: "Socks",
      discount: 2.00, 
      price: 4.00, 
      quantity: 3 
    },
  ]}
}]

Nota come in questo array ci siano due chiavi, event ed ecommerce e come quest’utlima sia un oggetto contenente altre chiavi (o proprietà).

In Javascript esistono dei comandi attraverso i quali possiamo eseguire delle azioni specifiche, ovvero i metodi. Gli array modificano il loro contenuto tramite dei metodi specifici, ad esempio volendo inserire nuovi elementi alla fine del contenitore dayaLayer utilizzerò il metodo push(). Se volessi aggiungere altri dati contenenti, magari, il nome e la categoria della pagina al dataLayer in alto utilizzerò il seguente comando:

dataLayer.push([
	'pageName': 'Purchase',
	'pageCategory': 'ecommerce',
	'pagePath': '/thankyou'
])

In questo modo il dataLayer finale sarà

[{
  event: "purchase",
  ecommerce: {
    transaction_id: "T_12345",
    coupon: "socksSale",
    value: 12.00, 
    currency: "USD", 
    items: [
    {
      item_id: "SKU_12345",
      item_name: "Socks",
      discount: 2.00, 
      price: 4.00, 
      quantity: 3 
    },
  ]}
},
{	pageName: 'Purchase',
	pageCategory: 'ecommerce',
	pagePath: '/thankyou'
}]

Nota come i dettagli della pagina siano stati inseriti in coda agli altri dati come ci si aspetterebbe del metodo push() .

Implementazione di eventi personalizzati

Avendo capito come manipolare il Data Layer possiamo iniziare a pensare ad implementazioni più creative e cucite su misura. L’implementazione più comune che vedo nei miei clienti è relativa solamente agli eventi e-commerce o quando si hanno siti vetrina, vengono tracciati solo gli eventi base (visualizzazione di pagina, click sul numero di telefono etc…). Di fatto è come se avessimo un motore V8 che utilizziamo solo per andare alla posta.

Una pianificazione dei tracciamenti è fondamentale per avere degli ottimi ritorni sugli investimenti pubblicitari. Sapere quali prodotti sono stati venduti o quali pagine siano state visitate è la punta dell’iceberg dell’analisi dati. Trovo molto più interessante tracciare, ad esempio:

il percorso fatto dagli utenti quindi quali elementi della pagina sono stati cliccati e come questi abbiano portato ad un’altra sezione, o ad acquistare o all’abbandono del sito;
la velocità di caricamento del documento HTML e la differenza, in secondi, tra il caricamento e la prima interazione con la pagina;
quali varianti del prodotto sono state scelte;
se ci sono errori nel form che ne hanno impossibilitato l’invio;
se ci sono rage clicks di utenti frustrati e così via. In un e-commerce, con dei colleghi, implementammo un framework che ci diceva l’ultimo elemento cliccato nella pagina precedente o l’elemento, nella stessa pagina, che aveva scaturito un evento importante (ad esempio, se vedevamo il click sul pulsante invia del form ma non l’evento di conferma dell’invio sapevamo che c’era un problema da qualche parte o che l’utente ci aveva ripensato).

Gestione di dati sensibili

Come avrai capito, le possibilità sono praticamente infinite, possiamo inviare a Google qualsiasi tipo di dato. Non sarebbe bellissimo se potessimo mandare a GA4 anche i dati degli utenti che hanno completato un acquisto o inviato il form? Forse sì, lo sarebbe, ma non è possibile per le policy di Google sulla privacy. Google considera informazioni sensibili quelle che possono essere utilizzate per identificare, contattare o localizzare con precisione un individuo. Ovvero:

Indirizzi email
Indirizzi postali
Numeri di telefono
Posizione esatta, ad esempio le coordinate GPS (vedi la nota riportata di seguito)
Nomi completi o nomi utente

Senza implementare lo User ID è possibile inviare i dati degli utenti rendendoli irriconoscibili, tramite, ad esempio, un algoritmo di hashing. Nella galleria dei template di Tag Manager esistono diversi template progettati per questo scopo. Non ne consiglio uno in particolare, l’importante è che il valore fornito dalla variabile sia una stringa crittografata.
Ad esempio [email protected] diventerà 26b26a32165655c17a369d1e82268958f37a6b8b03eced9c5d2baeb34d9eadd1 con un algoritmo SHA256.
Questo ci permetterà, in fase di analisi, di unire e consolidare tutti i dati con la stessa stringa crittografata e di associarle allo stesso utente.

N.B: il processo inverso, di decrittazione, solitamente non è possibile perche` SHA-256 è una funzione hash unidirezionale, quindi non esiste un modo diretto per decodificarla. Lo scopo di una funzione hash crittografica è che non è possibile annullarla.

Utilizzo di variabili personalizzate

Le variabili personalizzate in Google Tag Manager sono strumenti potenti che permettono di catturare, manipolare e utilizzare dati in maniera flessibile. In questa sezione, esploreremo tecniche avanzate per sfruttare al massimo le variabili personalizzate.

Creazione di variabili JavaScript

Le variabili JavaScript offrono la massima flessibilità nella manipolazione dei dati.
Ecco alcuni esempi:

Esempio 1: Estrazione di parametri URL

function() {
  var url = new URL(window.location.href);
  var utmParams = {};
  url.searchParams.forEach(function(value, key) {
    if (key.startsWith('utm_')) {
      utmParams[key] = value;
    }
  });
  return JSON.stringify(utmParams);
}

Questa variabile estrae tutti i parametri UTM dall’URL e li restituisce come oggetto JSON.

Ad esempio l’URL https://www.example.com/?utm_source=google&utm_medium=cpc&utm_campaign=black_friday verrà restituito come segue: {utm_source: 'google', utm_medium: 'cpc', utm_campaign: 'black_friday'}. Questo valore potrà essere utilizzato in altre variabili o inviato a Google (trasformandolo PRIMA in una stringa).

Esempio 2: Calcolo del tempo di lettura stimato

function() {
  var content = document.querySelector('article').innerText;
  var wordCount = content.trim().split(/\s+/).length;
  var readingTime = Math.ceil(wordCount / 200); // Assumendo 200 parole al minuto
  return 'Tempo di lettura: ' + readingTime + ' min';
}

Questa variabile calcola il tempo di lettura stimato per un articolo.

Implementazione di lookup tables avanzate

Le lookup tables sono utili per mappare valori, ma possono essere potenziate per scenari più complessi:

Esempio: Categorizzazione dinamica dei prodotti

Creare una tabella di ricerca RegEx che categorizzi i prodotti in base a pattern nel loro SKU:

Pattern di Input	Output
^EL	Electronics
^CL	Clothing
^BK	Books
.*LUX$	Luxury Items

Combinare questa lookup table con una variabile personalizzata per una categorizzazione precisa:

function() {
  var sku = {{Product SKU}};
  var category = {{Product Category Lookup}}(sku);
  return category || 'Uncategorized';
}

Questa variabile fornirà una stringa contenente la categoria e lo SKU, ad esempio: Books12345

Debugging delle variabili personalizzate

Un debugging efficace è cruciale quando si lavora con variabili complesse:

Utilizzo di console.log(): Incorpora funzionalità di logging nelle tue variabili JavaScript per stampare gli errori nella console del browser:

function() {
  var fn_name = "Nome della funzione: ";
  var output;
  try {
   /* LA TUA FUNZIONE */
  }
  catch (e) {
   console.log(fn_name + e);
  }
  return output;
}

Variabili di debug dedicate: Crea variabili specifiche per il debugging che raccolgono e formattano informazioni:

function() {
  return JSON.stringify({
    url: window.location.href,
    dataLayer: dataLayer,
    customVar: {{La Tua Variabile Personalizzata}}
  }, null, 2);
}

Utilizzo della Preview Mode di GTM: Sfrutta la modalità di anteprima per ispezionare i valori delle variabili in tempo reale, verificando che si comportino come previsto in diversi scenari.

L’utilizzo avanzato delle variabili personalizzate in GTM apre un mondo di possibilità per la raccolta e la manipolazione precisa dei dati. Dalla creazione di logiche complesse con JavaScript alla gestione efficiente di grandi set di dati con lookup tables avanzate, queste tecniche ti permetteranno di catturare esattamente i dati di cui hai bisogno, nel formato desiderato.

Ricorda sempre di testare accuratamente le tue variabili personalizzate e di documentare bene la loro logica. Un approccio metodico al debugging e alla manutenzione assicurerà che le tue implementazioni rimangano robuste e affidabili nel tempo.

Trigger avanzati

Creazione di trigger basati su espressioni regolari

I trigger sono il cuore pulsante di Tag Manager, determinao quando e dove i tuoi tag si attiveranno. In questa sezione vedremo come utilizzare le espressioni regolari per creare attivatori avanzati.

Cosa sono le espressioni regolari?

Le espressioni regolari, o “RegEx”, sono un potente linguaggio basato su criteri che può potenziare notevolmente il tuo marketing digitale tramite l’uso di Google Tag Manager.

In GTM, RegEx ti consente di creare implementazioni di tracciamento super versatili e precise. Puoi risparmiare molto tempo e consolidare la maggior parte dei tag, dei trigger e delle variabili semplicemente utilizzando RegEx.

Le RegEx sono una sequenza di caratteri che definisce un modello di ricerca utilizzato per la corrispondenza e la modifica di stringhe di testo.

Sono comunemente utilizzate nella programmazione, elaborazione dati e modifica del testo per estrarre o modificare parti di testo.

Trigger per la visualizzazione delle pagine prodotto

Volendo creare un trigger che si attivi solo sulle pagine prodotto dovremmo prima analizzare l’URL di queste ultime. Ipotizziamo di avere un e-commerce i quali URL seguono questo pattern:

/prodotti/guanti-moto/item123456
/prodotti/caschi/itemABC126
In Tag Manager creeremo un attivarore con le seguenti caratteristiche
Tipo di trigger: Visualizzazione di pagina
Condizione: Page Path corrisponde all’espressione regolare ^\/prodotti\/[a-zA-Z-|0-9-]+\/[a-zA-Z-|0-9-]+$
In questo modo il trigger si attiverà esclusivamente sulle pagine con l’URL coinidente alla RegEx.
Consigli per l’uso delle RegEx in GTM:
- Testa le tue regex con uno strumento come regex101.com
- Usa il flag case-insensitive (?i) per corrispondenze che non considerino le maiuscole/minuscole
- GTM utilizza la sintassi RegEx di RE2

Implementazione di trigger con condizioni multiple

Combinare più condizioni permette di creare trigger altamente specifici e precisi.

Ad esempio la seguente configurazione permette di avere un attivatore funzionante solo per gli utenti VIP che visitano la pagina delle offerte durante il fine settimana.

Tipo di trigger: Visualizzazione di pagina

Condizioni:
Page Path contiene /offerte-speciali
AND
User Type è uguale a VIP
AND
Day of the week corrisponde alla RegEx ^(Venerdì|Sabato|Domenica)$

Utilizzo di trigger per monitorare le interazioni dell’utente

Infine possiamo utilizzare gli attivatori per monitorare interazioni specifiche, come ad esempio la profondità dello scroll (70% della pagina) e il tempo di permanenza (almeno 30 secondi).

Tipo di trigger: Timer
Intervallo: 30000 ms (30 secondi)

Condizioni:
Scroll depth verticale maggiore o uguale a 70
AND
gtm.timer_eventNumber uguale a 1 //TODO

Trigger basati su eventi personalizzati

Nel paragrafo dedicato al Data Layer abbiamo visto come sia possibile inserire nel Data Layer dati ed eventi personalizzati.

Ipotizziamo quindi di voler tracciare un utente che abbia scaricato un file, dovremo:

Inviare un evento personalizzato al dataLayer:

dataLayer.push({
  'event': 'fileDownload',
  'fileName': 'whitepaper.pdf',
  'MIMEType': 'application/pdf'
})

Creare un trigger personalizzato in Tag Manager:

Nome evento: fileDownload
AND
MIMEType è uguale a application/pdf

Gruppo attivatore (trigger group)

Un gruppo di trigger valuterà le condizioni di due o più trigger come se fossero uno solo. Il gruppo di trigger si attiverà solo dopo che tutti i trigger selezionati sono stati attivati almeno una volta.

Con il gruppo di trigger, le informazioni sui trigger attivati sulla pagina vengono mantenute in memoria da GTM e, una volta che i trigger configurati nel gruppo di trigger hanno tutti segnalato il completamento, il gruppo di trigger attiverà qualsiasi tag a cui è collegato. In altre parole avendo un gruppo contenente un evento personalizzato e un timer Tag Manager memorizzerà l’evento accaduto per primo ed attenderà il secondo per attivare il tag che fa riferimento a questo trigger.

Un esempio di misurazione del coinvolgimento (per il quale i gruppi di trigger sono ottimi) potrebbe essere il monitoraggio delle interazioni dell’utente con un determinato numero di campi del modulo prima di considerarlo engaged.

Affinché funzioni, è necessario un trigger che si attivi quando l’utente modifica il valore di un campo modulo. Questo è facile da fare con un listener di eventi personalizzato (utilizzando un tag Custom HTML):

var form = document.querySelector('#idDelForm');
form.addEventListener('change', function(e) {
  window.dataLayer.push({
    event: 'formFieldInteraction',
    field: e.target
  });
});

A questo punto si dovrebbe creare un trigger di evento personalizzato per il nome dell’evento formFieldInteraction. Una volta fatto ciò, creare un gruppo di trigger in cui l’utente deve interagire con i campi del modulo tre volte prima che il tag si attivi è semplice:

Tag personalizzati per tracking avanzato

Creazione di tag per il monitoraggio delle prestazioni

Di seguito un esempio di implementazione per un tag HTML personalizato per misurare i tempi di caricamento delle risorse del sito;

<script>
  (function() {
    var resources = performance.getEntriesByType('resource');
    var resourceData = resources.map(function(resource) {
    return {
        name: resource.name,
        duration: resource.duration,
        size: resource.transferSize
    }
   })
   dataLayer.push({
    'event': 'resourceTiming',
    'resourceData': resourceData
   });
  )();
</script>

Integrazione con API di terze parti

è possibile, inoltre, con i tag HTML personalizzati integrare APi di terze parti. Un esempio per mostrare i dati meteo in tempo reale con l’API di Open Weather:

<script>
(function() {
  var apiKey = '{{Weather API Key}}';
  var lat = '{{latitude}}';
  var lon = '{{longitude}}';
  var url = 'https://api.openweathermap.org/data/3.0/onecall?lat=' + lat + '&lon=' + lon + '&appid=' + apiKey;

  fetch(url)
    .then(response => response.json())
    .then(data => {
      dataLayer.push({
        'event': 'weatherData',
        'temperature': data.main.temp,
        'conditions': data.weather[0].main
      });
    })
    .catch(error => console.error('Error fetching weather data:', error));
})();
</script>

Questo tag recupera dati meteo in tempo reale e li invia al dataLayer, permettendo di correlare le condizioni meteorologiche con il comportamento degli utenti.

Tracking avanzato delle interazioni utente

Creare tag personalizzati per tracciare interazioni utente complesse può fornire insights più profondi sul comportamento degli utenti.

Esempio: Tag per tracciare il tempo di lettura effettivo

<script>
(function() {
  var startTime = new Date().getTime();
  var isReading = false;
  var totalReadingTime = 0;

  document.addEventListener('mousemove', startReading);
  document.addEventListener('keydown', startReading);
  document.addEventListener('scroll', startReading);

  function startReading() {
    if (!isReading) {
      isReading = true;
      checkReadingStatus();
    }
  }

  function checkReadingStatus() {
    setTimeout(function() {
      if (isReading) {
        totalReadingTime += 5;
        isReading = false;
        checkReadingStatus();
      } else {
        dataLayer.push({
          'event': 'readingComplete',
          'readingTime': totalReadingTime
        });
      }
    }, 5000);
  }
window.addEventListener('beforeunload', function() {
    dataLayer.push({
      'event': 'readingComplete',
      'readingTime': totalReadingTime
    });
  });
})();
</script>

Questo tag monitora il tempo effettivo che un utente trascorre leggendo il contenuto, escludendo i periodi di inattività.

Best practices e considerazioni per i tag personalizzati

Prestazioni: Minimizza l’impatto sulle prestazioni del sito utilizzando operazioni asincrone quando possibile.
Sicurezza: Evita di includere informazioni sensibili direttamente nel codice del tag. Utilizza le variabili o template GTM per i dati sensibili.
Modularità: Progetta i tuoi tag in modo modulare per facilitarne il riutilizzo e la manutenzione.
Documentazione: Commenta adeguatamente il codice del tag e fornisci una documentazione chiara su come utilizzarlo.
Testing: Testa accuratamente i tag personalizzati in un ambiente di staging prima di implementarli in produzione.

I tag personalizzati in Google Tag Manager offrono possibilità illimitate per implementare soluzioni di tracking avanzate e integrazioni. Che si tratti di tracking cross-domain, monitoraggio delle prestazioni, integrazione con API esterne o tracking dettagliato delle interazioni utente, i tag personalizzati ti permettono di andare oltre le funzionalità standard di GTM. Ricorda sempre di bilanciare le tue esigenze di tracking con le considerazioni sulle prestazioni e la privacy degli utenti.

L’inserimento di elementi nella pagina eseguito dai tag HTML può essere fonte di problemi di prestazioni e, in alcuni casi, anche causare cambiamenti di layout.

Nella maggior parte dei casi, se un elemento viene inserito nella pagina, il browser deve ricalcolare le dimensioni e la posizione di ogni elemento sulla pagina: questo processo è noto come layout. L’impatto sulle prestazioni di un singolo layout è minimo, ma quando si verifica in modo eccessivo può diventare una fonte di problemi di prestazioni.

L’impatto di questo fenomeno è maggiore sui dispositivi di fascia bassa e sulle pagine con un numero elevato di elementi DOM. Se un elemento di pagina visibile viene inserito nel DOM dopo che il documento è già stato renderizzato, potrebbe causare un layout shift.

Questo fenomeno non è esclusivo dei TMS, tuttavia, poiché i tag in genere vengono caricati più tardi rispetto ad altre parti della pagina, è comune che vengano inseriti nel DOM dopo che la pagina sia già stata visualizzata.

Bibliografia: Implementazione avanzata di Google Tag Manager (parte I)

1. Introduzione e Panoramica di GTM

Google Developers, “Google Tag Manager Overview”. https://developers.google.com/tag-platform/tag-manager

2. Configurazione avanzata del Data Layer

Google Developers, “The Data Layer”. https://developers.google.com/tag-manager/devguide#datalayer
Analytics Mania, “Quick Guide: dataLayer.push with examples”. https://www.analyticsmania.com/post/datalayer-push/

3. Utilizzo di variabili personalizzate

Google Support, “Tipi di variabili per il Web definite dall’utente”. https://support.google.com/tagmanager/answer/7683362?hl=it

Standard e best practices

web.dev, “Best practices for tags and tag managers ”. https://web.dev/articles/tag-best-practices
7 Best Practices for Building Your Tag Management Strategy, “Google Tag Manager best practices”. https://www.observepoint.com/blog-posts/tag-management-strategy/

Nota: I link forniti sono aggiornati al momento della stesura di questo articolo. Si consiglia di verificare sempre la disponibilità e l’attualità delle informazioni consultando direttamente le fonti.