Pubblicato il

guida

bloccare

scoprire

adblock

sito

javascript

come scoprire e bloccare gli utenti che utilizzano adblock sul mio sito

Ciao a tutti e benvenuti in questa nuova guida dove vi mostrerò come bloccare i visitatori del vostro sito che utilizzano AdBlock.

Ormai sono molti i siti che bloccano il proprio contenuto agli utenti che utilizzano AdBlock. Questo è dato dal fatto che la maggior parte dei siti ricavano una grande percentuale dei loro guadagni dalle pubblicità. Bloccare completamente gli utenti che utilizzano AdBlock dal visualizzare il contenuto del proprio sito, nella mia opinione è un metodo un po’ drastico che potrebbe portare ad un calo di traffico. Preferirei invece mostrare un piccolo pop-up o un testo che inviti il visitatore a disattivare AdBlock.

Ma la scelta è vostra ed in questa guida vi mostrerò come fare entrambe le cose :)

Questa guida sarà divisa in tre parti:

  1. Come utilizzare JavaScript per scoprire se qualcuno usa adblock sul browser
  2. Come bloccare l’utente che fa uso di adblock dal visualizzare un post
  3. Come mostrare un messaggio all’utente che utilizza adblock

Cominciamo subito con la guida :)

Come scoprire chi utilizza adblock sul mio sito

Per scoprire chi dei vostri visitatori fa un utilizzo di un programma AdBlock, basta utilizzare un semplice codice JavaScript. Questo codice creerà un div con classe ‘adsbox’ e lo inserirà nel DOM della vostra pagina. 

Come fanno gli adBlock a sapere quali contenuti bloccare e quali lasciare? Quasi tutti gli adblock moderni bloccano dei div contenenti parole chiavi del tipo ‘ads’, ‘add’, ‘adverts’, etc. Con il nostro codice JS andiamo a vedere se questo div con classe adsbox sia stato bloccato, ovvero controlliamo se la sua altezza è uguale a 0.

Ecco il codice per scoprire se un visitatore stia utilizzando AdBlock.

var adBlockEnabled = false;
var testAd = document.createElement('div');
testAd.innerHTML = ' ';
testAd.className = 'adsbox';
document.body.appendChild(testAd);
window.setTimeout(function() {
    if (testAd.offsetHeight === 0) {
        // adblock è attivo
        adBlockEnabled = true;
    }
    testAd.remove();
    console.log('AdBlock Enabled? ', adBlockEnabled);
    document.getElementById("status").innerHTML = adBlockEnabled;
}, 100);


Questo codice potrebbe non funzionare se eseguito in locale. Quindi ho incluso un JSFiddle per mostrarvi il corretto funzionamento del codice JS. 

Potete navigare alla sezione result, per vedere se il codice funziona (provate sia con adblock attivo che disattivato) 

Come bloccare gli utenti che usano AdBlock dal vedere il mio sito?

Una volta scoperto se un utente utilizzi o no un AdBlock, potete gestire la risposta a questo evento nel modo in cui volete. In questo caso vediamo come bloccare chi utilizza AdBlock e mostrare una pagina che richiedi all’utente di disattivarlo.

Il moto più facile per mostrare un contenuto diverso a chi utilizza AdBlock è di avere una pagina dedicata alla richiesta di disattivazione.

Create questa pagina sul vostro server annotando l'url della pagina, ed in seguito modificate il codice JavaScript precedente, aggiungendo un redirect alla vostra nuova pagina di avviso.

Il codice modificato dovrebbe avere una forma del genere:

var adBlockEnabled = false;
var testAd = document.createElement('div');
testAd.innerHTML = ' ';
testAd.className = 'adsbox';
document.body.appendChild(testAd);
window.setTimeout(function() {
    if (testAd.offsetHeight === 0) {
        // adblock è attivo
        adBlockEnabled = true;
        window.location.replace("https://devnews.it");
    }
    testAd.remove();
    console.log('AdBlock Enabled? ', adBlockEnabled);
    document.getElementById("status").innerHTML = adBlockEnabled;
}, 100);


Dovrete sostituire il link di window.location.replace con l'url della vostra pagina appena creata

Come mostrare un messaggio a chi utilizza AdBlock sul mio sito?

Se volete invece optare per l’opzione meno drastica potete mostrare tramite JavaScript un messaggio ai visitatori che hanno AdBlock. Questo messaggio può essere del tipo:

Ciao, ho notato che fai utilizzo di un adblocker. Qui a fantasticicalzini.com guadagniamo solamente dalle pubblicità, se vuoi contribuire al nostro progetto ed aiutarci a continuare nel nostro lavoro, ci faresti un grandissimo favore disattivando l’adblock. Ecco come: <link>

Per mostrare un messaggio agli utenti che utilizzano AdBlock, uno dei metodi più comuni è  inserire il div con il messaggio / immagine sotto alla pubblicità. Questo fa si che quando l’adblock rimuove la pubblicità, il messaggio verrà rivelato. 

Un’altra soluzione è quella di creare un div con posizione assoluta che sia invisibile di default. Nel caso in cui viene rivelato un uso di AdBlock potete cambiare la trasparenza del div e mostrare il vostro messaggio. Ecco un esempio fatto con JSFiddle:


Spero che questa guida vi sia stata di aiuto e che abbiate capito come bloccare gli utenti che utilizzano AdBlock sul vostro sito. Se avete qualsiasi domanda su AdBlock, JS o altro commentate e vi risponderò appena posso. Ci vediamo alla prossima :)

Se hai una domanda puoi farla anche nella sezione commenti in basso

Grazie per aver letto questa guida suDevnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)

Devnews

Devnews