[Aggiornato 5 Novembre 2018 ]

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 AdWords e accedi alle conversioni:

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

conversione telefono adwords

Nuova interfaccia:
monitoraggio chiamate google adwords

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

conversione telefono website adwords

Nella nuova interfaccia è più o meno uguale:

monitoraggio chiamate google adwords

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 )
  • Modello di attribuzione (default last click)

Clicca crea e continua per ottenere il codice di conversione:

tag script di conversione telefonica a chiamata google ads con Google Tag Manager

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

global site tag di conversione telefonica a chiamata google ads con Google Tag Manager

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: 942894135 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-942894135"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

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

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

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-942894135');

 

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 2 phone snippet gtag Google Ads con Google Tag Manager

Step 2 – crea un Tag HTML personalizzato

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: 942894135 –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=AW-942894135“></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());

gtag(‘config’, ‘AW-942894135/bKpzCPSUsIwBELfYzcED‘, {
‘phone_conversion_number’: ‘0444371210
});
</script>

global tag snippet chiamata telefonica su tag html personalizzato google tag manager

Step 3 – 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: 942894135 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-942894135"></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-942894135/bKpzCPSUsIwBELfYzcED', {
'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: 942894135 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-942894135"></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-942894135/bKpzCPSUsIwBELfYzcED', {
'phone_conversion_number': '0444371210'
});
</script>

Ok, ci siamo quasi ormai 🙂

Step 4: 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.

Debug anteprima Monitoraggio chiamata Telefonica su Google Ads (ex AdWords) con Google Tag Manager

 

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:

come testare google ads phone call - google-wcc-debug

Bingo!

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

[Vecchia guida precedente a Marzo 2018]

Segui lo step 1.

A questo punto una volta inserito nome, valore della conversione e le altre impostazioni, scegli la voce “Non inserire un numero”. Dovresti avere finalmente il tuo snippet di codice.
Nella vecchia interfaccia era così:

conversione telefono adwords - snippet

Nella nuova invece è così (sempre quasi identico):

Step 2 – crea un Tag HTML personalizzato

Ora che hai lo snippet di codice non ti resta che andare in Google Tag Manager:

  • 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 “cHTML – Call Snippet” e salva.

tag installare monitoraggio chiamate adwords google tag manager

 

Step 3 – Replace del numero di telefono

Nella tua pagina HTML potresti avere 2 casi in cui il tuo numero di telefono è esposto:

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

 

oppure

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

 

Ora, potresti gestire i due casi a mano seguendo la guida e implementando la funzione Onload nel <body> e lo script js nell’header.

E se non puoi?

Niente paura, ecco cosa fare. Creiamo un Tag HTML personalizzato con Google Tag Manager inserendo il seguente codice:

<script type="text/javascript" id="adwords_conversione_tel">

  ; (function() {

    var numeroOriginale = '0444 371210'; // Qui inseriamo il numero di telefono che vogliamo convertire

    function callback(numeroGoogle, numeroCell) {

      var cellulare = document.querySelector('a#number_link'); // Cerchiamo nell'HTML il numero di telefono

      if (cellulare){
        cellulare.href = "tel:" + numeroCell;
        cellulare.innerHTML = "";
        cellulare.appendChild(document.createTextNode(numeroGoogle));
      }
    };

    _googWcmGet(callback, numeroOriginale);

  })();

</script>

Cerchiamo di capire cosa diamine fa questo codice:

  • _googWcmGet è la funzione di Google (dentro lo script inserito precedentemente) che gestisce il cambio del nostro numero con quello di Google.
  • numeroOriginale è una variabile che contiene il nostro numero di telefono.
  • numeroCell è il numero di telefono formattato (e quindi cliccabile) attraverso il protocollo “tel”.
  • a#number_link è il selettore CSS grazie al quale riusciamo ad identificare in modo univoco con la funzione document.querySelector l’elemento HTML che contiene il nostro numero. Avremmo potuto usare anche un semplice document.getElementById(‘telNum’);
  • numeroGoogle indica il numero “proxy” di Google

 

Quindi quello che ti rimane da fare è creare il secondo Tag, ma prima configura l’Attivatore:

  • Attivatori > Nuovo > Configurazione attivatore.
  • Tipo di attivatore: Visualizzazione di Pagina- Pronto per DOM. Questo perché deve esserci lo script di conversione AdWords già caricato.
  • Attivalo su Tutte le pagine.
  • Chiamalo pure “DOM Caricato” e salva.
    attivatore dom installare monitoraggio chiamate adwords google tag managerAdesso invece crea il Tag: 
  • Vai su Tag > Nuovo > Configurazione tag.
  • Tipo di tag: Tag HTML personalizzato.
  • Inserisci questo secondo snippet di codice.
  • Attivazione: Seleziona l’Attivatore “DOM Caricato” appena creato.
  • Chiamalo ad esempio “cHTML – AdWords Proxy Tel” e salvalo.
    tag2 installare monitoraggio chiamate adwords google tag manager

