Messaggio Click to Chat WhatsApp

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

Messaggio Click to Chat WhatsApp

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

Attivatore DOM Ready

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>

Il codice sopra gestisce l’inserimento dell’url della pagina da dove l’utente ha cliccato il link all’interno del messaggio precompilato. Al posto dell’url della pagina si può inserire qualsiasi altra informazione presente nel sito come il titolo della pagina, il nome di un prodotto, etc.

Tag Modifica Link WhatsApp

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.

Controllo URL WhatsApp console Chrome

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

Attivatore Clic 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.

Evento GA Clic WhatsApp

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

Anteprima GTM

Pagina con titolo dinamico

Modificare dinamicamente la Landing Page di una campagna Google Ads con Google Tag Manager

Ottimizzare una campagna Google Ads è un processo importante che serve a migliorare costantemente il ritorno dell’investimento proveniente dalla pubblicità su Google. L’attività di fine tuning riguarda sia fattori interni alla campagna come parole chiave, annunci e strategia di offerta, che fattori esterni, come l’ottimizzazione della pagina di atterraggio degli annunci per poterne migliorare l’efficacia.

Uno dei consigli che viene spesso dato dagli specialisti Google Ads è quello di creare un percorso il più omogeneo possibile tra ricerca digitata dell’utente, annuncio visualizzato su Google e landing page. Ad esempio Google stesso mette a disposizione degli inserzionisti una funzione chiamata KeyWord Insertion che permette di creare in maniera dinamica il testo dell’annuncio inserendo la parola chiave che corrisponde al termine di ricerca dell’utente. In questo modo aumenta la percezione da parte del potenziale cliente che l’annuncio promuova esattamente ciò di cui ha bisogno.

In quest’ottica, per ottimizzare ancora meglio la campagna Google, sarebbe bene che anche la pagina di atterraggio dell’annuncio contenesse la stesse parole chiave utilizzate dall’utente per la sua ricerca e visualizzate poi nell’inserzione. Ma come puoi bene immaginare realizzare una landing page per ogni kw di una campagna Google Ads è un’attività complessa e dispendiosa, a meno che non si utilizzi un sistema in grado di personalizzare in modo automatico la pagina.

In questa guida spiego come utilizzare Google Tag Manager per modificare in maniera dinamica il titolo di una Landing Page (nel mio caso la LP è stata creata con Leadages) sulla base della parola chiave che ha attivato l’annuncio Google Ads.

Gli step che seguiremo sono i seguenti:

  1. Passaggio dell’informazione della parola chiave dalla campagna Google Ads al sito;
  2. Recupero della parola chiave e salvataggio in una variabile Google Tag Manager;
  3. Creazione di un tag che modifica il titolo della pagina cambiandolo con la parola chiave che ha attivato l’annuncio;
  4. Creazione di un evento Google Analytics per il monitoraggio dei dati.

Personalizzazione del modello di monitoraggio della campagna Google Ads

Come prima cosa dobbiamo trasferire a Google Tag Manager l’informazione sulla parola chiave che ha attivato il nostro annuncio Google Ads. Per farlo utilizzeremo l’url di destinazione dell’annuncio Google in cui inseriremo il testo della parola chiave cercata grazie alla funzione Parametri URL di AdWords.

Andiamo su Google Ads ed in corrispondenza della nostra campagna (o gruppo di annunci) selezioniamo Impostazioni -> Impostazioni Aggiuntive -> Opzioni URL Campagna e aggiungiamo il nostro modello di monitoraggio che sarà {lpurl}?qads={keyword} assicurandoci di testarlo tramite il tasto prova.

Modello di Monitoraggio Google Ads

Il modello di monitoraggio è un sistema che permette di trasmettere tramite l’url maggiori informazioni sul clic. Ad esempio nel nostro caso specifico indichiamo a Google di impostare la nostra campagna in modo che la pagina di destinazione di ciascun annuncio, qualunque essa sia ({lpurl}) venga arricchita con un parametro (?qads=) che contiene la parola chiave che ha attivato l’inserzione ({keyword}).

Il parametro {keyword} è un parametro Value Track  che contiene l’informazione della parola chiave cercata. Oltre a questo esistono tanti altri parametri che si possono utilizzare come {device} che contiene l’informazione del dispositivo o {network} che specifica il tipo di Rete da dove proviene il clic.

