Tracciare un campo di ricerca dinamico con Google Tag Manager

by Luca Rabboni

facebooktwittergoogle_pluspinterestlinkedintumblr

Di recente ci è capitato di dover tracciare per un nostro cliente un campo inserito nella pagina store locator del loro sito per la ricerca dei punti vendita in Italia.

Il campo era una semplice input a compilazione, quindi privo di form e relativa submit.  Non c’era un breakdown, quindi gli utenti potevano scrivere liberamente il nome di una città (per intenderci avrebbero potuto inserire qualsiasi valore). Una volta  premuto invio oppure dopo aver cliccato un pulsante ricerca, la pagina richiamava un javascript per il rendering dei risultati.

La sfida era riuscire a tracciare con Google Tag Manager questo valore e passarlo a Google come label di un evento al momento del click sul bottone ricerca o all’invio con il comando da tastiera.

A rendere il tutto ancora più challenging il fatto che il campo di ricerca era un contenuto dinamico strutturato in Ajax.

Di seguito vi spiegherò passo passo come abbiamo gestito questo task:

1. Abbiamo creato un custom HTML utilizzando JQuery; controllate di averlo implementato sul vostro sito altrimenti incollate prima dello script questa riga di codice

Il custom HTML, che potete copiare e incollare liberamente dal box qui sotto, sostanzialmente viene attivato in due casi: il primo è quando l’utente preme il tasto invio (che corrisponde al valore 13 in tutte le tastiere), il secondo è quando l’utente clicca sul bottone cerca che nel nostro caso è identificato dal relativo element id.

Quando si verifica una di queste due condizioni lo script passa tre parametri a Google Analytics tramite dataLayer come evento in cui la Label è popolata da una variabile che include i valori scritti dall’utente.

NB: Nel momento in cui gli utenti premevano il tasto invio il valore veniva passato due volte per questo abbiamo usato il metodo “event.stopPropagation();” in modo che lo script venga interrotto una volta che viene soddisfatta la funzione e che la seconda non venga nemmeno processata.

 

2. Abbiamo creato una serie di variabili, nominate come quelle presenti nello script, in modo da passare in un secondo momenti i valori nel custom event relativo al tag che andremo a creare nel passaggio successivo.

In pratica abbiamo creato tre Data Layer Variable chiamati “eventCategory”, “eventAction” e “eventLabel”, sotto trovate un esempio.

Data Layer Variable

 

 

3. Abbiamo creato il trigger per il custom event tag che vedremo al punto 4. Nello script che abbiamo visto al punto 1 il primo parametro inserito nel dataLayer è event: ResellerEvent.

Questo vuol dire che il nostro tag dovrà partire proprio quando l’evento è uguale a “ResellerEvent” come da immagine sotto.

Trigger ResellerEvent

 

 

4. Finalmente arriviamo all’ultimo e preannunciato step! Il tag che ci permetterà di passare gli eventi dello script in Google Analytics. Qui la procedura non prevede grosse novità dovete creare un evento il cui trigger è quello che abbiamo visto prima e che passi come valori le variabili che abbiamo creato al punto 2. Come sempre un’immagine è meglio di mille parole :)

Tag ResellerEvent

 

 

Una volta seguiti tutti questi passaggi non resta che pubblicare il tutto e debuggare per verificare che tutto funzioni correttamente (per questa operazione vi consiglio di utilizzare Dataslayer)

Spero che questo articolo possa aiutarvi! :) Al prossimo post!