Google Tag Manager - Guida introduttiva

Questo capitolo fornisce una panoramica su come iniziare con Google Tag Manager, aggiungere un tag e analizzarlo per verificarne la completezza.

Durante il processo, utilizzeremo il blog (creato nel capitolo precedente) per la dimostrazione dei diversi passaggi.

Step 1 - Come mostrato nella schermata sopra, fai clic sul codice del contenitore (GTM-XXXXXXX) nell'angolo in alto a destra accanto all'etichetta Modifiche area di lavoro: 0.

Vedrai la finestra di dialogo Installa Google Tag Manager.

Ora, qui vogliamo installare il codice di Google Tag Manager sul nostro blog.

Step 2 - Per ottenere il codice GTM nella figura sopra aggiunto sul blog, vai a https://Blogger.com e accedi con le tue credenziali.

Ti verrà presentata una schermata come mostrato di seguito con il nome del tuo post sul blog nell'elenco.

Step 3 - Dal pannello a sinistra, individua l'opzione: Tema.

Vedrai la seguente schermata.

Step 4- Fare clic su Modifica HTML per modificare il codice HTML per il blog. Sarà visibile un codice sorgente HTML per il tuo blog, come mostrato nella figura seguente.

Qui, vogliamo installare il codice Google Tag Manager. Come indicato da GTM, siamo tenuti a inserire il codice nelle seguenti posizioni:

Il più in alto possibile nel tag <head>
Nel tag <body>

Step 5- Individua il tag <head> nel codice HTML sopra. Torna ahttps://tagmanager.google.come copia il codice nella finestra di dialogo Installa Google Tag Manager al passaggio 1 sopra. Incolla il codice copiato esattamente sotto l'apertura del tag <head>.

Step 6 - Allo stesso modo, individua il tag <body> nel codice HTML.

Note- Puoi usare il tasto di scelta rapida Ctrl + F per trovare i tag <head> e <body>. La funzionalità di ricerca del browser tornerà utile per trovare i tag.

Una volta individuato il tag <body>, ripetere la procedura per copiare il codice associato al tag <body> da Google Tag Manager.

Per facilitare l'individuazione del tag, in genere, il tag <body> inizierà con <body expr: class = '"loading" + data: blog.mobileClass'>.

Incolla il codice richiesto sotto il tag <body>, quindi fai clic su Salva tema.

Mostrerà il seguente errore ed è normale vedere quell'errore.

Step 7 - Per risolvere questo problema, nel codice di Google Tag Manager sotto il tag <head>, individua la riga con -

j = d.createElement(s),dl = l != 'dataLayer'?' &l = '+l:'';j.async = true;j.src =

Sostituisci il & come sottolineato nella riga sopra con &e fai clic su Salva tema. L'errore verrà risolto.

Questo conclude il processo di aggiunta del codice di Google Tag Manager al tuo blog.

Introduzione al tag

Come detto semplicemente sul sito web dell'assistenza di Google Tag Manager, un tag è un pezzo di codice che invia informazioni a una terza parte, come Google Analytics.

Prendendo spunto da lì, rispetto a un particolare strumento analitico, possono essere associati più tag. Averli tutti in una pagina è davvero un vantaggio, poiché il marketer del prodotto vedrà più metriche associate alla pagina.

Tuttavia, c'è un punto altrettanto importante da notare qui, non si dovrebbe esagerare con i tag su un sito web. Ciò non solo aumenta la confusione durante la gestione del tag, ma rende anche scomodo differenziare i dati provenienti da vari tag.

Il codice seguente, come abbiamo visto nella finestra di dialogo Installa Google Tag Manager, è in realtà un tag.

<!-- Google Tag Manager -->
<script>
   (function(w,d,s,l,i){
      w[l] = w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});
      var f = d.getElementsByTagName(s)[0], j = d.createElement(s),
      dl = l != 'dataLayer'?' &l = '+l:'';
      j.async = true;
      j.src = 'https://www.googletagmanager.com/gtm.js?id='+i+dl;
      f.parentNode.insertBefore(j,f);
   })
   (window,document,'script','dataLayer','GTM-M8QLQCZ');
