Provavelmente você deve ter notado que muitos amigos / colegas de trabalho estão se rendendo ao uso de bloqueadores de anúncio em seus navegadores. Seja pela quantidade de anúncios em excesso ou até mesmo para evitar que sejam influenciados a realizarem compras em outros sites de tanto verem o tal anúncio.

Hoje eu venho dar uma dica bem interessante para que possa ajudar você a identificar se o acesso ao seu site/aplicação através do seu usuário esteja bloqueado seus anúncios ou parceiros.

Mas antes de começarmos, é interessante entendermos como esses plugins funcionam nos navegadores:

Como AdBlock funciona

Em poucas palavras, de duas formas:

  • Element hiding:

    O plugin atua ocultando elementos HTML que possivelmente contenham anúncios.

  • Request Blocking:

    O plugin atua bloqueando requisições que possivelmente contenham scripts que vão inserir anúncios (esse método deixa inclusive o carregamento das páginas bem mais rápido, pois impede que muitos scripts sejam carregados)

A solução

Sabemos que o AdBlock bloqueia requisições que contenham as palavras “ads” ou “prebid”, então a ideia é a seguinte:

Vamos criar pequeno arquivo chamado “prebid-ads.js” com o trecho de código abaixo dentro dele:

1var canRunAds = true;

E em algum trecho da sua página HTML, vamos inserir o codigo abaixo:

 1<html>
 2  <head>
 3    <script src="/js/prebid-ads.js"></script>
 4  </head>
 5  <body>
 6    <script>
 7      if( window.canRunAds === undefined ){
 8        // adblocker detectado, faça alguma coisa       
 9      }
10    </script>
11  </body>
12</html>

Bom, com o método acima, é possível detectar boa parte dos bloqueadores de anúncio mais famosos que temos atualmente. Agora, você pode exibir uma mensagem amigável ao seu usuário solicitando que ele habilite no seu site.

Dúvidas? Comente abaixo :)