Creazione di eventi di click personalizzati in GA4
Queste istruzioni si applicano solo se i dati non vengono inviati a Google Analytics 4 tramite un GTM server-side o un GTM integrato tramite il Custom Pixel di Shopify. Tuttavia, se i dati vengono inviati tramite un GTM server-side o un GTM integrato tramite il Custom Pixel di Shopify, gli eventi devono prima essere inviati (push) al DataLayer e poi trasmessi a GA4 tramite il GTM.
In breve
Varify.io® non raccoglie alcun dato autonomamente. Tuttavia, puoi tracciare eventi di click su elementi specifici all'interno dei tuoi esperimenti Varify. In questa sezione, spieghiamo passo dopo passo come farlo con Google Analytics 4.
La configurazione avviene in due fasi: prima invii il tuo evento a GA4 (Passo 1), poi lo configuri in GA4 (Passo 2)—gli eventi di revenue come key events, e i valori numerici anche come custom metrics. Per scoprire come analizzare l'evento completato, consulta l'articolo «Analyzing Custom Events».
Passo 1: Invia un evento personalizzato a GA4
Approccio consigliato: invia gli eventi tramite il tracking setup esistente
Consigliamo generalmente di inviare eventi personalizzati a GA4 utilizzando lo stesso metodo già in uso per il tracciamento dei tuoi eventi, cioè tramite la tua configurazione di tracciamento esistente:
- Google Tag Manager è in uso?, gli eventi personalizzati devono essere creati tramite GTM e passati a GA4 (di solito tramite il DataLayer e un tag evento GA4 corrispondente).
- GA4 è integrato direttamente nel sito web? (senza GTM), gli eventi personalizzati vengono inviati nello stesso modo diretto.
Questo garantisce che il tuo tracciamento rimanga coerente e possa essere gestito in un unico punto centrale. La soluzione di tracciamento dei click descritta di seguito, che utilizza la funzione „Add JS”, è pensata come integrazione nel caso in cui tu voglia misurare i click su singoli elementi all'interno di un esperimento Varify.
Tracciamento dei click su un elemento specifico
L'elemento esiste solo nella tua variante
Per misurare i clic sugli elementi appena creati nella tua variante, devi prima definire un selettore univoco per ciascun elemento. Gli ID sono particolarmente adatti a questo scopo.
Un selettore univoco è ad esempio: #my-btn
Per adattare il codice JavaScript per il tracciamento dei clic sul tuo nuovo elemento, devi prima sostituire il placeholder #my-btn nella riga 3 del codice con il selettore effettivo del tuo elemento. Puoi utilizzare la funzione "Add JS" per farlo. Segui queste istruzioni:
- Apri l'editor JavaScript in Varify: Apri la finestra nell'editor per inserire JavaScript. Troverai il simbolo del codice in alto a destra.
- Inserisci il codice: Incolla il codice JavaScript fornito nell'editor.
- Sostituisci il selettore: Trova il placeholder nella riga 3
#my-btn. Sostituisci#my-btncon il selettore effettivo del tuo nuovo elemento. Potrebbe essere un ID (ad esempio1TP6New-button-id) o una classe (ad esempio.new-button-class). - Salva le modifiche: Salva le modifiche dopo aver sostituito il selettore.
window.varify.helpers.onDomLoaded(() => {
// Replace the CSS selector
var cssSelector = "#my-btn";
// Select only the first element with the .btn-primary class
var element = document.querySelector(cssSelector);
if (element) {
element.addEventListener("click", VarifyTrack);
}
});
function VarifyTrack() {
if (typeof gtag === "function") {
gtag('event', 'VarifyClick', {
'VarifyClickCount': '1',
});
console.log("Event sent.");
} else {
console.log("gtag is not defined. Please check the GA integration.");
}
}
L'elemento esiste già (nell'originale e nella variante)
Per misurare i clic sugli elementi che esistono già sul tuo sito web, è importante definire un selettore univoco per ogni elemento. Un modo efficace per determinare tale selettore è utilizzare l'editor visuale di Varify.io.
Di seguito un esempio di selettore univoco .btn-primary.
Per tracciare gli eventi di clic di elementi già esistenti che compaiono sia nell'originale che nella variante del tuo esperimento, puoi impostare un esperimento di tracking speciale. Ecco una guida personalizzata:
- Crea un nuovo esperimento: Crea un esperimento destinato esclusivamente al tracciamento degli elementi.
- Aggiungi codice JavaScript: Usa la funzione "Add JS" per aggiungere il codice JavaScript necessario alla tua variante. Nella riga 3 del codice, sostituisci il segnaposto
.btn-primarycon il selettore CSS corretto del tuo elemento. - Imposta il targeting della pagina: Imposta il targeting della pagina per l'esperimento in modo che sia impostato sulla homepage con un tipo di corrispondenza "Contains". Questo garantisce che tutte le pagine del tuo sito web siano incluse, in modo che l'esperimento sia attivo sull'intero sito.
- Regola la distribuzione del traffico: La distribuzione del traffico deve essere impostata al 100% per la variante, per garantire che tutti gli utenti ricevano lo script di tracciamento.
- Traccia gli eventi di click: I click sull'elemento specificato vengono inviati come evento a Google Analytics 4 (GA4) per essere analizzati lì.
window.varify.helpers.onDomLoaded(() => {
// Define the CSS selector of the element you want to track
var cssSelector = ".btn-primary";
var elements = document.querySelectorAll(cssSelector);
elements.forEach(function(element) {
element.addEventListener("click", VarifyTrack);
});
});
function VarifyTrack() {
if (typeof gtag === "function") {
gtag('event', 'VarifyClick', {
'VarifyClickCount': '1',
});
console.log("Event sent.");
} else {
console.log("gtag is not defined. Please check the GA integration.");
}
}
Invia parametri evento in GTM
Affinché tu possa analizzare l'evento in seguito come metrica personalizzata, deve inviare un parametro evento a GA4. Negli snippet degli eventi di click sopra riportati, questo parametro è già incluso (VarifyClickCount).
Se stai tracciando un evento personalizzato tramite GTM e non sta ancora inviando alcun parametro, aggiungilo direttamente all'evento:
- Apri la scheda «Event Parameters».
- Clicca sul pulsante blu «Add Parameter».
- Inserisci nel campo «Event Parameters» il nome del parametro.
- Inserisci sotto Value il numero
1uno (oppure, nel caso di eventi di revenue, il valore dinamico del revenue). - Pubblica le modifiche al container GTM.
Passo 2: Configura un evento personalizzato in GA4
Una volta che i tuoi eventi vengono inviati correttamente a GA4, appariranno lì automaticamente, senza che tu debba crearli manualmente. (Potrebbero volerci fino a 24 ore prima che appaiano nei report.)
Con questo si conclude la parte di invio: ora continuiamo in GA4. In base al tuo caso d'uso, configura lì il tuo evento come segue:
- Cifre di fatturato: selezionale come Key Event in modo che appaiano sotto "Key Events" nel Varify Result Report.
- Metriche standard (numeriche): creale inoltre come Custom Metric in modo da poterle analizzare nei report esplorativi.
Contrassegna gli eventi personalizzati di revenue come Key Events
Affinché un evento personalizzato di revenue compaia sotto "Key Events" nel Varify Result Report e sia selezionabile lì come goal, deve essere contrassegnato come key event in GA4. Per altri eventi personalizzati (ad es. puri eventi di click), questo passaggio non è necessario: sono comunque disponibili come goal.
- In GA4, vai su Administration → Events (o Key Events).
- Trova il tuo Revenue Custom Event e attiva il toggle "Mark as Key Event".
- Se l'evento non è stato ancora registrato, clicca su "New Key Event" e inserisci il nome dell'evento esattamente come viene ricevuto da GA4.
Crea valori numerici come Custom Metrics
Se vuoi analizzare il valore numerico di un evento (ad es. un conteggio o una quantità) in report esplorativi, crea una custom metric in GA4. Questo richiede che l'evento includa il parametro corrispondente (vedi Step 1).
- In GA4, vai su Admin → Custom Definitions → Custom Metrics → Create Custom Metric.
- Inserisci un nome descrittivo e, facoltativamente, una breve descrizione.
- Seleziona il parametro evento dal menu a discesa oppure aggiungilo manualmente. Assicurati di usare l'ortografia corretta.
- Lascia il campo „Unit of Measurement“ solitamente impostato su „Standard” (per il fatturato: l'unità di valuta appropriata) e salva la metrica personalizzata.
Ci vogliono 24–48 ore prima che i dati siano disponibili nei report esplorativi. Nota inoltre: i dati degli eventi non vengono assegnati retroattivamente a una metrica personalizzata. Una metrica personalizzata inizia a raccogliere dati solo dopo essere stata creata.
