워드프레스 애드블록 감지 플러그인 및 JS 스크립트

애드센스 수익을 위해 워드프레스 블로그나 티스토리를 운영하는 분들이 많을 것입니다. 하지만 많은 사용자가 광고 차단 프로그램인 애드블록을 사용하여 광고를 차단하고 있습니다. 통계에 의하면 전세계 인터넷 사용자의 32.8%가 애드블록을 사용하고 있다고 합니다.

애드블록 사용은 구글 애드센스와 같은 온라인 광고 플랫폼을 통한 웹사이트 수익 창출에 상당한 영향을 미칠 수밖에 없습니다. 애드블록은 사용자가 웹사이트를 방문할 때 광고를 차단하여 광고가 표시되지 않게 함으로써, 웹사이트 소유자가 광고 조회수나 클릭을 통해 수익을 얻는 기회를 감소시킵니다.

애드블록 사용자 증가는 특히 광고 수익에 크게 의존하는 블로거들에게 심각한 문제가 될 수 있으며, 광고 수익의 감소는 콘텐츠 제작자와 퍼블리셔가 고품질 콘텐츠 제작에 필요한 자금을 확보하는 데 어려움을 초래할 수 있습니다.

워드프레스에서는 플러그인을 사용하여 애드블록에 대응할 수 있습니다. 일부 티스토리 블로그나 워드프레스 사이트를 방문할 때 애드블록이 활성화되어 있으면 광고를 허용해줄 것을 요구하는 경고가 표시되는 경우가 있습니다. 이러한 경고는 사용자 이탈을 초래하여 SEO(검색엔진 최적화)에 부정적으로 작용할 수 있기 때문에 이러한 기능 사용 여부를 신중하게 판단하는 것이 좋습니다.

워드프레스 애드블록 감지 플러그인 및 자바스크립트

워드프레스에서는 몇 가지 플러그인에서 애드블록을 감지하여 경고를 표시하는 기능을 제공합니다.

오래 전에 이 블로그에서 광고 차단기에 효과적으로 대응할 수 있는 Adblock Notify Lite 플러그인을 소개한 적이 있습니다. 하지만 이 플러그인은 5년 이상 업데이트가 안 되고 방치되고 있네요. 플러그인을 통해 수익을 얻거나 보상을 받을 수 있다면 시간을 들여서 지속적으로 업데이트할 수 있지만, 그렇지 않은 경우 방치되다 사라지는 경우가 많습니다.

Ad Inserter 광고 관리 플러그인의 광고 차단 기능

워드프레스 광고 관리 플러그인인 Ad Inserter를 사용하는 경우 Ad Inserter에 탑재된 광고 차단 기능을 사용하면 추가적인 플러그인 설치 없이 애드블록에 대응할 수 있습니다.

설정 » Ad Inserter로 이동한 다음, 상단 맨 오른쪽의 설정 아이콘(톱니바퀴 모양의 아이콘)을 클릭하고 Ad Blocking 탭을 눌러 광고 차단 감지 기능을 활성화할 수 있습니다.

Action에서 Popup Message를 선택하면 광고 차단 앱이 감지될 경우 팝업 안내 메시지를 표시합니다.

Message HTML code에서 HTML로 애드블록 감지 팝업창에 표시할 경고 문구를 지정할 수 있습니다.

기능은 단순한 편입니다. 광고를 허용해 달라고 요청하는 안내 팝업이 표시되고, 화면을 클릭하면 팝업이 사라집니다.

일부 티스토리 블로그나 워드프레스 사이트에서는 광고 차단을 해제하지 않으면 콘텐츠를 볼 수 없도록 하지만, 이러한 경우에는 이탈률이 높아지기 때문에 주의할 필요가 있습니다. Ad Inserter의 애드블록 감지 팝업 기능은 강제로 애드블록을 해제하도록 하는 방식은 아니고 방문자들에게 광고를 해제해줄 것을 요청하는 팝업 정도로 이해할 수 있을 것 같습니다. 이 경우 강제로 광고차단을 해제하도록 하는 방식보다는 덜 침습적이지만 효과는 크게 없을 수 있습니다.

애드블록 감지 플러그인을 사용하더라도 일부 애드블록은 감지하지 못할 수 있습니다. 예를 들어, AdBlock, Adblock Plus, 오페라 브라우저의 광고 차단 기능 등은 잘 감지하지만 AdGuard 등 일부 애드블록은 감지가 되지 않을 수 있습니다.

광고 차단기 감지 전용 플러그인 - CHP Ads Block Detector

애드블록 감지 전용 플러그인으로는 현재 CHP Ads Block Detector가 최근까지 활발하게 업데이트가 되는 것 같습니다.

흔히 볼 수 있는 방식의 애드블록 감지기처럼 보입니다.