Creazione della variabile Tag Manager per il recupero della parola chiave dall’url

Con il modello di monitoraggio attivato quando l’utente clicca sul nostro annuncio Google Ads viene reindirizzato ad un url simile a questo: www.mialandingpage.it?qads=parolachiave.

Ora che abbiamo l’informazione della parola chiave nell’url della pagina dobbiamo andarla a recuperare tramite una variabile URL di Google Tag Manager.

Andiamo in Variabili -> Nuova e selezioniamo una variabile di tipo URL con Componente = Query e Chiave query = qads (qads può essere sostituito con qualsiasi altro parametro a vostro piacimento) che chiameremo Variabile Query Ads.

Variabile GTM Query Url

Salviamo la variabile e per testarne il corretto funzionamento utilizziamo la modalità Anteprima di GTM sulla nostra landing page dove digitiamo a mano un parametro di test. Se il recupero della variabile funzione nella sezione Variables dell’anteprima troverai la Variabile Query Ads correttamente compilata con il contenuto del parametro inserito a mano nell’url

Test Variabile Url GTM

Creazione del Tag Personalizzato per la modifica del titolo della pagina

Ora che abbiamo l’informazione della parola chiave cercata dall’utente possiamo utilizzarla all’interno della nostra landing page inserendola al posto del titolo della pagina in modo che sia ben visibile quando l’utente atterra sul nostro sito.

Puoi decidere di sostituire qualsiasi elemento presente nella pagina inserendo al suo interno la parola chiave che ha attivato l’annuncio Google Ads.

Per farlo utilizziamo un Tag HTML Personalizzato che intercetta il primo elemento H1 della pagina e lo sovrascrive con la variabile Query Ads.

Andiamo nella sezione Tag -> Nuovo e selezioniamo un Tag di tipo HTML Personalizzato che si chiamerà Modifica H1 Query Ads ed avrà all’interno il seguente codice:

<script>
function changeH1()
{
var h1 = document.getElementsByTagName('h1')[0];
String.prototype.capitalize = function() {
return this.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
};
h1.innerHTML = '<span style="font-family: Montserrat, sans-serif; color: white; font-size: 50px;"><strong>' + {{Variabile Query Ads}}.capitalize() + '</strong></span>';
}
change = changeH1();
</script>

Custom Tag Html Change Dom H1

Ti spiego velocemente cosa fa lo script:

  • Identifica il primo elemento H1 presente nella pagina e lo inserisce in una variabile;
  • Sostituisce l’elemento H1 con il testo presente all’interno di h1.innerHTML dove ho inserito la vriabile GTM {{Query Ads}} (che contiene la parola chiave della campagna) formattata per essere allineata allo stile della pagina;
  • Il tutto con una funzione Javascript che inserisce le iniziali maiuscole per il titolo (in modo che una ricerca del tipo “prova ricerca” venga scritta nella pagina come “Prova Ricerca”).

Ora che abbiamo creato il Tag andiamo a creare l’attivatore facendo in modo che la sostituzione del Titolo venga eseguita solo nelle pagine che presentano il parametro qdas.

Attivatore Query Ads

Andiamo in Attivatori -> Nuovo e creiamo l’Attivatore Query Ads di tipo Pronto per DOM che si attiva per le seguenti condizioni:

  • Page URL contiene qads;
  • Variabile Query Ads non è uguale a undefined.

A questo punto non ci resta che salvare e testare il tutto.

Test e verifica

Per testare correttamente il nostro lavoro dobbiamo simulare una ricerca che attivi un annuncio della nostra campagna.

Esempio annuncio Ads

Cliccando sull’annuncio (ebbene si, dovrai investire il costo di un clic per questo test) dovrai vedere comparire un titolo della pagina (2) contenente la parola chiave presente nella variabile qads presente nell’url della landing (1).

Pagina con titolo dinamico

BONUS: Creazione di un evento di monitoraggio Google Analytics

Per tenere traccia dell’attività di sostituzione del titolo della pagina ed analizzare come “reagiscono” gli utenti ti consiglio di creare un evento Google Analytics che  ti permette di intercettare gli utenti che vedono la landing dinamica e monitorarne il comportamento.

Per farlo sfruttiamo l’Attivatore Query Ads già creato in precedenza. Per creare il tag Analytics andiamo in Tag -> Nuovo e creiamo un Tag Universal Analytics (che ho chiamato Evento GA Query Ads) di Tipo Evento compilando il campo azione con la variabile {{Query Ads}}.

