Implementazione di un trigger personalizzato di Google Tag Manager per il monitoraggio degli invii dei moduli all’interno di un iFrame

Nel dinamico mondo del marketing digitale, il monitoraggio delle interazioni degli utenti sui siti web è fondamentale per l’analisi delle prestazioni e l’ottimizzazione delle strategie. Recentemente mi sono trovato di fronte a una sfida interessante: un cliente doveva tracciare gli invii dei moduli all’interno di un iframe su un sito web di terze parti, al quale non aveva accesso diretto. In questo articolo descrivo i passaggi che ho seguito per risolvere questo problema utilizzando Google Tag Manager (GTM).

La sfida

Il cliente ha provato a utilizzare il trigger standard “Visibilità dell’elemento” in GTM. Tuttavia, questo approccio non ha funzionato, poiché gli elementi all’interno dell’iframe non potevano essere rilevati. Dopo alcune ricerche, ho scoperto che l’invio del modulo all’interno dell’iframe generava un determinato postMessage con data.code = "success" in caso di invio riuscito del modulo. Questo ha fornito il punto di partenza necessario per la nostra soluzione di tracciamento.

La scoperta di «PostMessage»

Per individuare l’ postMessage utilizzato dall’iframe, ho utilizzato lo strumento Chrome Inspector. Ecco come ho proceduto:

1. Aprire Chrome Inspector: cliccare con il tasto destro del mouse sulla pagina e selezionare “Inspect” oppure Ctrl+Shift+I per aprire gli Strumenti di sviluppo di Chrome.
2. Passare alla console: negli Strumenti per sviluppatori, passare alla scheda «Console».
3. Aggiungere un listener di eventi: per rilevare tutti gli postMessage eventi, ho inserito il seguente script nella console: window.addEventListener('message', console.log); Questo script registra tutti gli postMessage nella console.
4. Invia il modulo: successivamente ho interagito con il modulo nell’iframe e ho osservato la console per individuare il postMessage contenuto data.code = "success".

Con questo metodo ho constatato che, all’invio del modulo, viene generato un postMessage con le informazioni chiave necessarie per creare un evento personalizzato in GTM.

La soluzione

Per rilevare l’evento di invio del modulo, ho implementato in GTM un tag HTML personalizzato che intercetta lo specifico postMessage proveniente dall’iframe. Ecco la guida passo dopo passo:

1. Identificazione del PostMessage: al momento dell’invio del modulo, l’iframe invia un postMessage con data.code = "success". Possiamo utilizzare questo messaggio per attivare il nostro evento personalizzato in GTM.
2. Creazione di un tag HTML personalizzato: in GTM, aggiungere un nuovo tag di tipo «HTML personalizzato» con il seguente script: <script> window.addEventListener('message', function(event) { if (event.origin === "https://converto.simplebooking.it" && event.data.code === "success") { window.dataLayer.push({ "event": "simplebooking_success" }); } }); </script> Questo script monitora postMessage gli eventi. Quando riceve un messaggio dalla fonte specifica https://converto.simplebooking.it con data.code “success”, invia un evento personalizzato (simplebooking_success) al livello dati.
3. Configurare il tag HTML personalizzato :
   • Trigger: impostare il trigger su “Tutte le pagine” in modo che lo script venga eseguito su ogni pagina in cui potrebbe essere caricato l’iframe.
   • Priorità di attivazione del tag: assicurarsi che questo tag venga attivato prima di tutti i tag di conversione associati, per registrare correttamente l’evento.
4. Creare un trigger di evento personalizzato: per reagire all’ simplebooking_success evento, creare un nuovo trigger:
   • Tipo di trigger: Evento personalizzato
   • Nome evento: simplebooking_success
   • Questo trigger viene attivato quando: Tutti gli eventi personalizzati
5. Collegare i tag di conversione: una volta configurato il trigger di evento personalizzato, è possibile collegare i propri tag di conversione (ad es. per Facebook e Google) a questo trigger. Questa configurazione garantisce che i tag di conversione vengano attivati non appena viene rilevato l’evento di invio del modulo.

Configurazione finale

Dopo aver completato i passaggi sopra indicati, la configurazione di GTM dovrebbe apparire più o meno così:

• Tag HTML personalizzato: contiene lo postMessage script listener.
• Trigger evento personalizzato: denominato simplebooking_success.
• Tag di conversione: configurati in modo da attivarsi quando simplebooking_success si verifichi l’evento.

Test e verifica

1. Modalità anteprima: utilizzare la modalità anteprima di GTM per testare l’implementazione. Inviare il modulo all’interno dell’iframe e verificare se l’ simplebooking_success evento venga visualizzato nella console di debug di GTM.
2. Console del browser: apri la console del browser e attiva l’ postMessage per assicurarsi che lo script lo trasmetta correttamente al livello dati.
3. Verifica dell’attivazione dei tag: assicurati che i tag di conversione vengano attivati come previsto quando l’ simplebooking_success viene rilevato l’evento.

Seguendo questi passaggi, potrete tracciare con successo gli invii di moduli all’interno di un iframe utilizzando Google Tag Manager, anche se non avete accesso diretto al contenuto dell’iframe. Questo approccio garantisce la raccolta di preziosi dati di conversione e l’ottimizzazione efficace delle vostre iniziative di marketing.