Personalizzare il Click to Chat di WhatsApp con Google Tag Manager

Che cos’è il Click to Chat di WhatsApp

Il Click to Chat (in italiano Clic per chattare) è una funzione che WhatsApp mette a disposizione degli utenti per creare dei link che permettono di avviare una conversazione diretta con un determinato numero di telefono. Tramite questo link, un utente che effettua un clic, viene dirottato all’interno della chat di WhatsApp dove viene aperta una conversazione con il profilo del numero linkato.

Questa tipologia di link è spesso utilizzata all’interno dei siti web, nella versione mobile, per creare un sistema rapido di comunicazione tra utente ed azienda e risulta un sistema molto efficace considerando che WhatsApp ad oggi è la piattaforma di messaggistica più utilizzata in Italia (e che sta diventando sempre di più uno strumento di utilizzo commerciale).

Per creare un collegamento diretto con la chat di WhatsApp è sufficiente aggiungere il numero di telefono di destinazione, nel suo formato internazionale (senza 0 e senza +) all’interno del seguente link:

 https://wa.me/<numeroditelefono>

.
Quindi ipotizzando che il numero che vuoi inserire è 3281234567 il link che dovrai utilizzare è il seguente: https://wa.me/393281234567. Oltre a questo metodo di inserimento ne esiste uno un po’ più vecchiotto, ma ancora supportato da WhatsApp, che prevede l’utilizzo di un parametro phone nell’url: https://web.whatsapp.com/send?phone=393281234567.

La funzione Clic per chattare permette anche di impostare un messaggio precompilato che viene inserito all’interno del messaggio di testo nella chat WhatsApp e che è molto comodo per personalizzare la conversazione. Per creare il messaggio è sufficiente utilizzare il parametro text all’interno dell’url popolandolo con la stringa che si vuole utilizzare: https://wa.me/393281234567?text=Vorrei%20avere%20maggiori%20informazioni (il testo da inserire nell’url va codificato attraverso gli appositi caratteri ASCII, lo spazio, ad esempio, va sostituito con %20).

Personalizzare il messaggio preimpostato di WhatsApp con GTM

Il messaggio preimpostato di WhatsApp è un ottimo modo per canalizzare dall’inizio una conversazione, ad esempio se il bottone di WhatsApp si trova su un sito Ecommerce all’interno del messaggio potremmo scrivere “Vorrei maggiori informazioni sui prodotti” o, se si trova in una pagina di pagamento, possiamo scrivere “Vorrei avere supporto per il pagamento” e così via.

Un altro modo in cui questo messaggio può essere utilizzato è quello di comprendere meglio da dove arrivano gli utenti che ci contattano. Personalizzando il messaggio del Click to Chat a seconda della pagina dove si trova l’utente possiamo capire meglio a cosa si riferiscono le informazioni che ci sta chiedendo.

Combinando i 2 elementi sopra possiamo anche inserire nel messaggio preimpostato la pagina da dove l’utente ci contatta ed il tipo di informazione di cui ha bisogno. Tutto ciò è fattibile grazie ad una piccola implementazione da fare tramite Google Tag Manager.

Quello che faremo è:

• Andare ad identificare tutti i link interni al sito che puntano alla chat di WhatsApp;
• Andare ad identificare le pagina dove si trovano i link (o altre informazioni presenti all’interno della pagina);
• Tramite uno script Javascript aggiungere ai nostri Click to Chat un messaggio personalizzato dinamico in funzione della pagina dove si trova l’utente.

Per fare questa operazione abbiamo bisogno di:

• Un Tag HTML dove inseriamo il codice JS;
• Un attivatore DOM Ready che si attiva su tutte le pagine del sito.

Come prima cosa creiamo l’attivatore DOM Ready – Tutte le pagine andando in Attivatore -> Nuovo -> Tipo attivatore : Visualizzazione di Pagina – Pronto per DOM -> si attiva su Tutti gli eventi Pronto per DOM

Dopodiché andiamo a creare il Tag Html (Tag Modifica Link WhatsApp) personalizzato contenente il codice Javascript che si occupa della sostituzione del link.

Andiamo in Tag -> Nuovo -> Tipo tag: HTML Personalizzato (in cui incollare il codice sotto) -> Attivatore: DOM Ready – Tutte le pagine.

Il codice da inserire all’interno del Tag HTML è il seguente (in rosso sono evidenziate le informazioni da sostituire, numero di telefono e messaggio personalizzato):

<script>
(function () {
var links = document.querySelectorAll('a[href="https://wa.me/391234567"]')
var urlPagina= {{Page URL}}
var textWa = "?text=Salve,%20vorrei%20maggiori%20informazioni.%20Contatto%20da:%20"
links.forEach(function(link){
var original = link.getAttribute("href");
link.setAttribute("href",original+textWa+urlPagina)
})
})();
</script>

Per verificare che tutto funziona correttamente è sufficiente andare nel nostro sito utilizzando la console di Chrome, ispezionare l’elemento contenente il link a WhatsApp e verificare che al numero di telefono sia stato aggiunto il testo precompilato con l’url della pagina inserito in modo dinamico.

Tracciare le interazioni WhatsApp con Google Analytics

Oltre a personalizzare il messaggio WhatsApp quando un utente ci contatta ci può fare comodo capire quanto e come gli utenti interagiscono con noi tramite chat.

In questo caso, sempre con Google Tag Manager, possiamo tracciare quante volte un utente clicca sul pulsante per chattare creando un evento Google Analytics con le informazioni sul clic.

Come prima cosa dobbiamo creare l’attivatore che identifica il clic sul link contenente l’url di WhatsApp.

Andiamo in Attivatore -> Nuovo -> Tipo attivatore : Clic – Solo Link -> si attiva su Alcuni clic: Clic URL inizia con https://wa.me/

A seconda delle esigenze possiamo decidere di inserire un Clic url uguale a (nel caso in cui abbiamo un solo link WhatsApp all’interno del sito) o Clic url corrisponde all’espressione regolare (nel caso in cui abbiamo diverse tipologie di link WhatsApp).

Dopo aver creato l’attivatore andiamo a creare il Tag Evento Google Analytics: Tag -> Nuovo -> Tipo tag: Google Analytics -> Tipo monitoraggio: evento (Categoria: WhatsApp – Azione: Clic – Etichette: {{Page Path}} -> Attivatore: Clic WhatsApp.

A questo per verificare che il sistema funzionia utilizziamo la funzione anteprima di GTM e facciamo un test cliccando sul link WhatsApp.

Stefano Salustri

Sono un Consulente in Digital Marketing con oltre 10 anni di esperienza. Mi occupo di progettare e sviluppare strategie digitali per Piccole e Medie Imprese per aiutare le aziende ad ottenere il massimo ritorno dagli investimenti nei canali online.