Come bloccare il sito agli utenti che usano AdBlock
AdBlock elimina i banner di una pagina web. Gli utenti che utilizzano questa estensione del browser non visualizzano i messaggi pubblicitari Adsense ma soltanto il testo e i contenuti informativi della pagina.
Cosa può fare un editore? Può bloccare la visualizzazione dei contenuti del sito tramite javascript oppure utilizzare un servizio gratuito esterno come Block AdBlock.
In questo appunto descrivo come programmare un codice javascript per riconoscere la presenza di AdBlock e visualizzare un messaggio di alert sul browser dell'utente.
Metodo 1
Il codice è composto in tre parti e deve essere inserito nel documento Html delle pagine del sito web.
La prima parte del codice
Nella sezione HEAD del documento si richiama la libreria Ajax fornita da Googleapis.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
La seconda parte del codice
Il codice di un box advertising della pagina è racchiuso in un apposito contenitore <div> chiamato TestaAdv
<div class=TestaAdv" style=" margin:20px ">
<!-- Codice Advertising -->
</div>
La terza parte del codice
L'ultima parte del codice è una funzione JavaScript
<script type="text/javascript">
flag=0;
function TestaPagina(arg) {
if ($('.TestaAdv').height()<20){
flag=1;
return flag;
}
}
$(TestaPagina(flag));
if (flag==1) {
// URL dove reindirizzare il browser
location.href="http://www.andreaminini.com";
}
</script>
Come funziona lo script anti AdBlock
Lo script verifica l'altezza ( .height ) del tag DIV "TestaAdv", quello in cui è racchiuso l'annuncio pubblicitario.
- Se l'altezza del DIV è almeno venti, l'utente sta visualizzando l'annuncio pubblicitario. Lo script non fa nulla.
- Se l'altezza del DIV è inferiore a venti, qualcosa ha impedito la visualizzazione del banner. Lo script si attiva e reindirizza l'utente verso un'altra pagina o effettua un'altra operazione.
In questo modo, soltanto gli utenti con AdBlock disattivato possono accedere alla lettura del documento.
Esempio. Nella pagina web dove l'utente viene reindirizzato è pubblicato un messaggio dove si avvisa l'utente di disattivare AdBlock o aggiungere il sito web alla lista delle eccezioni di AdBlock.
Se l'utente vuole leggere il contenuto della pagina deve aggiungere il sito web alla lista delle eccezioni di AdBlock.
Le alternative al redirect: un messaggio che oscura soltanto una parte dello schermo
In alternativa al redirect si può visualizzare un messaggio pop-up che oscura metà dello schermo e invita l'utente a disattivare AdBlock.
Per visualizzare un messaggio pop-up è sufficiente sostituire l'ultima istruzione IF con il seguente codice:
if (flag==1) document.write("<div style=z-index: 99; position:fixed; top:100px; background-color: #cccccc; height:400px; width:100%;'> disattiva AdBlock per leggere questa pagina </div>");
L'istruzione document.write visualizza il messaggio dentro un contenitore DIV che si sovrappone parzialmente ai contenuti del sito web.
In questo modo, l'utente vede soltanto una parte dei contenuti sullo schermo.
Se reputa i contenuti di qualità e il sito web affidabile, lo inserisce nelle eccezioni di AdBlock.
Metodo 2
Un'altra soluzione per intercettare la presenza di AdBlock Plus sul browser dell'utente è la seguente.
Nella pagina web richiamo un file javascript esterno chiamato advertisement.js.
All'interno del file javascript inserisco una semplice istruzione per scrivere qualcosa a video.
document.write('<div id="tester">an advertisement</div>');
Nella sezione Head del documento Html della pagina web richiamo il file javascript appena creato.
<script type="text/javascript" src="/advertisement.js"></script>
Creo una regola CSS per inibire la visualizzazione della classe #tester per non farla visualizzare agli utenti.
Nella pagina web inserisco un codice per verificare se la classe #tester è definita
<script type="text/javascript"> if (document.getElementById("tester") != undefined) {
document.write('');
} else {
document.write("<div style=z-index: 99; position:fixed; top:100px; background-color: #cccccc; height:400px; width:100%;'> disattiva AdBlock per leggere questa pagina </div>");;
}
</script>
Se la classe #tester non è definita, il codice javascript visualizza un messaggio per invitare l'utente a disattivare AdBlock.
Il risultato finale è lo stesso.
