このブログ記事では、PaperModテーマを使用してHugoブログにAdBlocker検出機能を追加する方法を学びます。広告ブロッカーを有効にしたユーザーに対して、無効化するかサイトをホワイトリストに登録するように促す、簡単な警告メッセージを含めます。

概要

以下は、私たちが行う手順の概要です：

  1. 警告メッセージのスタイルを指定するためのカスタムCSSファイルを作成します。
  2. 広告ブロッカーを検出するためのJavaScriptファイルを作成します。
  3. 警告メッセージ用のpartial HTMLファイルを追加します。
  4. headとfooterのpartialsを拡張して、新しいファイルを含めます。

ステップバイステップのガイド

1. カスタムCSSファイルの作成

assets/css/extended/ディレクトリにcustom_css.cssという新しいファイルを作成し、以下のCSSコードを貼り付けます：

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

2. 広告ブロッカーを検出するJavaScriptファイルの作成

static/js/ディレクトリにadblock-detection.jsという新しいファイルを作成し、以下の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. 警告メッセージ用のpartial HTMLファイルの追加

layouts/partials/ディレクトリにadblock-warning.htmlという新しいファイルを作成し、以下の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. headとfooterのpartialsを拡張して、新しいファイルを含める

layouts/partials/extend_head.htmlファイルを編集し、以下の行を追加します：

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

layouts/partials/extend_footer.htmlファイルを編集し、以下の行を追加します：

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

結論

上記の手順を完了することで、PaperModテーマを使用してHugoブログにAdBlocker検出機能を正常に追加しました。広告ブロッカーを有効にした訪問者は、サイトをホワイトリストに登録するか、広告ブロッカーを無効にするように促され、コンテンツをサポートし、誰にでも無料で提供できるようになります。

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

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