[Aggiornato 21 Maggio 2019 ]

In questa guida ti spiegherò come implementare il codice di monitoraggio chiamata di Google Ads (ex AdWords) con Google Tag Manager.

Piccola premessa: come funziona “‘sto monitoraggio di chiamata“?

In pratica Google fa da proxy (o da ponte, se il termine non ti è familiare) usando dei suoi numeri di telefono. Cosa diavolo significa? Che quando l’utente preme quel numero di telefono sul sito, ad esempio col cellulare, apparentemente stai chiamando il tuo numero ma in realtà uno script fa partire la chiamata verso un numero di Google.

Bello.

A cosa serve ‘sto #barbatrucco? Per permettere su Adwords di monitorare parole chiave e gruppi di annunci, qualcosa che fino a prima era ipotetico o si poteva fare solo con dei barbatrucchi.

Requisiti per partire

Per poter usare questa funzione devi avere tutti questi requisiti (li trovi comunque nella guida ufficiale):

• Un account Google Ads
• Un’estensione di chiamata attiva
• Un sito web (chiaramente)
• Il tuo paese deve essere dentro questa lista

Step 1 – Recupera il Tag della conversione

Vai su Google Ads (ex AdWords) e accedi alle conversioni:

• Strumenti > Conversioni > Nuova Conversione (nella nuova interfaccia Google Ads trovi la voce Conversioni nel menu con i tre puntini in alto a destra).
• Seleziona “Telefonate”.

Nuova interfaccia:

Vecchia interfaccia:

• Seleziona quindi la seconda voce: “Chiamate verso un numero di telefono sul sito web“.

Nuova interfaccia:

Vecchia interfaccia:

Bene ora non ti resta che compilare tutti i campi relativi alla conversione:

• Nome della conversione
• Categoria
• Valore
• Conteggio (default uno)
• Lunghezza della chiamata (default 60 secondi)
• Finestra della conversione (default 30 giorni)
• Includi come conversione (default sì)
• Modello di attribuzione (default last click)

Clicca crea e continua per ottenere il codice di conversione:

Da marzo 2019 è possibile scegliere Google Tag Manager come valore. Ovviamente ora è l’opzione che ti consiglio di usare 🙂

A questo punto avrai l’ID di conversione e la label (etichetta) da inserire in un Tag di Google Ads Conversion e il gioco è fatto!

Step 2 – Installa il Tag di Conversione di Google Ads e crea Linker Conversioni

Ora non ti resta che prendere i valori di ID ed etichetta (label) e installarli nel Tag di Conversione di Google Ads e il gioco è fatto. Altrimenti ci sono anche opzioni per implementare il tracking direttamente a codice.

Con Google Tag Manager potrai scegliere tra due tipi di tag, il primo è più recente e specifico per le chiamate. Lo troviamo nella lista dei tag chiamato: “Google Ads Calls from Website Conversion“.

Altrimenti si può usare il classico Conversion Tracking generico. Il mio consiglio è usare il Tag “Google Ads Calls from Website”. Vediamoli comunque entrambi.

Google Ads Calls from Website

Ti basterà inserire nel primo campo il numero di telefono esattamente come compare nel sito; e completare gli altri due quadranti con i dati che ti ha appena fornito Ads

Google Ads Conversion Tracking

Simile alla prima opzione, qua ti basterà solo inserire il tuo ID di conversione, e la sua Label (etichetta).

Opzionalmente puoi collegare la variabile Conversion Value, a patto che te la abbia già creata.
Non ti spaventare nel caso te non la abbia, se il tuo scopo è solo di tracciare le chiamate, non è necessaria.

Creazione Linker Conversioni

Se hai deciso di tracciare con uno dei tag di Google Tag Manager, dopo aver creato il tuo tag assicurati di aver creato anche un tag “Linker di Conversioni”. Se ne avete già uno, ti basta accertarti che si attivi in tutte le pagine, o anche solo nelle pagine a cui sei interessato.