</script>
<!-- End Google Tag Manager -->

Posizione di un tag

La posizione di un tag può essere ovunque nel codice sorgente della pagina. Può essere molto in alto come quello sopra o può sedersi nel piè di pagina trasmettendo le informazioni richieste.

Questo conclude una rapida introduzione a un tag e come può essere creato.

Trigger

Gli attivatori rilevano effettivamente quando un tag verrà attivato. Si tratta di un insieme di regole per configurare l'attivazione di un tag. Ad esempio, gli attivatori possono decidere che un particolare tag "X" verrà attivato quando un utente esegue l'azione "Y". Più specificamente, un attivatore può indirizzare un tag ad attivarsi quando si fa clic su un pulsante particolare in una forma particolare.

I trigger sono condizioni che possono essere associate a un tag per funzionare nel modo desiderato. Un esempio del mondo reale sarà, considera che un tag è stato configurato per una transazione di successo su una pagina di e-commerce.

Il tag indicherà se la transazione è stata eseguita con successo. Per fare ciò, verrà creato un attivatore, che dirà, attiva il tag solo quando la pagina di conferma della transazione viene visualizzata all'utente.

In modo più evidente, considera di voler tenere traccia di tutte le visualizzazioni di pagina di un blog / sito web. Quindi, in particolare, puoi creare un tag con Google Analytics, che verrà attivato quando l'utente accede a qualsiasi pagina del tuo blog / sito web. Un attivatore in questo caso sarà generico, dicendo che attiva questo tag su tutte le pagine. Il trigger verrà impostato di conseguenza.

Il grilletto a volte può complicarsi. Ad esempio, se qualcuno fa clic su un pulsante in una pagina specifica, attiva un tag.

Come mostrato nella figura seguente, è possibile accedere ai trigger facendo clic su Trigger nel pannello laterale sinistro dello schermo.

Poiché non ci sono ancora trigger configurati, non vedrai risultati sui trigger.

Variabili

Essenzialmente, le variabili sono valori che possono essere modificati.

Ad esempio, consideriamo un semplice clic su un collegamento. Quando si fa clic su un collegamento, sono presenti diverse variabili integrate che vengono raccolte con questo evento di clic. Queste variabili possono eventualmente essere utilizzate per registrare il collegamento, che viene reindirizzato quando un utente fa clic sul pulsante di collegamento specifico.

Andando un po 'in dettaglio, puoi anche registrare la particolare classe div dell'elemento che è stato cliccato, utilizzando le variabili. Sono chiamate variabili, perché se ci sono 10 diversi pulsanti di collegamento sulla pagina, il reindirizzamento da questi pulsanti di collegamento cambierà, a seconda di quale degli elementi si fa clic.

È possibile accedere alle variabili utilizzando il pannello di sinistra e facendo clic su Variabili.

Google Tag Manager offre due tipi di variabili:

Variabili incorporate
Variabili definite dall'utente

Come indicano i nomi, puoi utilizzare le variabili esistenti offerte da Google Tag Manager oppure puoi creare le tue variabili.

Consideriamo un esempio e vediamo come funziona un tag. Eseguiremo il debug del tag ora con Google Tag Manager.

Debug di un tag

Nella sezione iniziale di questo capitolo, abbiamo dedicato del tempo ad aggiungere il codice di monitoraggio di Google Tag Manager al nostro blog su Blogger.com.

Questo è stato il primo passaggio per consentire a Google Tag Manager di identificare il nostro codice di monitoraggio. Se osservi attentamente, nello script che è stato incluso nel tag <head>, esiste un codice di monitoraggio di Google Tag Manager nel formato GTM-XXXXXXX.

Ora, quando si tratta di eseguire il debug di un tag, è abbastanza semplice con l'interfaccia di Google Tag Manager. Useremo il tag di base di Google Analytics per la dimostrazione. Supponiamo che esista già un account Google Analytics.

Creazione di un tag Google Analytics di base

In Google Tag Manager, per creare un tag, sono necessari vari passaggi. Per entrare nei dettagli di ciascuno di essi, consideriamo la seguente schermata.

