Uma das regras tácitas da Internet é que a maior parte do conteúdo é “gratuita”… ao custo de uma página da Web repleta de anúncios e rastreadores. Isso não era um grande problema nos primórdios da Internet, mas os rastreadores e os anúncios se tornaram tão intrusivos e agressivos que o senhor quase precisa usar uma extensão de navegador bloqueadora de anúncios.

O Ad Blocker Plus é extremamente popular e um navegador como o Brave se gaba de ser centrado no bloqueio de anúncios. Muitas vezes, vou a um site e vejo um modal pedindo para desativar meu bloqueador de anúncios, o que me fez pensar na melhor maneira de detectar um bloqueador de anúncios. Depois de vários testes e experiências, encontrei uma maneira muito simples de detectar um bloqueador de anúncios!

Essencialmente, meu método tenta carregar o arquivo JavaScript do serviço de anúncios do Google e, se a solicitação falhar, é provável que o usuário tenha um bloqueador de anúncios:

// Determines if the user is likely using an ad block extension
async function checkAdBlocker() {
  // Used to cache the result
  let isBlocked;

  async function tryRequest() {
    try {
      return fetch(
        new Request("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", {
          method: 'HEAD',
          mode: 'no-cors'
        }))
        .then(function(response) {
          // Google Ads request succeeded, so likely no ad blocker
          isBlocked = false;
          return isBlocked;
        }).catch(function(e) {
          // Request failed, likely due to ad blocker
          isBlocked = true;
          return isBlocked;
        });
    } catch (error) {
      // fetch API error; possible fetch not supported (old browser)
      // Marking as a blocker since there was an error and so
      // we can prevent continued requests when this function is run
      console.log(error);
      isBlocked = true;
      return isBlocked;
    }
  }

  return isBlocked !== undefined ? isBlocked : await tryRequest();
}

// Using the ad block checker
const usingBlocker = await checkAdBlocker();

A lógica por trás disso é a seguinte:

  • Arquivo de anúncios do Google, adsbygoogle.jsé o arquivo de amostra perfeito, pois é considerado o inimigo número 1, o primeiro arquivo que um bloqueador de anúncios desejaria bloquear devido à popularidade do serviço de anúncios do Google
  • O arquivo também é fundamental para os negócios do Google, portanto, 99,999999999% de tempo de atividade é praticamente garantido
  • Há pouca chance de um problema de rede entrar em jogo; falsos positivos podem vir de problemas de conectividade de rede ou de um mau trabalhador de serviço
  • Se o senhor não considerar adsbygoogle.js seu melhor arquivo de amostra, o senhor pode facilmente trocá-lo por qualquer outro URL

Do ponto de vista do criador de conteúdo, um navigator que permitisse saber se um bloqueador de anúncios foi usado seria o ideal… mas isso não vai acontecer tão cedo (… nunca, na verdade). O uso de trechos simples como esse, no entanto, fornece uma dica razoável para que o usuário ative um bloqueador de anúncios!

  • buscar API

    Um dos segredos mais mal guardados sobre AJAX na Web é que a API subjacente a ele, XMLHttpRequest, não foi realmente criada para o uso que estamos fazendo dela. Fizemos bem em criar APIs elegantes em torno do XHR, mas sabemos que podemos fazer melhor. Nosso esforço para…

  • Crie classes com espaço de nome com o MooTools

    O MooTools sempre foi um pouco criticado por não usar e padronizar inerentemente classes JavaScript baseadas em namespaced, como faz o Dojo Toolkit. Muitos desenvolvedores criam suas classes como globais, o que geralmente é mal visto. Na maioria das vezes, não concordo com essa posição, mas cada um tem a sua. De qualquer forma…

  • Cálculo do CSS

    O CSS é um enigma completo; todos nós apreciamos o CSS por causa de sua simplicidade, mas sempre desejamos que a linguagem faça um pouco mais. O CSS evoluiu para acomodar marcadores de posição, animaçõese até mesmo clique em eventos. Um problema que sempre pensamos…

  • MooTools Accordion: estilo de passar o mouse

    Todos adoram o plug-in MooTools Accordion, mas recebo muitas solicitações de leitores que me perguntam como fazer com que cada item do acordeão seja aberto quando o usuário passa o mouse sobre o item, em vez de fazer com que o usuário clique. O senhor tem duas opções: hackear o plug-in original…