댓글 검색 목록

[javascript] JavaScript를 사용하여 Adblocker이 사용되고 있는지 감지하는 방법

페이지 정보

작성자 운영자 작성일 20-05-12 22:58 조회 899 댓글 0

애드 블로커가 사용되고 있음을 알고 있는 경우 사이트에 내 광고를 추가하는 데 사용하는 전략

프로슈머 및 프로그래머와 같은 기술 담당자가 애드 블로커를 사용하는 것이 일반적입니다.

내 웹 사이트에서 방문자의 약 20 %에서 25 %가 일종의 애드 블로커를 사용하는 것으로 추정됩니다.

광고를 사용하여 블로그를 지원한다고 해도 문제는 없지만 Adblocker를 사용하도록 설정 한 경우에만 내 제품 중 하나를 홍보하는 것이었습니다. 따라서 Carbon에서 광고를 볼 수 없습니다. 네트워크를 사용하지만 홍보하고 싶은 링크가 있습니다.

https://flaviocopes.com/how-to-detect-adblocker/

이 기술이 '애드 블로커 사용 중지'를 표시하는 데 사용되는 것을 보고 싶지 않습니다. 내가 사용하는 것을 볼 때 성가신 것을 발견하기 때문에 일종의 메시지. 그렇다면 다른 사람의 제품을 광고하는 대신 자신의 제품을 홍보하는 옵션을 고려하십시오.

지금 바로 애드 블로커를 사용하도록 설정 한 경우 제목 바로 뒤에 '스폰서'가 표시됩니다. 즉, 제가 홍보하려는 제품입니다. 현재 개발 중인 제품이며 몇 명의 사람들이 서명했는지 확인하여 아이디어를 테스트하고 있습니다 대기자 명단까지

애드 블로커가 없으면 그 장소는 광고로 바쁘기 때문에 동시에 너무 많은 광고를 갖고 싶지 않아 이 블로그를 계속 운영하는 데 도움이 되는 좋은 사람들에게 경험을 허물고 싶지 않습니다.

이 JavaScript 스니펫은 작업을 수행하는 데 도움이 됩니다.

let adBlockEnabled = false
const ad = document.createElement('div')
ad.innerHTML = '&nbsp;'
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)
}