Step 1 - Fare clic sul pulsante AGGIUNGI UN NUOVO TAG.

Un pannello da destra scorrerà per avviare il processo di creazione di un nuovo tag. Questo mostrerà un tag vuoto senza titolo da configurare.

Step 2- Fornisci un nome al tuo tag. Diamogli il nome: First Tag.

Step 3 - Al termine, fai clic sul testo / icona - Scegli un tipo di tag per iniziare la configurazione….

Un altro pannello scorrerà da destra, che avrà i seguenti tipi di tag visualizzati.

Come abbiamo visto nella definizione, ci sono diversi tag associati a diversi strumenti analitici. In questo particolare passaggio, Google Tag Manager richiede di specificare il tipo esatto di tag che desideri creare.

Noterai alcuni tipi di tag come segue:

Universal Analytics
Google Analytics classico
Remarketing AdWords
Google Optimize

Note- Universal Analytics è la versione migliorata e più popolare di Google Analytics. Tuttavia, ci sono molti siti che utilizzano Google Analytics classico.

Per questo esempio, procediamo specificando Universal Analytics.

Step 4- Fai clic su Universal Analytics per continuare. Il controllo tornerà alla schermata precedente e ti verrà richiesto di selezionare cosa desideri monitorare. Vedere lo screenshot seguente per riferimento.

Step 5 - Seleziona Abilita la sostituzione delle impostazioni in questo tag.

Note- Stiamo utilizzando questo passaggio per acquisire familiarità con la creazione di tag a un ritmo più veloce. Puoi andare avanti e creare una variabile delle impostazioni di Google Analytics senza selezionare anche la casella di controllo sopra.

Step 6- Apri l'interfaccia di Google Analytics. In Google Analytics, individua il pulsanteADMINin prima pagina. Nella sezione Proprietà, fai clic su Impostazioni proprietà. Sarai in grado di vedere la schermata simile alla seguente.

Step 7- Copia l'ID di monitoraggio. L'ID di monitoraggio avrà il formato UA-XXXXX-X.

Step 8- Dopo aver copiato l'ID di monitoraggio, torna all'interfaccia di Google Tag Manager. Come già mostrato in precedenza, incolla l'ID di monitoraggio nella casella di testo associata.

Ora stiamo per configurare l'elemento importante del tag: un trigger.

Indicheremo a Google Tag Manager che il tag dovrebbe essere attivato se la pagina viene visualizzata dall'utente. Per fare ciò, dovremmo avere il trigger configurato utilizzando la sezione successiva sullo schermo.

Step 9 - Fai clic su Scegli un attivatore per attivare questo tag ...

Una finestra di dialogo scorrerà da sinistra, richiedendo di selezionare un trigger. Mostrerà il trigger come mostrato nello screenshot seguente.

Step 10 - Fare clic su Tutte le pagine.

Il controllo tornerà alla schermata di configurazione del tag. Fare clic sul pulsante blu SALVA nell'angolo in alto a destra. Hai configurato correttamente il tuo primo tag!

Step 11 - Ora per la modalità di debug, fai clic sul pulsante PREVIEW in grigio.

Come mostrato nello screenshot qui sopra, verrà visualizzata una casella arancione. Ciò indica che la modalità di debug è attiva. Accedi al tuo blog utilizzando il link disponibile.

Step 12 - Ora, quando accedi al blog, dovresti essere in grado di vedere una sezione sul tuo blog che mostra la sezione di debug di Google Tag Manager.

Inoltre, se osservi da vicino, c'è First Tagvisualizzato sotto Tag attivati in questa pagina. Ciò indica che il nostro tag è stato attivato in caso di visualizzazione della pagina riuscita.

Step 13- Nella sezione di debug, fai clic su Variabili. Quindi, fare clic su Finestra caricata nel pannello di sinistra. Questa azione significa che stiamo selezionando un'azione per analizzare le variabili caricate come risultato di tale azione.

Mostrerà la sezione Variabili come si vede contrassegnata in una casella verde nella seguente schermata.

È possibile analizzare le variabili più chiaramente mentre si passa al capitolo successivo.

↰ Previous page Next page ↱