By aPOST in 티스토리스킨 — 2023년 12월 23일

광고차단앱(애드블록) 디텍터로 티스토리 블로그에 광고차단 해제 안내 문구를 표시하기

티스토리 블로그 운영자들의 주 수입원은 애드센스입니다.

애드블록이나 애드블록플러스같은 광고차단 확장 프로그램들은 이런 광고를 차단해서 블로그에 광고가 노출되지 않게 합니다.

전체 브라우저 사용자의 최대 10% 정도가 이런 광고차단앱을 사용하는 것으로 알려지고 있습니다.

광고차단 확장 프로그램, 또는 앱을 사용하는 방문자의 광고차단 앱을 정지시킬 수는 없지만

광고차단앱을 사용하는 방문자들에게 광고차단앱 해제를 요청하는 문구를 표시하는 식으로 광고차단앱 해제를 정중히 요청할 수는 있습니다.

아래 소스는 광고차단앱을 인식해 안내 문구를 표시해주는 기능을 하는 간단한 스크립트입니다.

티스토리 스킨 편집기로 들어갑니다.

오른쪽 상탄 탭의 "HTML"을 클릭해 HTML 소스를 연 후

<body> 태그를 찾아

그 바로 밑에

<div id="adblocktestdiv"> <div class="adbanner"></div> <div class="adsbanner_message">이 블로그는 애드센스 수익으로 운영되고 있습니다.<br/>광고차단앱을 해제해주시면 블로그 운영에 큰 도움이 됩니다. </div></div>

내용을 추가합니다.

텍스트 문구는 적당한 것으로 수정하면 됩니다.

변경하면 안되는 것은

class="adbanner" 입니다.

나머지 id와 클래스 명은 아래 변경하는 CSS와 자바스크립트에서 동일하게 이름만 맞춰주면 됩니다.

중복되는 클래스명이 있는 경우에만 변경하시고, 그렇지 않으면 그냥 복붙으로 사용하는걸 추천합니다.

CSS 소스에는

.adbanner { background-color: transparent; height: 1px; width: 1px;}.adsbanner_message{ display: none; margin-bottom: 20px; padding: 10px 10px; background: #f0f0f0; text-align: center; font-size:0.9em; line-height:1.1em; color: #666;}

을 추가합니다.

아래 예에 있지만, 배경색을 빨강색으로 해서 잔인하게 경고성 문구로 보이게 할 수도 있습니다. 절대 비추이기는 합니다.

그다음으로 자바스크립트 파일에 아래 내용을 추가합니다.

대부분의 티스토리 스킨은 "images" 폴더 밑에 "script.js" 파일로 자바스크립트 기본 코드가 존재합니다.

script.js 파일을 다운로드 받아 아래 코드를 밑 끝에 추가한 후 다시 업로드 합니다.

$(document).ready(function(){ if($("#adblocktestdiv").height() > 0) { $('.adsbanner_message').hide(); } else { $('.adsbanner_message').show(); }});

웹브라우저 캐시 소거를 한 번 합니다.

이전 자바스크립트 코드 캐시가 남아 정상 동작하지 않는 경우가 있을 수 있습니다.

정상적으로 적용했으면 애드블록이나 애드블록플러스 같은 광고차단앱으로 광고 차단이 될 경우 아래같은 문구가 블로그 최상단에 표시됩니다.

또는 CSS 배경색 등을 조금 조정해주면

아래처럼 조금은 잔인한 모양으로 표시가 되게 할 수도 있습니다.

선택은 개인의 몫입니다.

저는 사용하고 있지 않습니다.

광고같은건 보고 싶지 않은 개인의 선택을 존종해서입니다.

광고차단앱 해제 문구를 표시하는 것은 가능하면 신중하게 해주시기 바랍니다.

방문자에게 불쾌감을 줄 수도 있고, 경우에 따라서는 방문자 이탈율이 높아지게 하는 원인이 될 수도 있습니다.