Se non ne hai uno, ti basta crearlo, andrà bene anche solo una configurazione base, quindi ti basta crearlo, e selezionare un attivatore Page View, come nell’immagine.

Una volta che avrai fatto il tag Ads e ed il Tag Linker di Conversioni, potrai passare al debug e verificarne da subito il funzionamento, come potrai vedere nello Step 5.

Inserimento a codice (versione per i nostalgici) puoi passare allo step 5

Sei un nostalgico? Ecco come si faceva prima dell’avvento del Tag dedicato e.

Scegli il Tag di tipo “Install the tag yourself”:

Boom! Una volta selezionato avrai 3 scelte. Vediamole una per una.

1) Il tag globale del sito non è installato su tutte le tue pagine HTML

Questa soluzione vale nel caso in cui nel tuo sito web non è mai stato installato lo snippet di gtag. Se usi solo Google Tag Manager per gestire Google Analytics allora di sicuro il tuo sito web non usa gtag. Lo snippet che ti verrà proposto sarà uno script simile a questo:

<!-- Global site tag (gtag.js) - Google Ads: 757767901-->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-757767901"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'AW-757767901');
</script>

In questo caso lo script userà direttamente come id il codice di conversione che Google Ads ha creato: AW-757767901.

Ovviamente nel tuo caso il codice sarà diverso.

2) Il tag globale del sito è già installato su tutte le pagine, ma è di un altro prodotto Google (ad esempio Google Analytics) o di un altro account Google Ads

Questo è il caso in cui il tuo sito ha già caricato lo snippet del Globa Site Tag e non hai necessità di installarlo. L’esempio più frequente è l’utilizzo di Google Analytics. Dovrai quindi semplicemente installare l’ultima parte dello script:

 

gtag('config', 'AW-757767901');

 

3) Il tag globale del sito è già stato installato su tutte le pagine quando hai creato un’altra azione di conversione in questo account Google Ads (xxx-xxx-xxxx)

Questo caso fa per te se hai già installato anche lo script di conversione (del caso 2 per intenderci) e quindi hai necessità di vedere i prossimi step.

Quale dovrei scegliere?

Oh, immagino che tu sia un po’ in panico vero? Niente paura!

Dunque se segui le mie guide e il mondo di Google Tag Manager, allora dovresti usare il primo codice 🙂

Fiuuuu… finalmente ci siamo!

Ehm, in realtà no. Ti manca ancora un piccolo passaggio, ovvero se inserire il numero ti telefono che compare nel tuo sito oppure no.

Nel primo caso ti basterà:

• Inserire il tuo numero di telefono
• Cliccare sul pulsante “crea snippet“

Nel secondo caso invece non dovrai inserire nessun numero perché lo farai direttamente via codice (fai ciao ciao con la manina allo sviluppatore che sarà lieto di farlo).

Nel mio caso scelgo il primo e ci schiaffo dentro il numero di telefono della mia bellissima web agency In Risalto 😉

Step 3 – (Installazione a codice) Crea un Tag HTML personalizzato

Questo step non serve se hai usato il tag “Google Ads Calls from Website Conversion“. Quindi se è questo il tuo caso passa pure allo step 5. Altrimenti prosegui.

Ora che abbiamo deciso quale snippet prendere ci basterà inserirlo dentro a Google Tag Manager attraverso un Tag di tipo HTML Personalizzato:

• Seleziona Tag > Nuovo > Configurazione tag.
• Tipo di tag: Tag HTML personalizzato.
• Inserisci lo snippet di codice.
• Attivazione: All pages, oppure attiva sulle pagine dove ti interessa gestire il monitoraggio delle conversioni.
• Chiama il Tag ad esempio “GTAG – Call phone” e salva.

Lo script sarà simile a questo:

<!-– Global site tag (gtag.js) – Google Ads: 757767901 –->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-757767901"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'AW-757767901/c0LVCMSyw5YBEN29qukC', {
'phone_conversion_number': '0444371210'
});
</script>