Evento GA Query Ads

Una volta attivato il tag evento Analytics possiamo monitorare il comportamento degli utenti che arrivano sulla nostra pagina grazie ad un Annuncio Google Ads, vedere quale termine hanno cercato e capire come si sono comportati (interazioni, scroll, completamento obiettivi, etc..)

Evento Analytics Query Ads

Report Analytics Data Pubblicazione

Tracciare la data di pubblicazione di un articolo con Google Tag Manager e Analytics

Molto spesso quando mi occupo di analizzare un sito web mi capita di dover approfondire metriche di performance incrociandole con altre informazioni relative ai contenuti (es: quanto sono stati pubblicati gli articoli di un sito che generano maggiore traffico e conversioni?).

Il problema è che non sempre è facile reperire questi dati e anche quando i dati sono rintracciabili per incrociarli con altre informazioni è sempre necessario fare affidamento ad un mix di strumenti (Excel, Google Analytics, CMS, etc..).

Per fortuna che per questo tipo di problemi c’è una soluzione che si chiama Google Tag Manager. Grazie allo strumento di Tag Management di Google è possibile inviare a Google Analytics informazioni relative a dati presenti sulle pagine del nostro sito e trattarli come Dimensioni Personalizzate, molto utili poi per fare segmentazioni ed analisi.

In questo articolo vedremo come utilizzare GTM per inviare a Google Analytics la data di pubblicazione di un post (recuperandola direttamente dalla pagina del nostro sito web).

Gli step che seguiremo sono i seguenti:

  1. Creazione della variabile per il recupero della data del post;
  2. Creazione della Dimensione Personalizzata contenente la data su Google Analytics;
  3. Attivazione della Dimensione Personalizzata nel Tag di Universal Analytics.

Creazione della variabile per il recupero della data del post

La prima informazione di cui abbiamo bisogno è la data dell’articolo pubblicato che possiamo recuperare dalla pagina tramite un selettore ccs che intercetta l’elemento in cui è contenuta la data.

Grazie alla Console di Google Chrome andiamo ad ispezionare il nostro articolo e ci posizioniamo sopra all’elemento in cui viene visualizzata la data.

Analisi DOM data

  1. Una volta individuato l’elemento data ci posizioniamo sopra con il cursore per evidenziarlo;
  2. Individuiamo il selettore CSS di riferimento (nel mio caso time.entry-date);
  3. Facendo CTRL + F attiviamo la funzione Ricerca ed incolliamo il selettore per assicurarci che sia l’unico presente nella pagina (nel caso il selettore non fosse l’unico dovremo trovarne uno più specifico).

Così facendo avremo le informazioni che ci serviranno per creare la variabile su Google Tag Manager che restituirà il valore testuale dell’elemento data, cioè nel mio caso 7 ottobre 2018.

E se invece della sola data volessi l’informazione completa di data ed orario?

Recupero attributo tagQuesti dati (nel mio caso) sono presenti nell’attributo dateTime del tag time che è possibile recuperare con una funzione Javascript ad hoc (come nell’esempio di seguito).

function() {
var dataarticolo = document.getElementsByTagName("time")[0].getAttribute("datetime");
return dataarticolo;
}

Ti spiego più nel dettaglio la funzione in modo che puoi adattarla alle tue esigenze:

  1. function(): creo una funzione;
  2. var dataarticolo: creo una variabile con nome dataarticolo;
  3. document.getElementsByTagName(“time”): associo alla variabile dataarticolo un selettore css che recupera i tag con nome time.
  4. [0]: visto che il tag non è 1 solo, prendo il primo;
  5. .getAttribute(“datetime”): e vado ad identificare l’attributo datetime (che è quello che contiene il valore testuale di data e l’orario);
  6. return dataarticolo: faccio in modo che la funzione restituisca il valore della variabile.

Ora che abbiamo l’informazione che ci serve andiamo a creare la variabile Google Tag Manager relativa alla data dell’articolo.

Andiamo in Variabili -> Variabili definite dall’utente -> Nuova:

  • Se vogliamo la sola informazione della data creiamo una Variabile di tipo Elemento DOM con all’interno il selettore CSS dell’elemento data (time.entry-date);
    Variabile DOM Data
  • Se vogliamo data + orario creiamo una variabile di tipo Javascript Personalizzato con all’interno la funzione vista sopra.
    Variabile Javascript Data

