Introduzione al tagging lato server

Il tagging lato server è un nuovo modo per utilizzare Google Tag Manager per instrumentare la tua applicazione su tutti i dispositivi. I contenitori dei server utilizzano lo stesso modello di tag, attivatori e variabili a cui sei abituato, fornendo al contempo nuovi strumenti che ti consentono di misurare l'attività utente ovunque si svolga.

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

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

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

Al contrario, un contenitore del server non viene eseguito nel browser dell'utente o sul suo smartphone. Viene invece eseguito su un server che controlli.

Diagramma di un sito instrumentato utilizzando un contenitore di tagging lato server.

Figura 2: un 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 a i dati sul server finché non scegli di inviarli altrove. Hai il controllo completo sulla forma dei dati e sulla loro provenienza dal server. I tag vengono creati utilizzando la tecnologia JavaScript in sandbox. Le autorizzazioni ti consentono di visualizzare le funzionalità del tag, mentre le norme ti permettono di impostare limiti per il contenitore.

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

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

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

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

Come funzionano i client

I client fungono da ponte tra il software in esecuzione sul dispositivo di un utente e il tuo contenitore del server. Il client riceve i dati di misurazione da un dispositivo, li trasforma in uno o più eventi, li indirizza per l'elaborazione nel contenitore e li impacchetta per inviarli di nuovo al richiedente.

È un sacco di roba! Diamo un'occhiata più da vicino a ogni parte singolarmente. La Figura 3 mostra i dati che arrivano nel contenitore del server dal browser web dell'utente e dal tuo server web al contenitore del server.

Diagramma di un sito instrumentato utilizzando un contenitore di tagging lato server.

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

I client ricevono i dati di misurazione da un dispositivo. Supponiamo che tu voglia misurare l'attività utente in tre posizioni: un sito web, un'app per smartphone e un tostapane smart. Il tuo sito web utilizza Google Analytics, la tua app per smartphone utilizza Firebase Analytics e il tuo tostapane utilizza un protocollo proprietario chiamato "ToastMeasure".

In genere, per instrumentare questi tre dispositivi con Google Tag Manager è necessario un contenitore diverso per ogni piattaforma. Poiché il contenitore del server non viene eseguito sul dispositivo, lo stesso contenitore può gestire l'instrumentazione di Analytics per tutte e tre le piattaforme dei dispositivi. Tuttavia, c'è un problema. Questi dispositivi non comunicano tutti nello stesso modo. Il protocollo di Google Analytics non è lo stesso del protocollo ToastMeasure. È qui che entrano in gioco i client.

Al posto di questi tre contenitori, il tuo contenitore del server ha tre client. Ogni richiesta che arriva nel contenitore viene elaborata da ogni client in ordine di priorità, a partire dal client con la priorità più alta. La prima cosa che ogni client farà è decidere se sa come elaborare quel tipo di richiesta. Se può, il client "acquisisce" la richiesta e continua alla fase successiva dell'elaborazione. L'acquisizione della richiesta impedisce l'esecuzione dei client successivi. Se il client non può 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. Una volta che il client ToastMeasure ha acquisito una richiesta, deve trasformarla in qualcosa che il resto del contenitore possa comprendere. Questo qualcosa è un insieme di eventi.

Gli eventi sono azioni che si verificano e che vuoi misurare. Possono essere di qualsiasi tipo: start_toasting, finish_toasting o buy_bread. Esistono alcuni consigli sulla struttura degli eventi generati da un client, ma l'unico requisito è che il resto del contenitore li comprenda.

I client eseguono il contenitore. Il client ha acquisito la richiesta e l'ha trasformata in eventi. Ora è il momento di tag, attivatori e variabili. Il client passa ogni evento al resto del contenitore per un'ulteriore elaborazione.

I client impacchettano i risultati per inviarli di nuovo al dispositivo. Una volta eseguito il contenitore, è il momento di rispondere al tostapane. La risposta può assumere molte forme. Forse il client dice semplicemente "Ok, fatto". Forse uno dei tag vuole reindirizzare la richiesta a un altro server di raccolta. O forse uno dei tag dice alle luci del tostapane di cambiare colore. Qualunque cosa debba succedere, è compito del client impacchettare i risultati e inviarli di nuovo al richiedente.

Fortunatamente, Tag Manager gestisce gran parte di questa procedura. I contenitori dei server includono due client: Google Analytics e Measurement Protocol. Questi client forniscono gli strumenti necessari per iniziare a instrumentare l'applicazione non appena hai creato il contenitore.

Un breve esempio

Esaminiamo un breve esempio per capire come si integrano tutti gli elementi. In questo esempio, creerai:

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

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

Configurare gtag.js

Innanzitutto, configura gtag.js per inviare i dati al contenitore del server. Con gtag.js, l'invio dei dati al contenitore del server funziona esattamente come l'invio dei dati a Google Analytics, con una modifica. Come nella pagina di esempio riportata di seguito, imposta l'opzione di configurazione server_container_url in modo che punti 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 il tuo tag ID. Sostituisci https://analytics.example.com con l'URL del contenitore del server.

A questo punto, 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 il tuo tag ID. 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.

Client Google Analytics

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

Attivatore clic

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

configurazione del trigger

Tag di Google Analytics

Infine, collega un tag Google Analytics all'attivatore. Come per i client, un contenitore del server include un tag Google Analytics. Ti basta creare il tag, configurare le impostazioni e il contenitore è pronto. I client Google Analytics e i tag Google Analytics sono progettati per funzionare insieme. Ciò significa che devi solo creare un tag Google Analytics e la sua configurazione verrà recuperata automaticamente dagli eventi provenienti dal client.

Visualizzare l'anteprima del contenitore

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

Quando sei soddisfatto delle modifiche, pubblica il contenitore del server.

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

Prima di inviare qualsiasi 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.