Tistory에서 AdBlock 감지하기

블로그에 AdSense를 붙여서 광고로 운영을 하고 있는 입장에서 AdBlock은 불편하다

개인적으로 광고를 차단하는 방법도 게시물로 많이 올렸지만 

일부 광고로 운영되는 사이트는 예외로 설정한다

 

가끔은 광고차단을 해제해야 게시물을 볼 수 있게 설정해 놓은 사이트도 있는데 그것은 너무 불편하고

또 광고차단을 감지하는 방법이 완벽한 것은 없다

https://github.com/sitexw/BlockAdBlock

GitHub - sitexw/BlockAdBlock: Allows you to detect the extension AdBlock (and other)

이라는 스크립트가 있는데 테스트 해 본 결과 그리 완벽하지는 않고 

그냥 작동되게 하고 사이트에 테스트해보는 것에 의의를 두고 간단한 javascript를 사용해 봤다

먼저 티스토리의 블로그관리홈에서 스킨편집->html편집

에서 head에

<script>
function detect()
        {
            var iframe = document.createElement("iframe");
            iframe.height = "1px";
            iframe.width = "1px";
            iframe.id = "ads-text-iframe";
            iframe.src = "http://domain.com/ads.html";
           
            document.body.appendChild(iframe);
           
            setTimeout(function()
                       {
                           var iframe = document.getElementById("ads-text-iframe");
                           if(iframe.style.display == "none" || iframe.style.display == "hidden" || iframe.style.visibility == "hidden" || iframe.offsetHeight == 0)
                           {
								console.log('AdBlock is enabled');
                                iframe.remove();
                           }
                           else
                           {
								console.log('AdBlock is not enabled');
                                iframe.remove();
                           }
                       }, 100);
        }
</script>

삽입한다

그리고 사이트에 접속해보면 

로그가 제대로 표시가 된다 

이렇게 표시가 제대로 되고 탐지가 제대로 된다면

다음으로 블로그관리홈에서 스킨편집->html편집 에서 "article_rep_desc" 를 검색한다

검색해보면 2개가 나오는데 바로 앞에 

<div class="blockplease"></div>

를 삽입한다

다음으로 삽입한 영역에 AdBlock이 작동되는 경우 원하는 문구를 넣는다

물론 article_view 영역을 아예 다른 문구로 교체를 해버리면 원래 게시물을 못보게 할 수도 있는데

그것은 아무래도 좋은 방식은 아닌것 같고 

부탁 문구를 삽입해 본다

 

좀전에 head 영역에 삽입한 스크립트를 다시 

<script>
function detect()
        {
            //create a iframe. Append the iframe to the body. And then after 100ms check if their offsetHeight, display or visibility is set such a way that user cannot see them.
            //In the URL use the words specific to advertising so that Adblock can do string matching.
            var iframe = document.createElement("iframe");
            iframe.height = "1px";
            iframe.width = "1px";
            iframe.id = "ads-text-iframe";
            iframe.src = "http://domain.com/ads.html";
           
            document.body.appendChild(iframe);
           
            setTimeout(function()
                       {
                           var iframe = document.getElementById("ads-text-iframe");
                           if(iframe.style.display == "none" || iframe.style.display == "hidden" || iframe.style.visibility == "hidden" || iframe.offsetHeight == 0)
                           {
                                //alert("Adblock is blocking ads on this page");
								console.log('AdBlock is enabled');
                                const adplz = document.querySelector('.blockplease');
								const span = document.createElement('span');
								span.innerHTML = "<p style='color:red;'>애드블럭을 끄시거나 이 사이트를 예외로 설정 부탁드립니다. 이 사이트는 애드센스 수입으로 운영되고 있습니다.<br>Please turn off the ad block or set this site as an exception. This site is operated with AdSense income.</p>";
                                adplz.appendChild(span);

                                iframe.remove();
                           }
                           else
                           {
                                //alert("Adblock is not detecting ads on this page");
								console.log('AdBlock is not enabled');
                                iframe.remove();
                           }
                       }, 100);
        }
</script>

이렇게 수정을 하면 AdBlock이 작동 중인 경우 게시물 첫부분에 문구가 들어간다

 

제발 AdBlock은 풀고 블로그에 접속해 주세요~~~~~