Come utilizzare i contenitori GTM personalizzati con Growform
Google Tag Manager (GTM) è un “tag manager” estremamente potente che ti permette di aggiungere facilmente tag standard e personalizzati al tuo sito web o al tuo modulo.
Per darti alcuni esempi di ciò che si può fare con i contenitori personalizzati di GTM, puoi:
- Attivare un evento pixel quando gli utenti raggiungono un determinato passaggio o completano il modulo
- Attivare una conversione di annunci Google quando gli utenti fanno clic su un determinato pulsante
- Utilizzate un registratore di schermo come Fullstory per vedere come gli utenti si comportano all’interno del vostro modulo.
- Praticamente qualsiasi altra cosa vi venga in mente!
Table of Contents
🎉 This guide is available in video form!
Questo video di 13 minuti ti illustra tutti i passaggi necessari per configurare i contenitori di Google Tag Manager con Growform:
Una volta terminato il video, vai in fondo a questo post. in fondo a questo post per vedere cosa puoi fare dopo.
Un rapido ripasso dei principali concetti GTM
Prima di iniziare, ecco un rapido ripasso dei principali concetti di GTM:
- Un contenitore è un’area o un repository distinto che contiene tag, trigger e variabili. I contenitori sono soggetti a versioni e GTM dispone di un pratico sistema di controllo delle versioni che ti permette di “riavvolgere” se sbagli qualcosa.
- Un tag è un pezzo di codice che deve essere attivato quando accade qualcosa. GTM ha una libreria di tag standard che puoi utilizzare (come Google Ads), ma puoi anche aggiungere i tuoi tag HTML personalizzati. L’utilizzo di tag standard è spesso consigliabile, in quanto introduce una minore complessità e possibilità di errore.
- Un trigger è il “quando” un tag deve essere attivato. I casi d’uso più comuni sono “Tutte le visualizzazioni della pagina” o quando viene cliccato un determinato pulsante. Quando una particolare condizione (o un insieme di condizioni) viene soddisfatta, il trigger viene attivato e tutti i tag sotto quel trigger vengono attivati.
- Una variabile è una piccola porzione di memoria all’interno di GTM che facilita l’utilizzo e il riutilizzo dei dati. Ad esempio, memorizziamo l’ID del modulo all’interno di una variabile GTM per facilitarne il riutilizzo e l’inserimento nei tuoi tag.
In realtà Growform utilizza due contenitori anziché uno, come spiegato nella sezione seguente…
Leggi prima questo: I problemi ridicolmente complicati causati dagli iFrame e perché Growform usa due contenitori
Come molti altri frammenti di codice incorporati, Growform viene eseguito all’interno di un iFrame per assicurarsi che non interferisca con il tuo sito web (e viceversa).
Questa bellissima illustrazione lo cattura bene:
Un iFrame è come una finestra del browser a sé stante.
L’iFrame non può vedere nulla del tuo sito web e il tuo sito web non può vedere nulla all’interno dell’iFrame.
Si tratta di due siti web distinti.
Questo pone seri problemi per il tracciamento, soprattutto perché la maggior parte dei partner pubblicitari non funziona all’interno di un iFrame.
Per ovviare a questo problema, abbiamo consultato alcuni esperti di GTM super avanzati e abbiamo creato due contenitori GTM che puoi scaricare e importare nel tuo account GTM:
- Un contenitore figlio. Il contenitore figlio ha il compito di tenere traccia di ciò che accade all’interno del modulo e di inviarlo al contenitore padre. Può anche essere un luogo utile per lanciare i tag che devono “vedere” all’interno dell’iFrame, come le applicazioni di registrazione dello schermo.
- Un contenitore genitore che riceve gli eventi dal contenitore figlio e che innesca effettivamente i tag.
Quindi, possiamo aggiungere un contenitore figlio e uno genitore al nostro diagramma come segue, con una freccia che rappresenta la comunicazione tra i due contenitori:
Ricapitolando:
- I moduli Growform vengono eseguiti all’interno di un iFrame. Cercare di inserire tag in iFrame e farli funzionare è destinato a fallire.
- Per ovviare a questo problema, abbiamo creato per te un contenitore genitore e uno figlio.
- Il contenitore figlio rileva le cose che accadono all’interno dell’iFrame e invia le informazioni al contenitore padre.
- Il contenitore padre riceve le informazioni dal contenitore figlio e lancia il tag vero e proprio… e il tag funziona davvero.
- Abbiamo creato questi contenitori e li abbiamo resi disponibili per il download per fungere da “punto di partenza” per le tue avventure di tagging.
Sembra complicato, ma ti guideremo attraverso un paio di esempi che ti permetteranno di lanciare i tag in men che non si dica.
Ecco come configurarsi…
1 – Crea o accedi al tuo account Google Tag Manager
Per prima cosa, vai su Google Tag Manager e crea un nuovo account se non ne hai già uno.
Potrebbe essere necessario creare un account anche all’interno di Google Tag Manager una volta configurato – a questo punto devi cliccare sul menu “tre puntini” del tuo account e premere “Crea contenitore”.
A questo punto dovresti creare due contenitori: un contenitore padre e un contenitore figlio, ed entrambi dovrebbero essere impostati su “Web” come contenitore di destinazione:
2 – Scarica i nostri contenitori di avvio per genitori e figli
You can download our parent and child “starter” containers here:
💾 Growform parent container
💾 Growform child container
Non cancellare o modificare i tag, le variabili o i trigger forniti con i contenitori di partenza (a meno che tu non sappia bene cosa stai facendo): i tuoi contenitori si basano su questi per funzionare correttamente.
3 – Importa i nostri contenitori genitore e figlio nel tuo account GTM
Ora che hai scaricato i nostri contenitori, è il momento di importarli nei nuovi contenitori vuoti che hai creato al punto 1.
Apri il tuo contenitore principale e vai su “Amministrazione”, quindi premi “Importa contenitore”. Vedrai una schermata come questa:
Seleziona il file growform-parent-container.json (scaricato al punto 2) e scegli “spazio di lavoro esistente”, quindi “spazio di lavoro predefinito”. Puoi tranquillamente utilizzare l’opzione di sovrascrittura, dato che il tuo contenitore era comunque vuoto.
Ora dovresti ripetere questa procedura per il contenitore figlio, in modo da avere sia un contenitore figlio che un contenitore genitore nel tuo account, popolati con i tag e le variabili che abbiamo impostato per te.
4 – Pubblica i tuoi contenitori e aggiungili al tuo modulo Growform
Premi “Invia” su entrambi i contenitori per pubblicarli:
Ora i tuoi contenitori sono pubblicati, sono in uno stato funzionante e pronti per essere aggiunti al tuo modulo Growform.
Vai al tuo modulo in Growform, premi “Impostazioni del modulo” e poi “Tracciamento e tagging”. Trova la casella di Google Tag Manager e copia gli ID dei contenitori padre e figlio in ognuno di essi. Non dimenticare di salvare!
A questo punto, hai una copia esatta dei contenitori “predefiniti” che utilizziamo per attivare gli altri tag (come Facebook e Google Ads).
Questo significa che tutte le altre impostazioni che hai nella pagina delle impostazioni di tracciamento e tagging continueranno a funzionare, ma saranno attivate dal tuo contenitore personalizzato, anziché dal nostro. Forte, eh!
Allo stesso modo, la funzionalità di attivazione di questo modulo dipende dal fatto che i tuoi contenitori GTM rimangano intatti, quindi fai attenzione ai contenitori e non rimuovere nulla di ciò che è già presente.
E poi?
Ora che hai completato la configurazione di base, sei pronto per iniziare a sparare qualche tag.
Leggi le nostre guide qui sotto per iniziare a conoscere alcuni casi d’uso reali:
Come attivare un tag quando un utente cambia passo o completa il modulo
Come attivare un tag quando un utente preme un determinato pulsante
Come attivare un tag per la registrazione dello schermo o simili
Domande frequenti
Due to the way React works, it can be difficult to use class selectors (.classnames) to target particular elements, so we recommend following this guide if you wish to target a button.
If you want to target some other element, you can always contact support and we’ll be able to target pretty much anything.
Tags should almost always be fired in the parent container: the child container’s job is simply to “tell” the parent container about what’s happening inside Growform’s iFrame, so tags can be fired outside it, in the parent.
For a basic guide to firing your first tag, see here.
Eugh, we know. It’s just part and parcel of working with iFrames.
In theory, you could create your own child container from scratch and add it to your Growform settings.
But this would be next to useless, as tags would only fire inside the iFrame.
By using our “starter” containers, you get access to a bunch of functions and tags that will let you do everything you need to do.
Once you add the our starter containers, Growform will pass the details from your tracking & tagging settings page into your new containers, and everything will function as normal – as long as you keep the containers intact, which are now doing the heavy lifting!
There are 2 approaches when working with multiple forms:
a.) Use the same containers for all forms: This is a perfectly viable option. The form ID and other information is available inside GTM, so you can build logic about what to fire when inside Google Tag Manager. This works particularly well if your forms have similar purposes.
b.) Use different containers for different forms: If you’re managing multiple clients, you can always create a new account for each client. This keeps their tags completely separate and is better for to avoid cross-contamination of tags.
Hai bisogno di aiuto con i contenitori GTM personalizzati? Il nostro team è esperto di tracking e tagging avanzato e può aiutarti tramite la chat online all’interno del tuo account.