Introduzione al tagging lato server

Il tagging lato server è un nuovo modo di utilizzare Google Tag Manager per implementare la tua applicazione su più dispositivi. I contenitori del server utilizzano lo stesso tag, attivatore e modello variabile a cui sei abituato, oltre a fornire nuovi strumenti che ti consentono di misurare l'attività utente ovunque si verifichi.

Una tipica configurazione di tagging senza tagging lato server si basa su un contenitore nella pagina per inviare dati di misurazione a vari server di raccolta. La Figura 1 illustra un esempio di come un contenitore web di Tag Manager eseguito in un browser web invia dati a più server.

Diagramma di un sito strumentato per utilizzare un contenitore web di Google Tag Manager

Figura 1: diagramma di un sito strumentato per utilizzare un contenitore web di Google Tag Manager.

Al contrario, un contenitore del server non viene eseguito nel browser o sul telefono dell'utente. ma viene eseguito su un server controllato da te.

Diagramma di un sito strumentato mediante un contenitore di tagging lato server.

Figura 2: esempio di configurazione di tagging che utilizza un contenitore del server.

Il server viene eseguito nel tuo progetto Google Cloud Platform, o in un ambiente diverso a tua scelta, e solo tu hai accesso ai dati nel server finché non scegli di inviarli altrove. Hai il pieno controllo su come vengono modellati i dati e su dove vengono instradati dal server. I tag vengono creati utilizzando la tecnologia JavaScript con sandbox. Le autorizzazioni ti consentono di vedere cosa può fare il tag, mentre i criteri ti consentono di impostare dei limiti intorno al contenitore.

Il server riceve le richieste web dal dispositivo dell'utente e le trasforma in eventi. Ogni evento viene elaborato dai tag, dagli attivatori e dalle variabili del contenitore. Tag, attivatori e variabili in un contenitore del server funzionano esattamente come in altri tipi di container: gli attivatori esaminano ogni evento alla ricerca di determinate condizioni e, se opportuno, attivano i tag che inviano i dati sugli eventi da elaborare.

Questo modello introduce due domande importanti per i contenitori dei server:

  • In che modo i dati di misurazione vengono trasmessi dal dispositivo dell'utente al contenitore del server?
  • In che modo i dati di misurazione inviati a un contenitore del server vengono trasformati in eventi?

La risposta a entrambe le domande è un nuovo tipo di entità da utilizzare nei container di server: un client.

Come funzionano i clienti

I client sono adattatori tra il software in esecuzione sul dispositivo di un utente e il contenitore del server. Il client riceve i dati di misurazione da un dispositivo, li trasforma in uno o più eventi, instrada i dati da elaborare nel container e pacchettizza i risultati per inviarli al richiedente.

Si tratta di molte cose. Diamo un'occhiata più da vicino a ogni singola parte. La Figura 3 mostra i dati che passano nel contenitore del server dal browser web dell'utente e dal tuo server web al contenitore del server.

Diagramma di un sito strumentato mediante un contenitore di tagging lato server.

Figura 3: un client diverso gestisce ogni stream di dati.

I clienti ricevono i dati di misurazione da un dispositivo. Supponiamo che tu voglia misurare l'attività utente in tre punti: un sito web, un'app per telefono e un tostapane smart. Il sito web utilizza Google Analytics, l'app per telefono utilizza Firebase Analytics e il tostapane un protocollo proprietario chiamato "Toastmeasure".

La strumentazione di questi tre dispositivi con Google Tag Manager richiede generalmente un contenitore diverso per ogni piattaforma. Poiché il contenitore del server non viene eseguito sul dispositivo, lo stesso contenitore può gestire la strumentazione di analisi per tutte e tre le piattaforme dei dispositivi. Tuttavia, c'è un problema. Questi dispositivi non comunicano tutti allo stesso modo. Il protocollo di Google Analytics non corrisponde al protocollo Toastmeasure. È qui che entrano in gioco i clienti.

Al posto di questi tre contenitori, il tuo contenitore del server ha tre client. Ogni richiesta in entrata nel container verrà elaborata da ciascun client in ordine di priorità, a partire dal client con la massima priorità. La prima cosa che ogni client dovrà decidere se sa come elaborare questo tipo di richiesta. Se può, il cliente "rivendica" la richiesta e passa alla fase di elaborazione successiva. La rivendicazione della richiesta impedisce l'esecuzione dei client successivi. Se il client non è in grado di elaborare la richiesta, non fa nulla e consente agli altri client di decidere se gestirla o meno.

I client trasformano i dati delle richieste in uno o più eventi. Dopo che il client Toastmeasure ha rivendicato una richiesta, deve trasformarla in qualcosa che il resto del container è comprensibile. Si tratta di un insieme di eventi.

