AdblockerがJavaScriptで使用されているかどうかを検出する方法

アドブロッカーが使用されていることがわかっている場合に、自分の広告をサイトに追加するために使用する戦略

プロシューマーやプログラマーのような技術者がアドブロッカーを使用することはかなり一般的です。

私のウェブサイトでは、訪問者の約20%から25%が何らかのアドブロッカーを使用していると推定しています。

広告を使用してブログをサポートしていても問題はありませんが、アドブロッカーが有効になっている場合にのみ製品の1つを宣伝して、Carbonからの広告が表示されないようにしました。私が使用しているネットワークですが、宣伝したいものへのリンクです。

このテクニックが「アドブロッカーを無効にする」ことを示すために使用されるのを見たくありません。使用されているのを見ると迷惑だと思うので、一種のメッセージです。その場合は、他の人の製品を宣伝するのではなく、自分の製品を宣伝するオプションを検討してください。ただのアイデア。

現在アドブロッカーを有効にしている場合は、タイトルの直後に「スポンサー」が表示されます。これは私が宣伝したい製品です。現在作成しているもので、署名する人の数を確認してアイデアをテストしています。順番待ちリストまで。

アドブロッカーがなければ、その場所は広告で忙しいので、同時にあまりにも多くの広告を持ち、このブログの運営を維持するのに役立つ素敵な人々の体験を損なうことはしたくありません。

このJavaScriptスニペットは、私がそのことを行うのに役立ちます。

let adBlockEnabled = false
const ad = document.createElement('div')
ad.innerHTML = ' '
ad.className = 'adsbox'
document.body.appendChild(ad)
window.setTimeout(function() {
  if (ad.offsetHeight === 0) {
    adblockEnabled = true
  }
  ad.remove()
  console.log('Blocking ads? ', adblockEnabled)
  }
}, 100)

DOMがロードされたときに実行するには、ページの下部に配置するか、DOMContentLoadedイベント

あなたが知ったらadblockEnabled値、あなたはあなた自身のカスタム広告をページに加えることができます。

これを行うために使用するスクリプトは次のとおりです。

if (adblockEnabled) {
  const link = document.createElement('a')
  link.setAttribute('href', 'https://prototyped.dev')
  link.setAttribute('target', '_blank')
  const img = document.createElement('img')
  img.src  = '/img/prototyped.png'
  img.style.paddingBottom = '30px'
  img.style.margin = '0 auto'
  img.style.maxWidth="65%";
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    img.style.filter="invert(100%)"
  }
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
      const newColorScheme = e.matches ? "dark" : "light"
      if (newColorScheme === 'light') {
        img.style.filter = ''
      } else {
        img.style.filter="invert(100%)"
      }
  })
  link.appendChild(img)
  document.querySelector('.prototyped').classList.remove('hidden')
  document.querySelector('.prototyped').appendChild(link)
}

画像を読み込んで、ダークモードの場合は反転し、リンクにしますhttps://prototyped.devウェブサイト、私がテストしている新しいアイデア、そして私はそれをページに追加します。

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: