La guida spiega come implementare il GLAMI Pixel in Google Tag Manager seguendo alcuni semplici passaggi. Questo processo richiede l'inserimento di informazioni come l'API key ,il codice del paese e l'assegnazione di un trigger per ciascun evento.
Requisiti
1. Account Google Tag Manager
Se non hai un account, segui i passaggi della guida ufficiale di Google:
https://support.google.com/tagmanager/answer/14842164
2. Container di Google Tag Manager installato sul sito web
Se non hai installato il container, segui i passaggi della guida ufficiale di Google:
https://support.google.com/tagmanager/answer/14847097
3. Dati di e-commerce nel DataLayer
Puoi controllare come i dati di e-commerce vengono inviati al DataLayer nella guida ufficiale di Google:
https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtm
Aggiungi il template STILEO Pixel al tuo workspace
Si trova nella Galleria modelli della community, disponibile qui.
Ci sono quattro eventi nel STILEO Pixel:
|
Chiamato su ogni pagina |
|
|
Chiamato quando un cliente visualizza un prodotto |
|
|
Chiamato quando un cliente aggiunge un articolo al suo carrello |
|
|
Chiamato quando l'ordine è completato |
- Per creare un nuovo tag, basta entrare nella pagina "Tag" del Tag Manager e fare clic su "Crea nuovo".
- Ogni tag è composto da due parti: la configurazione del tag che gli comunica cosa fare e un grilletto che gli indica quando farlo.
GLAMI Pixel - Configurazione
Nomina il primo tag "GLAMI Pixel - Configuration" e come tipo di tag seleziona "GLAMI piXel v2".Per iniziare, è necessario compilare quattro informazioni:
- Tag type - seleziona "Configuration"
- Chiave API - Puoi trovarla nella tua dashboard GLAMI. Vai a Impostazioni > GLAMI Pixel
- Codice paese - Questo è un codice di due lettere che identifica il paese. Puoi trovarlo come codice Alpha-2 su questo sito: https://www.iban.com/country-codes.
Esempi: Italia -> IT, Romania -> RO - Altre impostazioni - Qui è possibile selezionare la fonte dei dati. Se il Data Layer è configurato correttamente otterrà automaticamente le variabili corrette. In alternativa, la configurazione manuale permette di selezionare con precisione le variabili per ogni evento.
GLAMI Pixel - Event
Nomina il secondo tag "GLAMI Pixel - Event" e come tipo di tag seleziona "GLAMI piXel v2".
Sono necessari solo due campi:
- Tag type - seleziona "Event"
- Altre impostazioni - Qui è possibile selezionare la fonte dei dati. Se il Data Layer è configurato correttamente e otterrà automaticamente le variabili corrette. In alternativa, la configurazione manuale permette di selezionare con precisione le variabili per ogni evento.
Per procedere, devi aggiungere tre trigger a questo tag. Per creare un trigger, vai alla pagina "Triggers" nel tuo Tag Manager e fai clic su "New".
Nomina ciascuno di essi, dopo l'evento deve attivare:
- ViewContent - Scatta quando si visualizza qualsiasi pagina del prodotto
- AddToCart - Scatta quando si aggiunge un elemento al carrello
- Purchase - Scatta quando la transazione è terminata
Se non conosci il nome dell'evento giusto, puoi facilmente verificarlo entrando nella modalità Preview & Debug ed eseguendo l'azione che dovrebbe attivare l'evento. Vedi la sezione "Come verificare l'implementazione?" di questa guida.
Congratulazioni!
STILEO Pixel è ora implementato. Non dimenticare di pubblicare il tuo contenitore. Si consiglia di provarlo in modalità anteprima.
Come verificare l'implementazione?
Per attivare la modalità anteprima e la modalità debug per lo spazio di lavoro attivo:
- Fai clic su Anteprima nella parte superiore a destra del tuo workspace.
- Inserisci l'URL del tuo sito.
- Alcuni siti o pagine potrebbero risultare non funzionanti se si aggiunge un parametro di debug all'URL. In tal caso, è possibile deselezionare la opzione " Include debug signal in the URL".
- Fai clic su Connetti. Il sito si apre in una nuova finestra e viene visualizzato come Connesso nella parte inferiore a destra.
- Clicca di nuovo sulla scheda Tag Assistant e fai clic su Continua per accedere nel pannello debug.
La barra di navigazione elenca le possibilità di accesso alle informazioni sui Tag, sulle Variabili e sul Livello dati, mentre la barra Sommario indica un elenco di eventi.
Tag: Fai clic su Tag per vedere quali tag sono stati attivati e quali no. Cliccando sul tag si visualizzano le proprietà del tag e i grilletto pertinenti. Quando si seleziona un evento nella colonna a sinistra, la scheda Tag mostra lo stato dei tag per quell'evento.
Variabili: La scheda Variabili mostra informazioni dettagliate sulle variabili dell'evento selezionato, tra cui il tipo di variabile, il tipo di dati inviati e il valore ottenuto. Basta selezionare un evento nella navigazione a sinistra per visualizzare lo stato delle variabili al momento dell'attivazione dell'evento.
Livello dati: La scheda Livello dati mostra l'esatto messaggio inviato al livello dati per l'evento selezionato e come si presenta il livello dati dopo il completamento dell'operazione. Seleziona un evento nella navigazione a sinistra per visualizzare lo stato del livello dati al momento dell'attivazione dell'evento.
FAQ
Posso implementare il Pixel per diversi mercati in un unico dominio?
Non è possibile utilizzare il modello GTM per implementare più istanze del Pixel in un unico dominio.
Come creare una nuova variabile?
Per questo esempio, creeremo una variabile per l'ID della transazione. Anzitutto, accedi alla pagina "Variabile" del tuo Tag Manager e fai clic su "Crea nuovo". La si può chiamare "Transaction ID" (ID transazione) e scegliere il tipo "Data Layer Variable" (Variabile livello dati). Nel nome della variabile del livello dati, si deve scrivere il percorso di questi dati, ad esempio: "ecommerce.transaction_id"
Come verificare il nome della variabile del livello dati?
Apri la modalità di anteprima e la modalità debug in Tag Manager e seleziona la scheda "Data Layer". Sarà possibile vedere le informazioni che sono state inviate al livello di dati.
Per ulteriori informazioni è possibile consultare l'articolo del supporto di Google, disponibile qui.
Come creare una variabile GTM a partire da una matrice dataLayer? / Come inviare più ID in una singola variabile?
Gli ID dei prodotti possono essere distribuiti in due variabili. La prima si chiamerà "transactionProducts" di tipo "Data Layer Variable". Per il nome della variabile del livello dati, seleziona tutti i prodotti, ad esempio: ecommerce.items La seconda sarà chiamato "transactionProductsIds" di tipo "Custom JavaScript". Si aprirà un nuovo campo di testo in cui potresti inserire il seguente codice:
function () { return .map(function(a) {return a.id;}); }
Nel tag "GLAMI Pixel - Transaction" è possibile collegare la seconda variabile "transactionProductsIds".