Step 4 – Fai un replace del numero di telefono (opzionale)

Questo step fa al caso tuo solo se:

• hai lasciato il replace da “programmatore” nella scelta di prima e quindi non hai inserito nessun numero di telefono
• hai dei numeri nella pagina HTML e sono esposti come riportato di seguito

 
 <span class="number">0444 371210</span>

 

oppure

 
 <a id="number_link" href="tel:0444371210">0444 371210</a>

bene ora non ti resta che creare modificare il Tag HTML personalizzato con questo riportato:

<!-- Global site tag (gtag.js) - Google Ads: 757767901 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-757767901"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

 var callback = function(formatted_number, mobile_number) {
      // formatted_number: numero da visualizzare nello stesso formato di 'phone_conversion_number' (in questo caso, '0444371210')
      // mobile_number: numero formattato da utilizzare in un link cliccabile
      //        con tel:-URI (in questo caso, '+390444371210')
      var e = document.getElementById("number_link");
      e.innerHTML = "";
      e.appendChild(document.createTextNode(formatted_number));
    };
gtag('config', 'AW-757767901/c0LVCMSyw5YBEN29qukC', {
'phone_conversion_number': '0444371210'
});
</script>

Se invece vuoi anche inserire il link di tipo tel: pensato per i device mobile allora ti basterà applicare questo codice:

<!-- Global site tag (gtag.js) - Google Ads: 757767901 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-757767901"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

 var callback = function(formatted_number, mobile_number) {
      // formatted_number: numero da visualizzare nello stesso formato di 'phone_conversion_number' (in questo caso, '0444371210')
      // mobile_number: numero formattato da utilizzare in un link cliccabile
      //        con tel:-URI (in questo caso, '+390444371210')
      var e = document.getElementById("number_link");
      e.innerHTML = "";
      e.href = "tel:" + mobile_number;
      e.appendChild(document.createTextNode(formatted_number));
    };
gtag('config', 'AW-757767901/c0LVCMSyw5YBEN29qukC', {
'phone_conversion_number': '0444371210'
});
</script>

Ok, ci siamo quasi ormai 🙂

Step 5: Verifica il Tag con il Debug e Preview

Bene ora non ti resta che verificare il tutto 🙂

Utilizziamo l’Anteprima di Debug di GTM per analizzare il Tag che si attiva e gestiamo anche Tag Assistant,

A questo punto dovresti vedere il Tag che si attiva e su Tag Assitant la voce Website Calls Metrics in verde.

 

Wow, figo ma chi mi assicura che Google gestirà il numero di Proxy?

Dunque dalla guida ufficiale di Google Ads ti consigliano di smanettare sui tuoi annunci a pagamento e quindi spendere dei soldi sui tuoi stessi annunci e provare a chiamarti.

Ah-ha.

Sei d’accordo con me che è leggermente assurdo, vero?

Step Bonus – Il barbatrucco per testare i tuoi annunci a chiamata su Google Ads

Esiste un vecchio #barbatrucco che permette di simulare la chiamata da Google Ads semplicemente aggiungendo un parametro in QueryString all’URL.

Vuoi sapere cosa aggiungere?

Ok, ok te lo svelo.

Ti basterà inserire il parametro #google-wcc-debug nel tuo URL.

Sì, esatto. Dovrai semplicemente trasformare il tuo URL da così:

www.tagmanageritalia.it/test-call-phone-ads/

a così

www.tagmanageritalia.it/test-call-phone-ads/#google-wcc-debug

Semplice no?

Ti apparirà una schermata simile a questa:

Bingo!

Ora puoi provare le tue conversioni di tipo chiamata telefonica direttamente nel tuo sito grazie a Google Tag Manager.

Ti è stata utile questa guida? Fammelo sapere nei commenti 😉

A presto e buon Tag!

Link Utili

• Guida ufficiale monitoraggio delle chiamate a un numero di telefono Google Ads