Il fenomeno degli AdBlock è in forte crescita e le previsioni dicono che il numero di utenti Internet che si avvalgono di questo strumento, per inibire l’esposizione pubblicitaria sui siti che visitano, è destinato a lievitare ancora nel tempo, tanto sui dispositivi desktop che sui dispositivi mobili (tablet e smartphone).
Scopo di questo articolo è fornire al lettore – presumibilmente gestore di un blog o di un sito web – uno strumento (che possiamo chiamare AdBlock Detector o AdBlock Checker) per intercettare gli utenti che utilizzano un simile dispositivo al fine di compiere una qualche azione come, ad esempio, la visualizzazione di un avviso piuttosto che per semplici finalità statistiche.
Vedremo anche come realizzare una specie di Anti-AdBlock cioè degli script in grado di bloccare gli utenti che navigano con AdBlock e che, pertanto, visitano il nostro sito "a scrocco"!
Cos’è un AdBlock?
Col termine AdBlock s’intende un software in grado di bloccare la visualizzazione di pubblicità (in inglese Advertising) durante la navigazione di un sito web.
Questi software (di cui il più famoso è AdBlock Plus) si integrano nel browser sotto forma di plugin e consentono di bloccare il caricamento di banner, popup, overlay e altri tipi di pubblicità on-line. In pratica, dopo aver installato un AdBlock, si sarà in grado di visualizzare siti web senza alcuna pubblicità al loro interno!
AdBlock: un serio problema per i webmaster!
Gli AdBlock, oggi molto diffusi, nascono per contrastare il fenomeno della pubblicità invadente, presente su alcuni siti web: lo scopo di questi software, infatti, è quello di consentire agli utenti una navigazione più snella, veloce e priva di fastidiosi messaggi pubblicitari. Peccato che la diffusione degli AdBlock stia creando seri problemi ai gestori di siti web e blog, essendo la pubblicità l’unica fonte di sostentamento economico per i gerenti di queste, piccole o grandi, attività online!
AdBlock: come funzionano?
Come detto, gli AdBlock sono dei software che si presentano sotto forma di plugin all’interno dei comuni browser come Chrome, Firefox, Explorer, ecc. In pratica questi plugin alterano il funzionamento del browser inibendo il caricamento degli elementi pubblicitari, i quali vengono identificati in base a delle regole interne nonché attraverso blacklist aggiornate periodicamente. Ad esempio è molto probabile che l’AdBlock inibisca script con nomi eloquenti (come "banner.js", "adv.js", "ads.js", "adserver.js", ecc.) nonchè tutte le sorgenti remote palesemente riconosciute come pubblicitarie (adsense, doubleclick, criteo, tradedoubler, ecc.).
Il risultato, se l’operazione si è svolta senza errori, sarà un sito web perfettamente funzionante ma privo di ogni messaggio pubblicitario, con buona pace del Webmaster!
AdBlock: come difendersi?
Per il gestore di un sito web difendersi dal fenomeno degli AdBlock è molto difficile, ma qualcosa può essere fatto. Come già detto, scopo di questo articolo è di fornire ai webmaster uno strumento in grado di identificare gli utenti che utilizzano un AdBlock. Per farlo vi suggerirò differenti tecniche, tutte basate su Javascript.
Tecnica N.1 – Verificare l’altezza dell’elemento contenitore di un banner
Una tecnica molto semplice è quella di calcolare l’altezza del div che contiene un banner, supponiamo un classico box 300×250 pixel.
Solitamente, ma questo è solo un esempio, l’implementazione pratica di un banner potrebbe essere simile a qualcosa del genere:
<div id="banner-laterle">
<script src="https://adserver.concessionaria.com/banner.php?ad_partner=123&ad_format=300x250">
</script>
</div>Lo script annidiato nel DIV dovrebbe produrre l’esposizione di un banner. In presenza di un sistema di AdBlock, ovviamente, ciò non accadrà ed il nostro DIV contenitore rimarrà vuoto.
Grazie a Javascript, pertanto, possiamo verificare l’altezza del DIV e, di conseguenza, dedurne se l’utente ha installato un AdBlock oppure no. Vediamo il codice:
<script>
// funzione di verifica in base all'altezza del DIV
function verifica_adblock(id) {
if (document.getElementById(id).offsetHeight < 250) {
return 1; // AdBlock Attivo !!!
} else {
return 0; // Nessun AdBlock
}
}
// eseguo la verifica
var adblock = verifica_adblock('banner-laterale');
if (adblock) {
// ho rilevato l'adblock e faccio qualcosa...
alert('Questo sito vive di pubblicità, per favore, disattiva AdBlock mettendoci in whitelist.');
}
</script>Vediamo come funziona il codice: utilizziamo il DOM per accedere al div con lo specifico ID, quindi utilizziamo la proprietà offsetHeight per calcolare l’altezza effettiva di quest’ultimo. Se questa è minore di 250 (nel nostro caso, ricordiamolo, il div era preposto ad ospitare un banner largo 300 e alto 250 pixel) possiamo presumere che un qualche AdBlock sia attivo.
Una volta rilevato un utente che utilizza AdBlock, vado a mostrare un messaggio in cui chiedo di mettere il nostro sito in whitelist (si tratta di un’impostazione presente in ogni AdBlock: tutti i siti inclusi nella whitelist sono immuni dalle azioni di AdBlock ed i banner vengono mostrati regolarmente).
Perchè funzioni correttamente, il codice in questione va inserito a fondo pagina, subito prima della chiusura del tag BODY. E’ altresì necessario che il DIV contenitore non abbia un’altezza esplicita ma che questa dipenda esclusivamente dal suo contenuto.
E’ bene precisare, però, che questa tecnica ha un limite: se il banner non viene caricato per un problema di connessione con i server della concessionaria (se il server remoto non restituisce il codice banner il DIV resterà vuoto), l’utente potrebbe essere scambiato erroneamente per un utilizzatore di AdBlock quando in realtà non lo è.
Tecnica N.2 – Creare un finto script pubblicitario e verificare se viene effettivamente caricato oppure no
Una seconda tecnica, per verificare se il browser dell’utente integra o meno un AdBlock, consiste nel creare un finto script pubblicitario e verificare se viene eseguito o meno. Vediamo nel dettaglio come operare.
Per prima cosa creiamo uno script chiamato ads.js (nome molto comune e facilmente riconoscibile dagli AdBlock). Al suo interno inseriamo questo semplice codice javascript:
var ads = document.createElement('div');
ads.id = 'test-banner';
ads.style.display = 'none';
document.body.appendChild(ads);Ora includiamo questo codice a fondo pagina (prima della chiusura del tag BODY):
<script src="/ads.js"></script>
<script>
if (document.getElementById('test-banner') == null){
alert('Questo sito vive di pubblicità, per favore, disattiva AdBlock mettendoci in whitelist.');
}
</script>Il funzionamento è molto semplice: il codice inserito nel file ads.js dovrebbe creare dinamicamente un DIV nel DOM assegnandogli uno specifico ID. Subito dopo aver incluso ads.js lancio un secondo script che verifica se esiste o meno un elemento con l’ID specificato.
Se l’utente che visita il sito sta utilizzando l’AdBlock è praticamente certo che il file ads.js verrà bloccato e, di conseguenza, la verifica successiva ne rivelerà la presenza.
A differenza del metodo basato sull’altezza del DIV contenitore, questa tecnica non rischia di creare falsi positivi in quanto l’unico evento che può determinare l’assenza del DIV è, appunto, l’utilizzo di un AdBlock.
Tecnica N.3 – Utilizzare la libreria FuckAdBlock
Nonostante il nome poco elegante, la libreria FuckAdBlock è uno strumento decisamente affidabile e popolare per rilevare l’utilizzo o meno di AdBlock da parte degli utenti che visitano il nostro sito. La libreria è disponibile su GitHub a questa pagina.
L’utilizzo della libreria è piuttosto semplice: dopo averla scaricata ed importata all’interno del nostro spazio web, potremo includerla in questo modo:
<script src="fuckadblock.js"></script>Dopodichè potremo includere questo codice di controllo:
<script>
function adBlockDetected() {
alert('Questo sito vive di pubblicità, per favore, disattiva AdBlock mettendoci in whitelist.');
}
if(typeof fuckAdBlock === 'undefined') {
adBlockDetected();
} else {
fuckAdBlock.onDetected(adBlockDetected);
}
</script>Cosa fare quando l’utente ha AdBlock attivo?
Fino ad ora abbiamo visto come verificare se l’utente ha, o meno, AdBlock attivo. Ma cosa fare quando ci accorgiamo che, effettivamente, l’utente sta utilizzando AdBlock mentre visita il nostro sito web?
Ovviamente qui la scelta dipende da voi, le possibilità sono diverse, vediamole di seguito:
- oscurare il contenuto della pagina (inibendone la lettura) spiegando che ciò accade a causa dell’AdBlock;
- lasciare il contenuto visibile ma mostrare un messaggio in cui chiedere di disabilitare AdBlock e/o di mettere il nostro sito in whitelist cercando di spiegare all’utente il perché di questa richiesta;
- mostrare, all’interno degli spazi banner, un contenuto alternativo che in qualche modo generi un beneficio per noi (ad esempio annunci autopromozionali di servizi e/o consulenze a pagamento);
- impostare un contatore che prenda nota del numero di utenti e/o di pagine viste generate da utenti che utilizzano il sistema AdBlock (può essere un dato interessante su cui costruire strategie e regionamenti vari);
- contattare concessionarie pubblicitarie che gestiscono annunci alternativi non filtrati dalle regole di AdBlock;
I pro di ciascuna di queste azioni sono palesi: tentare di monetizzare meglio, piuttosto che non consentire a chi ci vuole visitare gratis di beneficiare dei nostri contenuti. I contro, invece, sono i seguenti:
- potrebbe essere un suicidio dal punto di vista SEO, poichè Google e gli altri motori di ricerca potrebbero interpretare quest’azione come un tentativo di disturbo alla navigazione… in sostanza, oltre al danno la beffa;
- è difficile sensibilizzare il lettore e di conseguenza è abbastanza improbabile che compia questa azione;
- per esperienza personale, "grossi affari" non se ne fanno;
- il fine è puramente statistico, per renderci conto dell’ordine di grandezza del "danno";
- nessun contro: è un modo per monetizzare, seppur minimamente, anche questo tipo di traffico.
Lascio a lettore la scelta sull’azione da compiere. Nel proseguo dell’articolo, tuttavia, vedremo come implementare queste diverse tecniche. Per i nostri esempi faremo riferimento allo script ads.js che abbiamo presentato come tecnica n.2 per l’identificazione degli utenti con AdBlock attivo.
Oscurare i contenuti del sito agli utenti che utilizzano AdBlock: realizzare un Anti-AdBlock!
Come abbiamo detto è possibile bloccare gli utenti con AdBlock attivo realizzando, quindi, una specie di Anti-AdBlock. Per attuare questa tecnica è necessario incapsulare i contenuti del sito all’interno di un elemento con un ID specifico, ad esempio:
<div id="contenuto-prezioso">
... contenuto del sito...
... contenuto del sito...
... contenuto del sito...
</div>A fondo pagina, prima della chiusura del tag BODY, andremo ad aggiungere questo codice:
<script src="/ads.js"></script>
<script>
if (document.getElementById('test-banner') == null){
// nascondo il contenuto
document.getElementById('contenuto-prezioso').style.display = 'none';
// mostro un avviso in cui spiego perchè i contenuti non sono visibili
alert('Se usi AdBlock non puoi leggere i contenuti di questo sito!');
}
</script>La soluzione proposta può essere implementata in modo molto più elegante, ovviamente. Lascio a voi questo codice come semplice spunto su cui lavorare, qualora siate interessati a questo tipo di approccio ovviamente. Come già detto, però, vi invito a valutare con attenzione quelli che potrebbero essere i rischi di un "Anti-AdBlock" anche da un punto di vista SEO, rischi che non posso confermare ma soltanto supporre.
Mostrare annunci autopromozionali al posto dei banner bloccati da AdBlock
Vediamo come mostrare degli annunci alternativi all’interno degli spazi banner lasciati vuoti da AdBlock.
<script src="/ads.js"></script>
<script>
if (document.getElementById('test-banner') == null){
// definisco un contenuto alternativo
var html1 = '<a href="/consulenza.html"><img src="/consulenza-superiore.jpg"></a>';
var html2 = '<a href="/consulenza.html"><img src="/consulenza-centrale.jpg"></a>';
var html3 = '<a href="/consulenza.html"><img src="/consulenza-laterale.jpg"></a>';
// mostro gli annunci alternativi all'interno delle varie posizioni banner del sito
document.getElementById('banner-superiore').innerHTML = html1;
document.getElementById('banner-centrale').innerHTML = html2;
document.getElementById('banner-laterale').innerHTML = html3;
}
</script>Misurare quanti utenti utilizzano AdBlock attraverso un contatore esterno
Sfruttando le potenzialità di Ajax è possibile misurare quanti utenti, tra quelli che visitano il nostro sito, fanno uso degli AdBlock. Vediamo un semplice esempio in puro Javascript:
<script src="/ads.js"></script>
<script>
var adblock = 0;
if (document.getElementById('test-banner') == null){
adblock = 1;
}
// richiamo un file PHP al cui interno andrò ad effettuare il conteggio
var conta = new XMLHttpRequest();
conta.open('GET','/stats-adblock.php', true);
conta.send('adblock=' + adblock);
</script>All’interno del file stats-adblock.php andremo ad implementare un semplice contatore che, ad esempio, memorizzerà in un database il numero di utenti che utilizzano AdBlock (adblock=1) rispetto al totale, magari suddividendoli su base giornaliera.
Inviare a Google Analytics i dati circa gli utenti con AdBlock
Un’altra interessante soluzione consiste nel gestire il conteggio attraverso il tracciamento degli eventi (event tracking) di Google Analytics. Vediamo il codice:
<script src="/ads.js"></script>
<script>
if (document.getElementById('test-banner') == null){
if(typeof ga !=='undefined'){
ga('send','event','AdBlock','Attivo',{'nonInteraction':1});
} else if(typeof _gaq !=='undefined'){
_gaq.push(['_trackEvent','AdBlock','Attivo',undefined,undefined,true]);
}
}
</script>Conclusioni
La diffusione degli AdBlock, purtroppo per noi editori, è in continua ascesa tanto da raggiungere, secondo alcune stime, numeri vicini al 30-35% (nei paesi tecnologicamente più evoluti). Ignorare il fenomeno AdBlock sarebbe sbagliato, pertanto ritengo opportuno consigliarvi di valutare con attenzione le diverse soluzioni proposte in questo articolo ed implementare un AdBlock Detector quanto prima, anche solo per misurare le dimensioni del fenomeno.
