Dans cet article de blog, nous allons apprendre comment ajouter une détection de bloqueur de publicités à votre blog Hugo en utilisant le thème PaperMod. Nous inclurons également un simple message d’avertissement pour les utilisateurs qui ont un bloqueur de publicités activé, les encourageant à le désactiver ou à ajouter votre site à leur liste blanche.

Vue d’ensemble

Voici un aperçu rapide des étapes que nous allons suivre:

  1. Créer un fichier CSS personnalisé pour styliser le message d’avertissement.
  2. Créer un fichier JavaScript pour détecter les bloqueurs de publicités.
  3. Ajouter un fichier HTML partiel pour le message d’avertissement.
  4. Étendre les partiels head et footer pour inclure nos nouveaux fichiers.

Guide étape par étape

1. Créer un fichier CSS personnalisé

Créez un nouveau fichier nommé custom_css.css sous le répertoire assets/css/extended/ et collez le code CSS suivant:

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

2. Créer un fichier JavaScript pour détecter les bloqueurs de publicités

Créez un nouveau fichier nommé adblock-detection.js sous le répertoire static/js/ et collez le code JavaScript suivant:

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. Ajouter un fichier HTML partiel pour le message d’avertissement

Créez un nouveau fichier nommé adblock-warning.html sous le répertoire layouts/partials/ et collez le code HTML suivant:

<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>

Modifiez le fichier layouts/partials/extend_head.html et ajoutez la ligne suivante:

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

Modifiez le fichier layouts/partials/extend_footer.html et ajoutez la ligne suivante:

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

Conclusion

Avec les étapes ci-dessus terminées, vous avez réussi à ajouter une détection de bloqueur de publicités à votre blog Hugo en utilisant le thème PaperMod. Les visiteurs ayant un bloqueur de publicités activé verront maintenant un message d’avertissement poli les encourageant à le désactiver ou à ajouter votre site à leur liste blanche, contribuant ainsi à soutenir votre contenu et à le maintenir gratuit pour tout le monde.

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

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