In questa guida scoprirai come monitorare le sorgenti di traffico e gli eventi con Google Analytics e Google Tag Manager da una pagina che contiene un iframe.

Prima di iniziare, vediamo cosa ti serve:

  1. un iframe di proprietà, ovvero a cui hai accesso al codice sorgente
  2. un account di Google Analytics
  3. un account di Google Tag Manager
  4. una conoscenza minima di Google Tag Manager e Google Analytics 🙂

Configurazione iniziale di Google Tag Manager

Passaggio 1

Crea un nuovo contenitore di Google Tag Manager, nominalo “Contenitore Master” e installalo all’interno della pagina master, quella che contiene l’iframe.

Passaggio 2

Crea un secondo contenitore di Google Tag Manager, nominalo “Contenitore iframe” e installalo all’interno del codice della pagina iframe.

Configurazione Contenitore Master

Passaggio 3

Apri la scheda Variabili e clicca su Configura nella sezione Variabili Integrate.

Seleziona le opzioni Event, Click Class, Click ID, Click URL, Click Target, Page Path, Page URL, Form ID, Form Target e Form Class.

Passaggio 4

Crea un nuovo TAG, tipologia “HTML Personalizzato”, scegli come attivatore “Tutte le pagine” e copia e incolla questo codice:

<script type="text/javascript">
 (function(window) {
   addEvent(window, 'message', function(message) {
     try{
       var data = JSON.parse(message.data);
       var dataLayer = window.dataLayer || (window.dataLayer = []);
       if (data.event) {
         dataLayer.push({'event': data.event,'postMessageData': data});
       }
     }
     catch(e){}
   });
   function addEvent(el, evt, fn) {
     if (el.addEventListener) {
       el.addEventListener(evt, fn);
     } else if (el.attachEvent) {
       el.attachEvent('on' + evt, function(evt) {
        fn.call(el, evt);
       });
     } else if (typeof el['on' + evt] === 'undefined' || el['on' + evt] === null) {
       el['on' + evt] = function(evt) {
         fn.call(el, evt);
       };
     }
   }
 })(window);
</script>

Nominalo “Event Listener” e salva.

Questo codice permetterà al contenitore iframe di comunicare con il contenitore Master.

Configurazione Google Analytics tramite Google Tag Manager

Passaggio 5

Apri il contenitore Master e crea una nuova Variabile “Definita dall’utente”, seleziona la tipologia “Impostazioni di Google Analytics” e compila i campi come l’immagine qui sotto:

Nel campo Tracking ID inserisci il tuo codice UA di Google Analytics. Ad esempio: UA-00000000-1

Nelle “Altre impostazioni” riempi i campi con i dati come nello screenshot.

Nomina la variabile “Impostazioni Analytics” e salva.

Passaggio 6

Crea un nuovo TAG all’interno del contenitore Master, scegli l’opzione “Google Analytics – Universal Analytics”, seleziona la tipologia di tracking “Visualizzazione pagina” e all’interno del campo “Impostazioni di Google Analytics”, seleziona la variabile “impostazioni Analytics”.

Imposta l’attivatore su Tutte le pagine, nomina il tag “Pageview Analytics” e salva.

Passaggio 7

Pubblica il contenitore Master.

Configurazione Contenitore iframe

Ora che hai completato la configurazione del contenitore Master, passiamo alla configurazione del contenitore iframe.

Nel prossimo esempio ho inserito il passaggio di un evento semplice come il clic su un pulsante che porta l’utente sulla mia pagina contatti.

Lo stesso procedimento, però, lo puoi utilizzare per tutti gli eventi che desideri, come ad esempio l’invio di un modulo contatti, l’iscrizione alla newsletter, etc.

Basterà modificare la tipologia di attivatore che scegli e personalizzare i campi del codice che troveri di seguito.

Passaggio 8

Apri la scheda Variabili e clicca su Configura nella sezione Variabili Integrate.

