Data Layer su Shopify
Il Data Layer è una struttura JavaScript che permette di raccogliere e inviare dati a Google Tag Manager in modo organizzato e standardizzato. Tracciare la compilazione di un form è una pratica comune che può fornire preziose informazioni sulle interazioni degli utenti. In questa guida, ti mostrerò come creare un Data Layer su Shopify per tracciare quando un form viene compilato.
Passo 1: Aggiungere il Codice del Data Layer a Shopify
Per prima cosa, è necessario aggiungere il codice del Data Layer al tuo tema Shopify. Segui questi passaggi:
- Accedi al pannello di amministrazione di Shopify.
- Vai su “Online Store” > “Themes”.
- Clicca su “Actions” e seleziona “Edit code”.
- Nella sezione “Layout”, trova e apri il file
theme.liquid. - Incolla il seguente codice subito dopo il tag di apertura
<head>:
<script> window.dataLayer = window.dataLayer || []; </script>
Questo inizializza il Data Layer sul tuo sito.
Passo 2: Aggiungere il Codice per Tracciare la Compilazione del Form
Ora, dobbiamo aggiungere il codice JavaScript che spingerà i dati al Data Layer quando un form viene compilato. Supponiamo di voler tracciare un modulo di contatto. Aggiungi il seguente codice:
- Nella sezione “Templates”, trova e apri il file del template del form che desideri tracciare (es.
contact.liquid). - Incolla il seguente codice JavaScript alla fine del file, prima del tag di chiusura
</body>:
<script>
document.addEventListener('DOMContentLoaded', function() {
var form = document.querySelector('form[action="/contact"]');
if (form) {
form.addEventListener('submit', function(event) {
window.dataLayer.push({
'event': 'formSubmission',
'formId': 'contactForm',
'formName': 'Contact Form'
});
});
}
});
</script>
Questo codice intercetta l’evento di invio del form e spinge i dati rilevanti al Data Layer.
Passo 3: Configurare il Tag di Google Tag Manager
Ora che il Data Layer è configurato, dobbiamo impostare Google Tag Manager per ascoltare l’evento di invio del form e attivare un tag.
- Accedi a Google Tag Manager e seleziona il tuo contenitore.
- Clicca su “Tags” nel menu a sinistra.
- Clicca su “New” per creare un nuovo tag.
- Dai un nome al tag (es. “Form Submission Tracking”).
- Clicca su “Tag Configuration” e seleziona il tipo di tag desiderato (es. Google Analytics: Universal Analytics).
- Configura il tag inserendo il tuo ID di monitoraggio e impostando il tipo di traccia su “Event”.
- Compila i campi Evento con le seguenti informazioni:
- Categoria: Form
- Azione: Submission
- Etichetta: {{Form Name}} (puoi usare una variabile del Data Layer per personalizzare questo campo)
- Clicca su “Triggering” e seleziona “New Trigger”.
- Dai un nome al trigger (es. “Form Submission Trigger”).
- Seleziona “Custom Event” come tipo di trigger.
- Imposta il nome dell’evento su
formSubmission. - Salva il trigger e poi salva il tag.
Passo 4: Verificare e Pubblicare i Cambiamenti
Prima di pubblicare le modifiche, è importante verificare che tutto funzioni correttamente:
- In Google Tag Manager, clicca su “Preview” in alto a destra.
- Vai al tuo sito Shopify e prova a compilare il form.
- Il debug mode di GTM ti mostrerà se il tag viene attivato correttamente quando il form viene inviato.
Se tutto funziona come previsto, puoi pubblicare le modifiche:
- Torna su Google Tag Manager.
- Clicca su “Submit” in alto a destra.
- Aggiungi una descrizione e clicca su “Publish”.
Conclusioni
Creare un Data Layer per tracciare la compilazione di un form su Shopify è un processo relativamente semplice che può fornire informazioni utili sulle interazioni degli utenti. Seguendo questi passaggi, puoi configurare il Data Layer e Google Tag Manager per tracciare efficacemente quando un form viene compilato.
Se hai domande o desideri una consulenza dedicata, contattaci!