FAI DECOLLARE LA TUA WEB ANALYTICS. CON GOOGLE TAG MANAGER.

Le guide e i video tutorial gratuiti di Matteo Zambon, autore del libro "GTM per chi inizia"

Guida Avanzata: Monitoraggio chiamata Telefonica su Google AdWords con Google Tag Manager

Guida Avanzata monitoraggio chiamata telefonica su Google AdWords con Google Tag Manager

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

Piccola premessa di 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 celluare, dove visivamente è il tuo numero, in realtà uno script fa partire la chiamata ad un numero di Google.

Bello.

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

Requisiti per partire

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

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

Step 1 recupera il Tag della conversione

Vai su AdWords e accedi alle conversioni (Strumenti->Conversioni) e seleziona “Telefonate“.

conversione telefono adwords

Selezionate quindi la seconda voce “chiamate verso un numero di telefono sul sito web“.

conversione telefono website adwords

A questo punto una volta inserito nome, valore della conversione e le altre impostazioni dovresti avere finalmente il tuo snippet di codice:

conversione telefono adwords - snippet

Step 2 crea un Tag HTML personalizzato

Ora che hai lo snippet di codice non ti resta che andare in Google Tag Manager seleziona quindi Tag > Nuovo.

Scegli prodotto: “Tag HTML personalizzato” e inserisci lo snippet di codice.
Attiva su: “Tutte le pagine” oppure nelle pagine dove ti interessa gestire il monitoraggio delle conversioni

conversione telefono adwords snippet 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 noi puoi?

Niente paura ecco cosa fare. Creiamo un Tag HTML personalizzato 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 (che è dentro allo script inserito precedentemente) che gestice 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

Se hai più numeri di telefono nella pagina? Semplicemente usa più querySelector 🙂

Quindi quello che ti rimane da fare:

Scegli prodotto: “Tag HTML personalizzato” e inserisci lo snippet di codice creato qui sopra.
Attiva su: Crea un nuovo attivatore di tipo “Visualizzazione di Pagina” che si attivi al DOM Ready. Questo perché deve esserci lo script di conversione AdWords già caricato. Chiamalo pure “DOM Caricato” e attivalo su tutte le Pagine

 

conversione chiamate google attivatore script tag manager

Alla fine dovresti ritrovarti quindi il Tag HTML di questo tipo

conversione chiamate google custom html script tag manager
Non ti resta che testare e pubblicare 🙂

A presto!

Link Utili

 

16 commenti su “Guida Avanzata: Monitoraggio chiamata Telefonica su Google AdWords con Google Tag Manager

  1. 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

    • 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!

    • 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

    • 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 🙂

    • 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

    • 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

    • Grazie mille Matteo.

      Vincenzo

    • Di nulla 🙂

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

      Ti ringrazio
      Vincenzo

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

      That’s all folks!

      🙂

    • Grazie Matteo.

      Vincenzo

    • Di nulla Vincenzo 🙂
      Fammi sapere!

  2. 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.

    • 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!

  3. 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…

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

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

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

Schermata dashboard Club Tag Manager Italia

Entra GRATIS nel Club Tag Manager Italia!

Ho riaperto temporaneamente le iscrizioni al Club: il posto – l’unico posto – dove puoi accedere a TUTTI i miei materiali avanzati (ore e ore di roba).

In aggiunta, nel Club rispondo a tutte le tue domande in un gruppo di Facebook riservato ai membri!

Richiedi subito il tuo PASS GRATUITO di 60 giorni per provare senza impegno il Club Tag Manager Italia!