Seleziona le opzioni Event, Click Class, Click ID, Click URL, Click Target, Page Path, Page URL, Form ID, Form Target e Form Class.

Passaggio 9

Crea un nuovo attivatore nel contenitore iframe, seleziona come tipologia “Clic – Tutti gli elementi” e scegli l’opzione “Alcuni Clic”.

Scegli la variabile “Click URL” e inserisci l’URL di destinazione del tuo pulsante (vedi screenshot).

Nel mio caso /contattami/

Nomina questo attivatore “Clic sul Pulsante” e salva.

Passaggio 10

Ora crea un nuovo Tag nel contenitore iframe, seleziona la tipologia “HTML personalizzato” e inserisci questo codice al suo interno:

<script>
 try {
   var postObject = JSON.stringify({event: 'Clic', content:’Contatti’});
   parent.postMessage(postObject, 'https://NOMEDELDOMINIO.xx');
   parent.postMessage(postObject, 'https://www.NOMEDELDOMINIO.xx');
 } catch(e) {
   window.console && window.console.log(e);
 }
</script>

Personalizza il valore NOMEDELDOMINIO con il dominio del tuo sito o comunque dove è presente la pagina che contiene l’iframe.

Ad esempio: https://mirkomaiorano.it e https://www.mirkomaiorano.it

Scegli come attivatore il “Clic sul Pulsante” che abbiamo creato prima, nomina il Tag “Postmessage – Evento Clic sul pulsante” e salva.

Nota: nel codice dell’esempio sopra puoi personalizzare i valori ‘Clic’ e ‘Contatti’ in base alle tue necessità. Ad esempio, se stai configurando l’evento per un modulo di iscrizione alla newsletter, potresti utilizzare ‘Form’ e ‘Newsletter’.

Passaggio 11

Pubblica il contenitore iframe.

Configurazione Evento di Google Analytics

Passaggio 12

Apri il contenitore Master, crea una nuova variabile “Definita dall’utente”, scegli come tipologia “Variabile di livello dati” e nel campo Nome variabile livello dati scrivi “postMessageData.content” (vedi screenshot).

Nomina questa variabile “DLV – Clic” e salva

Passaggio 13

Crea un nuovo attivatore nel contenitore Master, scegli la tipologia “Evento personalizzato” e inserisci nel campo Nome evento “Clic” (vedi screenshot).

Nomina questo attivatore “Clic Pulsante” e salva.

Passaggio 14

Ora non ci resta che creare un nuovo Tag per inviare questo evento a Google Analytics.

Crea un nuovo Tag, scegli la tipologia “Google Analytics – Universal Analytics”, scegli l’opzione “Evento” come tipo di monitoraggio e compila i campi come lo screenshot qui sotto.

All’interno del campo “Impostazioni di Google Analytics”, seleziona la variabile “impostazioni Analytics” che abbiamo creato all’inizio.

Scegli come attivatore l’evento personalizzato “Clic Pulsante”, nomina il tag “GA- Evento Clic” e salva.

Ultimo step

Pubblica il contenitore Master e prova il funzionamento dell’intera procedura avviando l’anteprima del contenitore Master, visitando la tua pagina che ospita l’iframe e cliccando sul pulsante.

Dovresti vedere, nella sezione di debug di Google Tag Manager, l’attivazione del Tag “GA- Evento Clic”.

Se non dovesse funzionare, ripercorri questa guida e controlla di non aver saltato qualche passaggio.

Grazie a questa procedura sarai in grado di monitorare correttamente le varie sorgenti di traffico e tutti gli eventi e le conversioni registrate all’interno del tuo iframe.

© Mirko Maiorano

Ti è piaciuto l'articolo?

Condividilo con un amico a cui potrebbe interessare.

Inoltre, se non vuoi perderti i miei prossimi articoli, attività, corsi e workshop, iscriviti alla mia newsletter: clicca qui!

Vuoi parlarmi o incontrarmi? Scopri come farlo visitando la pagina Contattami

  • 40
    Shares