Gli eventi sono cose che accadono e vuoi misurare. Può essere qualsiasi elemento: start_toasting, finish_toasting o buy_bread. Esistono alcuni suggerimenti sulla struttura degli eventi generati da un client, ma l'unico requisito è che il resto del container li comprenda.

I client eseguono il container. Il client ha rivendicato la richiesta e l'ha trasformata in eventi. A questo punto, passiamo ai tag, agli attivatori e alle variabili. Il client passa ogni evento al resto del container per un'ulteriore elaborazione.

I client pacchettizzano i risultati da inviare al dispositivo. Una volta avviato il container, è il momento di rispondere al tostapane. La risposta può assumere molte forme. Magari il cliente ti dice semplicemente "OK, fatto". Forse uno dei tag vuole reindirizzare la richiesta a un altro server di raccolta. O forse uno dei tag indica alle luci del tostapane di cambiare colore. Qualunque cosa avvenga, è compito del client pacchettizzare i risultati e inviarli nuovamente al richiedente.

Fortunatamente, Tag Manager si occupa di gran parte di questo problema. Nei contenitori dei server sono inclusi tre client: Google Analytics 4, Google Analytics Universal Analytics e Measurement Protocol. Questi client forniscono gli strumenti necessari per iniziare a implementare la strumentazione dell'applicazione non appena avrai creato il container.

Un breve esempio

Esaminiamo un rapido esempio per vedere come si combinano tutti gli elementi. In questo esempio, creerai quanto segue:

  1. Un semplice sito web che utilizza gtag.js per inviare un evento click a un contenitore del server.
  2. Un client Google Analytics 4 che riceve l'evento.
  3. Un attivatore che si attiva su un evento click.
  4. Un tag Google Analytics 4 che invia i dati degli eventi a Google Analytics per l'elaborazione.

Per questo esempio, supponiamo che tu abbia già creato ed eseguito il deployment del contenitore del server.

Configurare gtag.js

Per prima cosa, configura gtag.js per inviare i dati al contenitore del server. Con gtag.js, l'invio di dati al contenitore del server funziona esattamente come l'invio di dati a Google Analytics, con una sola modifica. Come nella pagina di esempio riportata di seguito, imposta l'opzione di configurazione server_container_url in modo che rimandi al contenitore del server.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID', {
    server_container_url: 'https://analytics.example.com',
  });
</script>

Sostituisci TAG_ID con l'ID tag. Sostituisci https://analytics.example.com con l'URL del contenitore del server.

Successivamente, aggiungi una funzione sendEvent() per gestire gli eventi click:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID', {
    server_container_url: 'https://analytics.example.com',
  });

  function sendEvent() {
    gtag('event', 'click');
  }
</script>

<button onclick="javascript:sendEvent()">Send Event</button>

Sostituisci TAG_ID con l'ID tag. Sostituisci https://analytics.example.com con l'URL del contenitore del server.

Con questa configurazione, i gestori di eventi come la funzione sendEvent() inclusa in questo esempio invieranno un evento click al contenitore del server.

Cliente di Google Analytics 4

Il contenitore ha bisogno di un client per ricevere l'evento una volta raggiunto il server. Fortunatamente, nei contenitori dei server è preinstallato un client Google Analytics 4, quindi hai già completato questo passaggio.

Attivatore clic

A questo punto, crea un attivatore che si attivi sull'evento click. Crea un attivatore personalizzato che si attivi quando la variabile integrata Nome evento è uguale a "clic".

configurazione di trigger

Tag Google Analytics 4

Infine, collega un tag GA4 all'attivatore. Come per i client, un contenitore del server viene fornito con un tag GA4 incluso. Devi solo creare il tag, configurare le impostazioni e il contenitore è pronto. I client GA4 e i tag GA4 sono progettati per interagire. Ciò significa che devi solo creare un tag GA4 e la sua configurazione verrà estratta automaticamente dagli eventi in uscita dal client.

Visualizza l'anteprima del contenitore

Ora che il contenitore è configurato, fai clic su Anteprima. Visita il tuo sito web in un'altra finestra del browser. Man mano che le richieste e gli eventi vengono inviati al contenitore del server, le richieste e gli eventi vengono visualizzati sul lato sinistro della pagina di anteprima.

Quando le modifiche ti soddisfano, pubblica il contenitore del server.

Configurare il server per la modalità di produzione con pubblicazione proprietaria

Prima di inviare eventuale traffico di produzione al contenitore del server, ti consigliamo vivamente di installare il server sul tuo dominio proprietario e di eseguire l'upgrade del server alla modalità di produzione.