Neste post do blog, aprenderemos como adicionar a detecção de AdBlocker ao seu blog Hugo usando o tema PaperMod. Também incluiremos uma mensagem simples de aviso para usuários que têm um ad-blocker ativado, encorajando-os a desativá-lo ou adicionar seu site à lista de permissões.

Visão geral

Aqui está uma visão geral rápida das etapas que iremos seguir:

  1. Crie um arquivo CSS personalizado para estilizar a mensagem de aviso.
  2. Crie um arquivo JavaScript para detectar ad-blockers.
  3. Adicione um arquivo HTML parcial para a mensagem de aviso.
  4. Estenda os parciais de cabeçalho e rodapé para incluir nossos novos arquivos.

Guia passo a passo

1. Crie um arquivo CSS personalizado

Crie um novo arquivo chamado custom_css.css no diretório assets/css/extended/ e cole o seguinte código CSS:

#adblock-warning {
  background-color: #f2dede;
  color: #a94442;
  border-color: #ebccd1;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

2. Crie um arquivo JavaScript para detectar ad-blockers

Crie um novo arquivo chamado adblock-detection.js no diretório static/js/ e cole o seguinte código JavaScript:

function detectAdBlocker() {
  const adBlockTest = document.createElement('div');
  adBlockTest.innerHTML = ' ';
  adBlockTest.className = 'ad ads adbadge doubleclick BannerAd adsbox ad-placeholder ad-placement';
  document.body.appendChild(adBlockTest);
  window.setTimeout(() => {
    if (adBlockTest.offsetHeight === 0) {
      document.getElementById('adblock-warning').style.display = 'block';
      console.log('Ad-blocker detected.');
    } else {
      console.log('No ad-blocker detected.');
    }
    adBlockTest.remove();
  }, 100);
}

window.addEventListener('load', detectAdBlocker);

3. Adicione um arquivo HTML parcial para a mensagem de aviso

Crie um novo arquivo chamado adblock-warning.html no diretório layouts/partials/ e cole o seguinte código HTML:

<div id="adblock-warning" style="display:none;">
  <p>Please consider disabling your ad-blocker or whitelisting our website. Ads help support our content and keep it free for everyone. Thank you!</p>
</div>

4. Estenda os parciais de cabeçalho e rodapé para incluir nossos novos arquivos

Edite o arquivo layouts/partials/extend_head.html e adicione a seguinte linha:

<link rel="stylesheet" href="{{ "css/extended/custom_css.css" | relURL }}">

Edite o arquivo layouts/partials/extend_footer.html e adicione a seguinte linha:

<script src="{{ "js/adblock-detection.js" | relURL }}" defer></script>

Conclusão

Com as etapas acima concluídas, você adicionou com sucesso a detecção de AdBlocker ao seu blog Hugo usando o tema PaperMod. Visitantes com um ad-blocker ativado agora verão uma mensagem de aviso educada encorajando-os a desativá-lo ou adicionar seu site à lista de permissões, ajudando a apoiar seu conteúdo e mantê-lo gratuito para todos.

Source code : https://github.com/hobbyworker/hugo-demo

Demo : https://hobbyworker.me/hugo-demo