Guida Avanzata: Tracciare AdBlock con Google Tag Manager

[Aggiornata il 27 Febbraio 2019]

Ti sei mai chiesto se puoi tracciare gli utenti che hanno AdBlock installato? Perché dovresti farlo (anche se non hai AdSense)?

Ti spiego due valide ragioni:

1. Hai mai provato a navigare il tuo sito con AdBlock? Probabilmente potrebbero esserci degli elementi bloccati.
2. Potresti escludere dal Remarketing gli utenti che usano quell’estensione.

L’idea è questa: usiamo una variabile nel DataLayer che indica se AdBlock è attivo o meno. Il valore della variabile lo passiamo ad una dimensione personalizzata su Google Analytics attraverso un evento. Il tutto senza toccare una riga di codice del sito.

Sei pronto? Iniziamo!

Step 1 – Creiamo il Tag HTML Personalizzato

Per prima cosa dobbiamo creare un codice personalizzato HTML. Nel dettaglio inseriremo un elemento DIV che farà da “esca” all’AdBlock e un codice JavaScript basato su jQuery che verifica se il DIV verrà nascosto dall’AdBlock. Il risultato di questa operazione lo “pusheremo” (aggiungeremo) al DataLayer attraverso un evento personalizzato.

Fai così:

• Tag > Nuovo > Configurazione tag.
• Tipo di tag: Tag HTML personalizzato.
• Adesso incolla il seguente codice. Se usi già la libreria di jQuery ti basta eliminare la riga di codice rossa.

[update] ► Se notate dei problemi di conflitto con la variabile $ provate a cambiate la string $ con jQuery

<div id="bottomAd" style="font-size: 2px;">&nbsp;</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
    
$(document).ready( function() {
  window.setTimeout( function() 
  {
    var bottomad = $('#bottomAd');
    
    if (bottomad.length == 1) 
    {
      if (bottomad.height() == 0) 
      {
        dataLayer.push({'event': 'ir.adBlock', 'adBlockDetected': '1' });
      } 
      else 
      {
        dataLayer.push({'event': 'ir.adBlock', 'adBlockDetected': '0' });
      }
    }      
  }, 1);
});

</script>

• Attivazione: All Pages / Visualizzazione di pagina.
• Rinomina il tag “cHTML adBlock” e salva.

Dovresti avere quindi un Tag di questo tipo:

Step 2 – Verifica il codice con Debug e Preview

Metti il tuo contenitore in Debug, verifica che venga scatenato l’evento ir.adBlock e che nella scheda Data Layer ci sia il valore della variabile adBlockDetected.

I valori possono essere:

• adBlockDetected = 0 (AdBlock non è attivato)
• adBlockDetected = 1 (AdBlock è attivato)

Step 3 – Creiamo la Variabile Livello di Dati

Prossimo passo è quello di catturare il valore di adBlockDetected nel DataLayer e gestirlo in una variabile:

• Variabili > Nuova > Configurazione variabile.
• Tipo di variabile: Variabile di Livello Dati.
• Nome variabile livello dati: adBlockDetected.
• Spunta Imposta valore predefinito.
• Valore predefinito: 0
• Nomina la Variabile “adBlockDetected” e salvala.

Dovresti avere una configurazione di questo tipo:

Step 4 – Creiamo l’attivatore

Associamo l’evento che abbiamo creato nel push ad un Attivatore di tipo personalizzato:

• Attivatori > Nuovo > Configura attivatore.
• Tipo di attivatore: Evento personalizzato.
• Nome evento: ir.adBlock.
• Attiva su: Tutti gli eventi personalizzati.
• Chiama l’Attivatore “ir.adBlock”e salvalo.

Mancano ancora pochi passaggi 🙂

Step 5 – Creiamo la dimensione personalizzata su Google Analytics

Per poter gestire e creare report personalizzati la cosa che conviene fare è creare una dimensione personalizzata su Google Analytics:

• Amministrazione > Proprietà > Definizioni Personalizzate > Dimensioni personalizzate.
• Clicca su Nuova Dimensione Personalizzata.
• Nome della dimensione: AdBlock.
• Ambito: Sessione
• Spunta la voce Attivo.
• Fai attenzione all’indice della dimensione personalizzata. È un numero che può andare da 1 a 20 (nel mio caso è 3).

Step 6 – Creiamo l’evento su Google Analytics

Abbiamo tutto pronto, non ci resta che creare un evento su Google Analytics attraverso il Tag Analytics in Google Tag Manager. L’evento prenderà il valore della variabile e verrà attivato all’evento personalizzato.

• Tag > Nuovo > Configurazione tag.
• Tipo di tag: Universal Analytics.
• Tipo di monitoraggio: Evento.
• Categoria: AdBlock.
• Azione: {{adBlockDetected}}
• Etichetta: {{Page Path}} (non è obbligatorio).
• Hit da non interazione: True.
• Adesso dentro le Impostazioni di Google Analytics, puoi inserire la Variabile delle Impostazioni di Analytics, se l’hai creata come ti ho spiegato, oppure puoi abilitare l’override e inserire la costante {{gaID}} nel campo ID monitoraggio (in alternativa puoi anche semplicemente inserire il tuo codice UA di Analytics).
• Clicca su Altre impostazioni > Dimensioni personalizzate > Aggiungi dimensione personalizzata. Configura come segue:
• Indice: 3 (inserisci il numero dell’indice della dimensione personalizzata che hai rilevato prima).
• Valore dimensione: {{adBlockDetected}}
• Attivazione: seleziona l’Attivatore “ir.AdBlock” creato precedentemente.
• Nomina il tag ad esempio “GA – Event – AdBlock” e salva.

Non ti resta che eseguire il debug e pubblicare!

Ti consiglio sempre di verificare con il debug che il Tag sia funzionante.

Dopo aver pubblicato il Tag cliccando sul pulsante blu “Invia”, visita il tuo sito con AdBlock attivo e vai su Google Analytics. Se trovi gli Hit in Eventi sul rapporto in tempo reale allora il gioco è fatto!

 

Ora riesci ad avere un’informazione in più e capire quanti utenti utilizzano AdBlock.

Link Utili:

• Codice che identifica AdBlock su stackoverflow
• Articolo di Avinash Kaushik su come implementare il tracciamento con Google Analytics (inglese)

A presto e buon Tag!

PS: Ti sarebbe più utile una video guida? Lasciami un commento, in caso positivo mi attiverò per farlo 🙂