Per testare il corretto funzionamento della procedura andiamo in Anteprima di GTM e nella sezione Variables (Variabili) verifichiamo che le variabili siano popolate con le informazioni corrette relative alla data.

Verifica variabili

Creazione della Dimensione Personalizzata contenente la data su Google Analytics

Ora che abbiamo la data dell’articolo immagazzinata all’interno di una variabile GTM dobbiamo decidere come utilizzarla e la soluzione più efficace in questo caso è sfruttare una dimensione personalizzata di Google Analytics che ci offre la flessibilità di incrociare i dati della dimensione (data) con le varie metriche disponibili in Google Analytics segmentando al meglio le informazioni.

Per creare una dimensione personalizzata in Google Analytics ci rechiamo nella sezione Amministrazione -> Proprietà -> Definizioni personalizzate -> Dimensioni personalizzate e clicchiamo su +Nuova dimensione personalizzata.

La dimensione che andiamo a creare sarà con ambito hit ed avrà nome Data Pubblicazione.

Dimensione Personalizzata Data di Pubblicazione

Se è la prima dimensione personalizzata che creiamo per la proprietà del sito, prenderà come indice 1, altrimenti prenderà il numero successivo all’ultima dimensione creata (nel mio caso 2).

Dimensione Personalizzata Indice

Attivazione della Dimensione Personalizzata nel Tag di Universal Analytics

Una volta creata la dimensione dobbiamo “passarla” come informazione al Tag di Analytics. Per farlo andiamo in Google Tag Manager in corrispondenza della variabile “Impostazioni Google Analytics” del nostro account che troviamo in Variabili -> Variabili definite dall’utente e nella sezione Dimensioni personalizzate aggiungiamo una nuova dimensione con indice 2 (nel mio caso) e con valore la variabile Data Articolo.

Dimensione Personalizzata GTM

Salviamo l’operazione e ancora una volta sfruttiamo la funzione Anteprima di GTM per assicurarci che tutto funzioni a dovere.

Anteprima Tag Analytics GTM

Il lavoro è completato e da questo momento in poi Analytics acquisirà come dimensione la data dei post del nostro sito; questo nuovo dato sarà disponibile in tutte i rapporti del nostro account.

Un esempio di utilizzo di questa informazione può essere quello di analizzare gli articoli che portano maggiori utenti sul sito e vedere quanto tempo prima sono stati pubblicati per capire se è necessario o meno rivederne i contenuti.

Report Analytics Data Pubblicazione

Custom Tag Html Json

Utilizzare Google Tag Manager per inserire in modo dinamico i dati strutturati

Sono ormai passati più di 7 anni da quando si è cominciato a parlare di Web Semantico e motori di ricerca e da quel momento col passare del tempo l’utilizzo dei dati strutturati è diventato un elemento sempre più importante in ambito SEO.

Google ad esempio utilizza i dati strutturati per comprendere meglio il contenuto di una pagina e in alcuni casi le informazioni raccolte vengono mostrate in serp attraverso snippet particolari come negli esempi di seguito.

Dati Strutturati Recensioni

Esempio di Dati Strutturati per Recensioni

Dati Strutturati Eventi

Esempio di Dati Strutturati per Eventi

Dati Strutturati Ricetta

Esempio di Dati Strutturati per Ricette

Attualmente Google riconosce e supporta i seguenti tipi di markup nelle categorie Creative Works (come articoli o libri) e Local Business (attività locali).

Come funzionano i dati strutturati

La maggior parte dei dati strutturati utilizza il vocabolario Schema.org attraverso il quale è possibile implementare un Mark Up specifico per i propri contenuti utilizzando diversi linguaggi (Microdata, RdfA, etc..) tra cui JSON-LD, il formato consigliato da Google stesso.

La notazione JSON-LD si basa su JavaScript e incorpora all’interno di una tag presente nell'<head> o nel <body> della pagina le informazioni relative ai dati strutturati. In questo modo il contenuto html della pagina e le informazioni di mark up rimangono separati garantendo una serie di vantaggi:

  • Essendo caricato in modo asincrono rispetto ai contenuti della pagina il codice di markup non influisce sulle sue prestazioni;
  • Essendo iniettato tramite Javascript non contamina la struttura ed il codice del sito;
  • La sintassi JSON è abbastanza semplice da implementare rispetto ad altri linguaggi.