STEP 4 – VERIFICA IL TAG

Non ti resta che testare e pubblicare 🙂 Attiva la Modalità Anteprima, vai sul tuo sito e verifica che il tag compaia fra i Tags Fired On This Page.

verifica installare monitoraggio chiamate adwords google tag manager

Ora puoi cliccare il pulsante blu “Invia” per procedere con la pubblicazione delle modifiche.

A presto e buon Tag!

Link Utili

 

Condividi anche tu Google Tag Manager!
  • Reply

    Giuseppe

    05 11 2018

    Ciao Matteo,
    ho letto la guida di Google in merito (https://support.google.com/google-ads/answer/6095883) e dice semplicemente di compiere questi 2 passaggi:

    1) Crea un tag HTML personalizzato e aggiungi il tag globale del sito e lo snippet evento gTag al suo interno.
    2) Imposta l’attivatore in modo che sia attivato, ad esempio, per “Tutte le pagine” (Visualizzazione di pagina).

    Vorrei capire se questi 2 passaggi sono sufficienti, oppure se devo seguire la tua guida.

    Grazie.

    • Matteo Zambon

      05 11 2018

      Verifico, se lo dice la guida ufficiale credo che si debba fare. Probabilmente si appoggia sulla libreria di gtag e GTM no. Verifico e ti faccio sapere 🙂

    • Matteo Zambon

      05 11 2018

      Ciao Giuseppe, ti confermo che deve essere installata la libreria di gtag prima se questa non è stata caricata prima perché tutto si appoggia su gtag. Sto verificando un’altra strada, ma ti confermo che seguendo la guida ufficiale tutto è ok. A breve aggiorno anche questo articolo 🙂

  • Reply

    Giuseppe Spasiano

    25 10 2018

    Ciao Matteo,
    ho letto la guida di Google in merito e dice semplicemente di compiere questi 2 passaggi:

    1) Crea un tag HTML personalizzato e aggiungi il tag globale del sito e lo snippet evento gTag al suo interno.
    2) Imposta l’attivatore in modo che sia attivato, ad esempio, per “Tutte le pagine” (Visualizzazione di pagina).

    Vorrei capire se questi 2 passaggi sono sufficienti, oppure se devo seguire la tua guida.

    Grazie.

    • Matteo Zambon

      25 10 2018

      Ciao Giuseppe puoi indicarmi la guida a cui fai riferimento? Lo script qui sotto è relativo a prima del gtag 🙂

    • Giuseppe

      29 10 2018

      Ciao Matteo,
      faccio riferimento alla documentazione attuale che troviamo al seguente link: https://support.google.com/google-ads/answer/6095883 e più precisamente al paragrafo “Monitorare le chiamate a un numero di telefono su un sito web con Google Tag Manager”.

      Ti ringrazio

    • Matteo Zambon

      05 11 2018

      Ciao Giuseppe ora controllo e ti aggiorno 🙂

  • Reply

    Leonardo

    19 03 2018

    Salve,

    il nuovo snippet di Google non contiene più :

    _googWcmGet

    di conseguenza i tag html nel GTM dovranno essere diversi e il codice js suggerito non funziona più.

    • Matteo Zambon

      20 03 2018

      Ciao Leonardo, grazie della dritta mi segno di rivedere la guida 🙂

  • Reply

    Vincenzo

    08 05 2017

    Ciao Matteo,
    ho installato con successo sul mio sito il codice tag di GTM a luglio 2016,
    unitamente al tag per il monitoraggio delle chiamate da sito:
    questi giorni per caso ho notato che nel tempo Google ha modificato
    (rispetto a quelli che ho installato nel luglio 2016) sia il codice tag di GTM
    (in particolare ora sono 2 snippet invece di 1), sia il codice del tag per il monitoraggio
    delle chiamate. Le domande sono:
    1) conviene che anch’io aggiorni il mio sito col nuovo codice tag di GTM ?
    2) conviene che anch’io aggiorni il mio tag personalizzato nel GTM col nuovo codice
    tag per il monitoraggio delle chiamate?

    Ti ringrazio, Vincenzo

    • Matteo Zambon

      09 05 2017

      Ciao Vincenzo ti rispondo ai punti:
      1) Si sarebbe opportuno che aggiornassi la configurazione degli snippet di GTM
      2) Si aggiorna anche lo snippet nuovo di Adwords. In realtà hanno aggiunto una variabile, il resto della guida funziona perfettamente.

      A presto!

    • Vincenzo

      10 05 2017

      Grazie mille Matteo,
      avrei ancora le seguenti 2 domande:
      1) nel tuo script si potrebbero sostituire le istruzioni
      cellulare.innerHTML = “”;
      cellulare.appendChild(document.createTextNode(numeroGoogle));
      con la sola istruzione
      cellulare.innerHTML = “numeroGoogle”;
      ?

      2) nel caso avessi 2 numeri diversi di telefono da sostituire nella mia pagina web,
      dovrei chiamare nello stesso tag HTML pers. la funzione _googWcmGet(callback, numeroOriginale);
      2 volte, ciascuna con numeroOriginale diverso e con funzione callback diversa ?
      in tal caso conviene creare un tag HTML personalizzato distinto per ogni numero di telefono
      diverso oppure definire 2 callback diverse nello stesso tag?

      grazie ancora Matteo

      Vincenzo

    • Matteo Zambon

      11 05 2017

      Ciao Vincenzo eccomi

      1) Oddio potrebbe essere, prova e vedi se funziona 😀 Se così fosse aggiorno la guida 😉
      2) Devi creare appunto 2 chiamate diverse per la gestione dei due numeri. La puoi fare con un singolo tag? Sì però devi smanettarci bene. Soluzione easy clona il tag 🙂

    • Vincenzo

      11 05 2017

      Grazie mille Matteo,
      io ho sempre usato senza problemi solo l’istruzione del tipo: cellulare.innerHTML = “numeroGoogle”;
      ma non so perchè anche la guida di AdWords riporta invece le due istruzioni basate sull’ appendChild.

      C’è un modo per attivare un Tag con attivatore di tipo Visualizzazione-DOM Ready ma solo sugli smartphone,
      che non si attivi su altri tipi di dispositivi?

      Ti risulta che, da quando hanno modificato lo snippet (ora gli snippet sono 2) di GTM, la sostituzione
      dei numeri di telefono con quelli di inoltro di Google non avviene più sistematicamente ma dipende
      dal browser e dal dispositivo? … in diversi casi la sostituzione non avviene.

      Ti ringrazio,
      Vincenzo

    • Matteo Zambon

      15 05 2017

      Ciao Vincenzo,
      non credo dipanda dalla nuova gestione degli snippet di GTM. Puoi fare sicuramente degli verifiche distinguenda il browser attraverso javascript (ti basta googlare check browser jquery o check device jquery).
      Per quanto riguarda l’istruzione io direi che se Google consiglia di usare appendChild probabilmente è per gestire alcune problematiche.

      Fammi sapere!
      A presto

    • Vincenzo

      15 05 2017

      Grazie mille Matteo.

      Vincenzo

    • Matteo Zambon

      15 05 2017

      Di nulla 🙂

    • Vincenzo

      15 05 2017

      Scusami ancora Matteo,
      c’è un modo per attivare un tag solo sul mobile
      senza attivarlo su altri tipi di dispositivi?

      Ti ringrazio
      Vincenzo

    • Matteo Zambon

      15 05 2017

      Si, crei una variabile js che ti dice 1 o 0 se è mobile e utilizzi quella variabile come attivatore 🙂

      That’s all folks!

      🙂

    • Vincenzo

      16 05 2017

      Grazie Matteo.

      Vincenzo

    • Matteo Zambon

      16 05 2017

      Di nulla Vincenzo 🙂
      Fammi sapere!

  • Reply

    Stefano

    05 11 2016

    Ciao Matteo,
    se ho ben capito lo script dovrebbe generare la classe a#number_link che identifica il numero di telefono da sostituire con il numero di inoltro di Google. Dall”anteprima di GTM sembra funzionare correttamente ma in ispezione non vedo nessuna classe a#number_link e se provo a testare realmente la conversione da un annuncio non viene tracciato.

    • Matteo Zambon

      10 11 2016

      a#number_link è un esempio 🙂

      nella guida lo scrivo sotto: a#number_link è il selettore CSS grazie al quale riusciamo ad identificare in modo univoco con la funzione document.querySelector l’elemento HTML che contiene il nostro numero. Avremmo potuto usare anche un semplice document.getElementById(‘telNum’);

      A presto!

  • Reply

    Stefano

    27 10 2016

    Ciao, ho provato a seguire le tue indicazioni ma non funziona, non ho una classe specifica per il numero di telefono ed utilizzando lo script non viene eseguito; se ho capito bene il funzionamento dovrebbe inserire il tag quando trova un tag .
    In realtà dovrei eseguirlo con 4 numeri diversi ma anche concentrandomi su uno solo la funzione callback non viene mai eseguita. Ma…

    • Matteo Zambon

      27 10 2016

      Ciao Stefano, riesci a riscrivermi meglio la problematica? Il commento è stato tagliato :\

Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.