Dalam postingan blog ini, kita akan belajar cara menambahkan deteksi AdBlocker ke blog Hugo Anda menggunakan tema PaperMod. Kita juga akan menyertakan pesan peringatan sederhana bagi pengguna yang memiliki ad-blocker aktif, mendorong mereka untuk menonaktifkan atau memasukkan website Anda ke dalam daftar putih.

Gambaran

Berikut adalah gambaran singkat tentang langkah-langkah yang akan kita lakukan:

  1. Buat file CSS kustom untuk mengatur tampilan pesan peringatan.
  2. Buat file JavaScript untuk mendeteksi ad-blocker.
  3. Tambahkan file HTML parsial untuk pesan peringatan.
  4. Perluas bagian kepala dan footer untuk mencakup file baru yang kita buat.

Panduan langkah demi langkah

1. Buat file CSS kustom

Buat file baru dengan nama custom_css.css di bawah direktori assets/css/extended/ dan tempelkan kode CSS berikut:

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

2. Buat file JavaScript untuk mendeteksi ad-blocker

Buat file baru dengan nama adblock-detection.js di bawah direktori static/js/ dan tempelkan kode JavaScript berikut:

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. Tambahkan file HTML parsial untuk pesan peringatan

Buat file baru dengan nama adblock-warning.html di bawah direktori layouts/partials/ dan tempelkan kode HTML berikut:

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

Edit file layouts/partials/extend_head.html dan tambahkan baris berikut:

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

Edit file layouts/partials/extend_footer.html dan tambahkan baris berikut:

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

Kesimpulan

Dengan menyelesaikan langkah-langkah di atas, Anda telah berhasil menambahkan deteksi AdBlocker ke blog Hugo Anda menggunakan tema PaperMod. Pengunjung dengan ad-blocker aktif sekarang akan melihat pesan peringatan yang sopan, mendorong mereka untuk menonaktifkan atau memasukkan website Anda ke dalam daftar putih, membantu mendukung konten Anda dan menjaga agar tetap gratis untuk semua orang.

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

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