Una volta create le annotazioni semantiche, che devono essere specifiche per ogni contenuto presente nel sito, i motori di ricerca saranno in grado di scansionare ed elaborare le informazioni in modo più preciso rispetto a prima; quello che normalmente è un semplice contenuto html formato da informazioni generiche, se formattato attraverso il vocabolario Schema.org, diventa un’entità definita e precisa.

Attraverso i dati strutturati Google è in grado ad esempio di rispondere a domande dirette come “Quanto è alto l’Everest” o “Chi è il Presidente della repubblica italiana?” e fornire dei risultati migliori riuscendo a definire meglio un contesto di risposta basato su fattori semantici.

Un altro esempio di risposta semantica è quella che viene fornita nel Knowlede Graph cioè quel box che compare in evidenza per alcune ricerche con l’obiettivo di offrire agli utenti ogni genere di informazione rilevanti su alcuni temi (es: aziende, musica, personaggi, etc..).

Esempio di Knowledge Graph

L’evoluzione del web semantico permette a Google di fornire risposte sempre più precise e contestualizzate; uno degli ultimi aggiornamenti in termini di dati strutturati, Speakable, riguarda ad esempio un annotazione specifica per contenuti idonei ad essere utilizzati da Google Assistant per rispondere a query di notizie di attualità su dispositivi vocali.

Come utilizzare Google Tag Manager con i dati strutturati

Grazie a Google Tag Manager è possibile gestire in modo semplice l’implementazione delle informazioni Schema.org per strutturare informazioni aggiuntive sul proprio sito, come ad esempio mark up di tipo Local Business, molto utili per la SEO locale.

Inoltre uno dei vantaggi offerti da GTM è la possibilità di utilizzare delle variabili per recuperare informazioni presenti nella pagina, senza dover scrivere a mano per ogni singolo contenuto i dati di cui abbiamo bisogno.

In questo articolo vedremo ad esempio come utilizzare la variabile Elemento DOM di Google Tag Manager per recuperare porzioni di testo dalla pagina del nostro sito ed inserirle in maniera dinamica in un tag che gestisce le informazioni JSON-LD di Schema.org.

La procedura che faremo seguirà i seguenti step:

  • Creazione di n variabili Elemento DOM per ciascun informazione che dobbiamo recuperare;
  • Creazione di un attivatore per le pagine dove vogliamo utilizzare il mark up Schema.org;
  • Creazione di un tag html personalizzato con il markp JSON-LD che si compila dinamicamente con le variabili create.

Nel mio caso di esempio ho utilizzato un markup per l’entità libro (book) su un sito che tratta di recensioni di libri.

Analisi del Markup

Come prima cosa abbiamo bisogno di capire quali sono le informazioni che ci servono per il nostro markup distinguendo tra quelle richieste dallo standard e quelle presenti nelle nostre pagina (se manca qualche elemento obbligatorio dobbiamo assicurarci di inserirlo prima).

Una volta confrontati dati richiesti e informazioni che abbiamo possiamo creare il nostro markup JSON-lD seguendo uno degli esempi presenti su Schema.org.

Il nostro codice avrà il seguente formato:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Book",
  "additionalType": "Product",
  "name": "Nome Libro",
  "genre": "Genere Libro",
  "inLanguage": "Lingua Libro",
  "isbn": "Codice ISBN",
  "numberOfPages": "Numero di pagine",
  "author": {
    "@type": "Person",
    "name": "Nome Autore"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Nome Editore"
  }
}
 </script>

Le informazioni in grassetto, che variano da libro a libro, dovranno essere compilate in modo dinamico (grazie a GTM) prendendo dal codice della pagina il testo che fa riferimento ad ogni singolo campo (es: autore, editore, genere, etc..).

Creazione delle variabili Elemento DOM

Per recuperare le informazioni di cui abbiamo bisogno faremo un po’ di scraping sul nostro sito andando ad individuare gli elementi del DOM che corrispondono ai dati di cui abbiamo bisogno.

Facciamo un esempio pratico.

Per individuare il nome dell’autore del libro utilizzo la funzione Ispeziona Elemento dei Chrome DevTools: mi sposto sul nome dell’autore e analizzo qual’è il selettore CSS (univoco) che mi restituisce il testo con all’interno il nome di cui ho bisogno.

Selettore CSS

