En esta publicación del blog, aprenderemos cómo agregar la detección de AdBlocker a tu blog de Hugo utilizando el tema PaperMod. También incluiremos un mensaje de advertencia simple para los usuarios que tengan habilitado un bloqueador de anuncios, alentándolos a desactivarlo o agregar tu sitio web a su lista blanca.

Visión general

Aquí hay una descripción general rápida de los pasos que seguiremos:

  1. Crear un archivo CSS personalizado para dar estilo al mensaje de advertencia.
  2. Crear un archivo JavaScript para detectar bloqueadores de anuncios.
  3. Agregar un archivo HTML parcial para el mensaje de advertencia.
  4. Extender los parciales de encabezado y pie de página para incluir nuestros nuevos archivos.

Guía paso a paso

1. Crear un archivo CSS personalizado

Crea un nuevo archivo llamado custom_css.css dentro del directorio assets/css/extended/ y pega el siguiente 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. Crear un archivo JavaScript para detectar bloqueadores de anuncios

Crea un nuevo archivo llamado adblock-detection.js dentro del directorio static/js/ y pega el siguiente 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. Agregar un archivo HTML parcial para el mensaje de advertencia

Crea un nuevo archivo llamado adblock-warning.html dentro del directorio layouts/partials/ y pega el siguiente 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. Extender los parciales de encabezado y pie de página para incluir nuestros nuevos archivos

Edita el archivo layouts/partials/extend_head.html y agrega la siguiente línea:

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

Edita el archivo layouts/partials/extend_footer.html y agrega la siguiente línea:

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

Conclusión

Con los pasos anteriores completados, has agregado exitosamente la detección de AdBlocker a tu blog de Hugo utilizando el tema PaperMod. Los visitantes con un bloqueador de anuncios habilitado ahora verán un mensaje de advertencia educado que los alienta a desactivarlo o agregar tu sitio web a su lista blanca, ayudando a apoyar tu contenido y mantenerlo gratuito para todos.

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

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