오버레이 사용자 지정이나 애드블록을 비활성화할 페이지/글 등을 설정할 수 있는 기능은 유료 버전에서 제공됩니다.

Brave 팝업 빌더 플러그인의 애드블록 감지 기능

Brave 팝업 빌더 플러그인의 유료 버전에서도 애드블록 감지 기능이 탑재되어 있습니다.

워드프레스 Brave 플러그인: 광고 차단 감지 기능 추가

저는 Brave 유료 버전을 사용하고 있어 애드블록 감지 기능을 테스트해보니 생각처럼 잘 작동이 안 되는 것 같았습니다. 다른 플러그인과의 충돌 때문인지 모르겠습니다. 문제가 발생할 경우 플러그인 판매자에게 연락하여 지원을 받을 수 있습니다.

자바스크립트를 사용하여 애드블록 감지 기능 추가하기

이 블로그에서는 테스트로 자바스크립트를 사용하여 애드블록 감지 시 팝업을 표시하고 있습니다.

다음과 같이 작동하도록 코드를 추가했습니다.

광고 차단기를 사용하는 경우 페이지 로드 후 3.5초 후에 안내 팝업 표시
팝업 표시 후 4초가 지나면 닫기 버튼 표시
포스트(글)에만 표시되도록 설정
PC(데스크톱)에서만 표시되고 모바일 기기 해상도에서는 표시되지 않음.

마찬가지로 일부 애드블록(예: 애드가드)은 감지하지 못합니다.

직접 애드블록 감지 기능을 구현하려는 경우, 다음 코드를 참고하여 응용해보시기 바랍니다.

JS 코드:

setTimeout(function() {
    if (window.innerWidth > 768) { // Only run on devices wider than 768px
        function createAdBlockDetectedPopup() {
            var modal = document.createElement('div');
            modal.id = 'adblock-modal';
            modal.innerHTML = `
                <div class="modal-content">
                    <span id="closeModal" class="close" style="display: none;">&times;</span>
                    <p><strong>사이트에서 광고를 허용해주세요.</strong></p>
                    <p>이 블로그는 애드센스 광고 수익으로 운영됩니다. 광고를 허용하여 이 블로그 운영에 도움을 주실 수 있습니다. 광고 허용 후에 새로 고침하세요.</p>
                    <button id="allowAds">광고 허용 방법</button>
                </div>`;
            
            document.body.appendChild(modal);
            
            setTimeout(function() {
                document.getElementById("closeModal").style.display = 'block';
            }, 4000); // Show close button after 4 seconds
            
            document.getElementById("allowAds").addEventListener("click", function() {
                window.open('https://www.thewordcracker.com/miscellaneous/how-to-disable-adblock/', '_blank');
            });

            document.getElementById("closeModal").addEventListener("click", function() {
                modal.style.display = 'none';
            });
        }

        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
        script.onerror = function() {
            createAdBlockDetectedPopup();
            window.adblock = true;
        };
        document.head.appendChild(script);
    }
}, 3500); // Delay of 3.5 seconds

CSS 코드:

/* Modal Background */
#adblock-modal {
    display: block;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
}

/* Modal Content */
.modal-content {
    position: fixed;
    background-color: #fefefe;
    border: 1px solid #888;
    width: 40%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    animation: fadeIn 0.5s;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
}

/* Close Button */
.close {
    position: absolute;
    top: 2px;
    right: 15px;
    color: #aaa;
    font-size: 25px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Button Styles */
#allowAds {
    background-color: #4CAF50; /* Green */
    color: white;
    padding: 10px 20px;
    margin: 15px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

#allowAds:hover {
    opacity: 0.8;
}

/* Add Animation */
@keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

JS 코드와 CSS 코드를 각각 파일로 만들고, 다음과 같은 코드를 차일드 테마 내의 함수 파일에 추가하여 스크립트를 로드할 수 있습니다.

function enqueue_adblock_scripts_and_styles() {
    if (is_single()) {
        // Enqueue the adblock CSS
        wp_enqueue_style('adblock-style', get_stylesheet_directory_uri() . '/css/adblock-style.css', array(), '1.0.0');

        // Enqueue the adblock JS with a delay (handled within the JS file itself)
        wp_enqueue_script('adblock-script', get_stylesheet_directory_uri() . '/js/adblock-script.js', array(), '1.0.0', true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_adblock_scripts_and_styles');

JS 코드는 adblock-script.js이라는 파일로 만들어서 차일드 테마 내의 js 폴더로 업로드하고, CSS 코드는 adblock-style.css 파일로 만들어서 차일드 테마 내의 css 폴더로 업로드하면 됩니다.

상기와 같은 코드를 추가하면 블로그 글에만 적용됩니다. 상기 코드를 상황에 맞게 적절히 수정하여 사용할 수 있습니다.