Una volta individuato il selettore all’interno di Google Tag Manager vado in Variabili -> Nuova -> Elemento DOM imposto una variabile che chiamo Autore Libro con metodo Selettore CSS e come selettore inserisco h3.featured-author__name a

L’operazione va ripetuta creando una variabile per ogni dato dinamico di cui abbiamo bisogno.

Creazione del custom tag JSON-LD

Una volta che abbiamo tutte le informazioni andiamo a creare il nostro markup tramite JSON-LD popolando i dati mancanti con le variabili precedentemente create.

In Google Tag Manager andiamo in Tag -> Nuovo -> Html Personalizzato ed inseriamo il codice JSON-LD precedentemente creato sostituendo alle voci in grassetto le nostre variabili (basta aggiungere all’interno del codice l’istruzione {{Nome Variabile}}).

Custom Tag Html Json

Come attivatore del tag andremo a scegliere solo le pagine che rappresentano le pagine libro all’interno del sito (potete farlo tramite il percorso url dei vari contenuti).

Test ed analisi

Una volta salvato il tutto pubblichiamo il nostro contenitore ed assicuriamoci che il tag venga “eseguito” nella nostra pagina.

Verifica Tag GTM

Cliccando in corrispondenza della voce Variabili al caricamento della pagina (Window Loaded) è possibile verificare il corretto popolamento delle nostre variabili DOM.

Controllo Variabili Elemento DOM

Come ultima verifica dobbiamo controllare che il markup sia correttamente metabolizzato da Google, per farlo utilizzeremo lo Strumento di Test dei Dati Strutturati che dovrà restituirci il valore Book senza errori.

Test Dati Strutturati

Attenzione: per fare il controllo con lo strumento dei dati strutturati non utilizzare la voce Recupera URL ma Snippet di Codice copiando ed incollando il codice html della pagina recuperato dai Chrome DevTools.

Tracciamento Link Affiliati GTM

Tracciare i Link Affiliati con Google Tag Manager

Sia che tu abbia un sito personale, un sito aziendale, un e-commerce o un sito editoriale probabilmente sei interessato a guadagnare grazie al tuo sito.

Questo ti avrà portato a scegliere un metodo di monetizzazione tra quelli più diffusi come ad esempio Google AdSense o Tradedoubler o sistemi meno noti ma più all’avanguardia come la native advertising  o l’affiliate marketing. A prescindere dal sistema pubblicitario che hai scelto avrai comunque bisogno di tenere traccia delle performance delle tue campagne in modo da poter capire quali stanno funzionando meglio e dove poter ottimizzare.

Solitamente la maggior parte delle piattaforme di advertising offre dei sistemi di monitoraggio dei dati ma non sempre questi sistemi sono sufficienti ad ottenere kpi strategici. Ad esempio, se utilizzi una piattaforma di affiliate marketing, le statistiche che puoi trovare ti dicono quante visite il tuo sito ha portato al sito del merchant ma non sempre sono in grado di dirti quali sono i contenuti del tuo sito che hanno generato le visite che poi hanno convertito.

Per ovviare a queste carenze è possibile appoggiarsi a strumenti esterni di tracking come Google Analytics che, grazie all’integrazione con Google Tag Manager, ci permette di effettuare un monitoraggio avanzato delle interazioni degli utenti con il nostro sito.

Già in un mio articolo di qualche tempo fa ho spiegato come utilizzare Google Tag Manager per analizzare i click sui link esterni di un sito; questo sistema ci permette di capire quali sono i link maggiormente cliccati dai nostri utenti ed effettuare scelte strategiche sulle migliori posizioni dei link, gli anchor text più performanti ed i siti maggiormente visti.

Oggi vediamo invece come utilizzare Google Tag Manager per tracciare solo i link affiliati (e non tutti i click esterni) ed inviare di dati a Google Analytics per effettuare un’analisi più approfondita delle nostre campagne affiliate.

Esistono vari modi per poter tracciare i link affiliati grazie a Google Tag Manager. Quello che vi mostro si basa sui seguenti 3 step:

  1. Identificare i link affiliati grazie ad una variabile tabella di ricerca che utilizza le espressioni regolari per intercettare i pattern dei nostri link e gli assegna un valore di output;
  2. Creare un attivatore che intercetta solo i click sui link che corrispondono al valore di output dei link affiliati;
  3. Inviare un evento a Google Analytics con le informazioni sui link affiliati cliccati (url del link cliccato e pagina dove si trova il link).

