개요
몇몇 사이트에 애드블록을 사용한 채 방문하면 콘텐츠가 보이지 않거나 비활성화되면서 애드블록을 비활성화하면 정상 접속이 가능하다는 안내가 표시됩니다.
이번 포스트에서는 개인적인 호기심으로 이것을 어떻게 작동하는지 확인한 내용을 정리해보도록 하겠습니다.
애드블록(Adblock) 사용여부 감지하기
방문자가 애드블록을 사용하고 있는지 감지하는 방법을 구현한 JavaScript 모듈의 내용을 살펴보았습니다.
요약하면 감지방법은 일단 자체적인 가짜 광고 DOM을 생성하고 (class 등의 속성을 널리 쓰이는 광고의 값으로 설정 및 ad와 같은 keyword를 삽입) 이것을 잠시 후 확인하여 제거되었을 경우 방문자가 애드블록을 사용하고 있다고 판단하는 것입니다.
티스토리에 적용하기
JavaScript로 구현된 모듈을 티스토리에서도 불러와 사용할 수 있습니다.
티스토리의 관리자 페이지로 접속하여 좌측의 꾸미기 -> 스킨 편집 메뉴로 접속합니다.
우측의 스킨 편집 창의 html 편집 버튼을 클릭하여 html 편집 화면으로 이동합니다.
html 편집 화면에 하단에 링크의 예시 코드를 복사하여 삽입합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/blockadblock/3.2.1/blockadblock.js" integrity="sha256-uaQssnQX0rh7jVmDZVVmcxo4CJ1eMHNenpMQCOpZxjQ=" crossorigin="anonymous"></script>
<script>
// Function called if AdBlock is not detected
function adBlockNotDetected() {
console.log('AdBlock is not enabled');
}
// Function called if AdBlock is detected
function adBlockDetected() {
console.log('AdBlock is enabled');
}
// Recommended audit because AdBlock lock the file 'blockadblock.js'
// If the file is not called, the variable does not exist 'blockAdBlock'
// This means that AdBlock is present
if(typeof blockAdBlock === 'undefined') {
adBlockDetected();
} else {
blockAdBlock.onDetected(adBlockDetected);
blockAdBlock.onNotDetected(adBlockNotDetected);
// and|or
blockAdBlock.on(true, adBlockDetected);
blockAdBlock.on(false, adBlockNotDetected);
// and|or
blockAdBlock.on(true, adBlockDetected).onNotDetected(adBlockNotDetected);
}
</script>애드블록 사용자의 접속을 기록하기
일반적으로는 앞서 개요에서 기술한 것과 같이 애드블록이 감지되면 사이트의 콘텐츠에 접근할 수 없도록 하여 예외 리스트에 추가하도록 유도하겠지만 제 블로그는 독창적인 콘텐츠가 있는 것도 아니기에 그러한 제약은 방문하지 않는 쪽으로 이어질 것이라 판단하여 일단은 단지 통계를 내는데 활용할 계획입니다.
구글 애널리틱스를 사용하면 사용자가 블로그에서 하는 모든 행동을 기록할 수 있습니다. 이벤트 추적이라고 부르는 것으로 우리는 애드블록의 감지 여부에 대하여 기록하도록 하겠습니다.
앞서 추가하였던 애드블록 사용 감지 코드 항목에 감지 시 구글 애널리틱스에 로깅을 하도록 코드를 추가합니다.
// Function called if AdBlock is not detected
function adBlockNotDetected() {
console.log('AdBlock is not enabled');
try{
ga('send', 'event', 'adblock', 'disabled' );
} catch(e) {console.error(e)}
}
// Function called if AdBlock is detected
function adBlockDetected() {
console.log('AdBlock is enabled');
try{
ga('send', 'event', 'adblock', 'enabled' );
} catch(e) {console.error(e)}
}해당 코드는 event 가 발생하면 adblock 이라는 카테고리의 enabled 및 enabled 두 가지 액션 값으로 구글 애널리틱스에 전송하라는 의미의 코드입니다. 이에 대한 상세한 내용은 포스트 하단의 참고 링크를 확인합니다.
이제 구글 애널리틱스에서 로깅된 이벤트를 확인할 수 있습니다.
현재 방문자의 애드블록 사용 여부는 보고서 -> 실시간 -> 이벤트에서 확인할 수 있습니다.
지난 방문자의 애드블록 사용여부는 보고서 -> 행동 -> 이벤트 -> 개요에서 확인할 수 있습니다.
참고
'티스토리' 카테고리의 다른 글
| [애드센스] 제작 중인 사이트 또는 앱에 대한 자리표시자 콘텐츠를 포함하는 콘텐츠가 없습니다? (0) | 2021.02.06 |
|---|