Tracciamento Link Affiliati GTM

Come prima cosa è necessario identificare la struttura di tutti i link affiliati che vogliamo tracciare. Solitamente i sistemi di affiliazione attribuiscono ad ogni publisher un url personalizzato che lo identifica in modo univoco.

Un esempio di link affiliato può essere www.sitoaffiliazione.it/?affiliate=1234 o www.sitoaffiliazione.it/?ref=1234 o ancora www.sitoaffiliazione.it/r1234/; purtroppo non esiste un sistema generale di gestire i link affiliati ed ogni piattaforma adotta un suo metodo.

Per poter gestire quindi i link di affiliazione tramite GTM è necessario identificare tutti i diversi link che vogliamo tracciare e capire la struttura di ognuno, ad esempio:

  • www.sitoaffiliazione1.it/?ref=1234
  • www.sitoaffiliazione2.it/?aff=1234
  • www.sitoaffiliazione3.it/aff1234

Creare una Tabella Regex per i link affiliati

Una volta identificati i link di affiliazione possiamo raggrupparli insieme sfruttando una Variabile di Google Tag Manager, la Tabella delle Espressioni Regolari, che ci permette di mappare i nostri link partendo da dei valori di input (es: link 1, link 2, link 3, etc..) e restituendo uno o più valori in output.

In sintesi la nostra tabella sarà composta da tante righe quanti sono i link che vogliamo tracciare, ogni link viene cercato tramite un pattern (sfruttando le Espressioni Regolari – se non le conosci ti consiglio di leggere questo ottimo articolo di Giovanni Sacheli) e per ogni link matchato la tabella restituisce un valore univoco che decidiamo noi e che ci permette poi di identificare quei link come affiliati.

Per creare la tabella devi andare nella sezione Variabili e cliccare su Nuova e poi scegliere come tipo di variabile la Tabella delle Espressioni Regolari.

Variabile Tabella Regex

La tabella deve avere come variabile di input {{Click URL}} che è la variabile integrata di Google Tag Manager che identifica l’url del link cliccato. Nella tabella andranno poi inseriti su ogni riga dei valori di input a sinistra (che tramite le espressioni regolari identifica il pattern dei nostro link affiliati) e dei valori di output a destra (nel nostro caso un unico valore true).

Ogni riga contiene la regola per identificare il link affiliato. Se i link affiliati hanno tutti lo stesso pattern può bastare anche una sola riga.

Come valore predefinito (per tutti gli altri click sui link) impostiamo false.

Questo sistema fa un controllo su ogni link cliccato del sito (variabile Click Url) e gli assegna il valore true solo se il link corrisponde ad uno di quelli inseriti nella tabella. In tutti gli altri casi assegna false.

Ora che sappiamo se un link appartiene o meno alla lista dei link affiliati andiamo a creare l’attivatore per il nostro Tag Evento di Analytics.

Andiamo su Attivatori -> Nuovo e impostiamo come tipo di attivatore Clic – Solo link che viene abilitato su tutte le pagine del sito e attivato solo se la Variabile Tabella Regex Link Affiliati è uguale a True.

Attivatore Link Affiliati

Creare il tag per inviare i dati a Google Analytics

A questo punto andiamo a creare il Tag Evento Google Analytics.

Andiamo su Tag -> Nuovo e come tipo di Tag impostiamo Universal Analytics con monitoraggio su Evento. Nelle sezioni Categoria, Azione ed Etichetta possiamo inserire i dati dei click che vogliamo passare a Google Analytics.

Nel mio caso ho scelto di tenere la Categoria fissa con l’informazione Link Affiliato e di compilare Azione ed Etichetta rispettivamente con l’url del link cliccato (per identificare quale sito affiliato è stato visitato) e con la path della pagina dove si trova il link cliccato (per capire quali contenuti del sito generano maggiori visite ai link affiliati).

Evento Link Affiliati

Testare il corretto funzionamento

Una volta impostato il nostro Tag non ci resta che testarlo sfruttando la funziona Anteprima di Google Tag Manager che ci permette di simulare l’azione del click e vedere se i tag si scatenano correttamente.

Andate in una sezione dove si trova il vostro link affiliato, cliccate sul link (gtm.linkClick) e vedete se l’evento Analytics viene attivato correttamente.

Anteprima GTM