광고



    저번 방식과 이번 방식의 차이?

    이전에 작성한 애드블록 차단의 작동 순서는 본문내용, 애드블록 경고 이미지 모두 로딩한 다음 
    애드블록이 발견되면 애드블록 경고 이미지를 띄우고 
    애드블록이 발견되지 않으면 애드블록 경고 이미지를 지우는 방식이었습니다.
    (본문 내용은 애드블록에 의해 자동으로 지워집니다. 애드블록 필터 div로 묶었으니 말이죠.)

     

    그런데 그 방식이 애드블록 경고 메시지를 못띄우는 경우가 간혹 있었습니다.


    이번에 소개할 방식은 본문내용을 다 로딩한 다음
    애드블록이 발견되면 본문을 지우고 애드블록 경고 이미지를 띄우며
    애드블록이 발견되지 않으면 아무것도 행동하지 않는 스크립트 입니다.

    그래서 경고 메시지가 안뜨는 경우가 없습니다. 다만 로딩하는 순간은 본문내용이 번쩍 보였다가 사라지는경우가 있습니다.

    둘 중에 더 마음에 드는 방식으로 사용하시면 되겠네요. 어쨌든 새로운 방식 소개하겠습니다.



    애드블록 차단하는 방법

    1) 본문을 표시하는 article_rep_desc를 div id로 묶어주세요.
    이때 id값은 본인이 원하는 값을 사용하면 됩니다.
    ※ div id가 이미 사용하고 있다면 값을 바꾸지 마세요! 스킨에 미리 설정된 css설정이 있을수도 있습니다.
        미리 설정되어 있다면 설정된 id값을 그대로 사용하면 됩니다.

    <div id="본문 div의 id값(원하는 값을 사용하세요)">
    [##_article_rep_desc_##]
    </div>

     


     

     

    2) 아래 js파일을 다운받아 블로그 관리자 페이지 - HTML/CSS 편집 - 파일 업로드를 통해 업로드 합니다.

      adblockblock.js 

     

     

    js 파일 주소는 파일업로드 페이지에서 아무 이미지 파일을 선택하고 미리보기에 뜨는 이미지에 마우스 오른쪽 클릭 -> 속성을 통해 주소를 알 수 있습니다.

    예를들어 이미지 파일 주소가 다음과 같습니다. http://cfs.tistory.com/custom/blog/xxx/xxxxxxx/skin/images/image.jpg

    그렇다면 업로드한 파일은 http://cfs.tistory.com/custom/blog/xxx/xxxxxxx/skin/images/업로드한파일이름 이 됩니다.

     

    저의 경우 http://cfs.tistory.com/custom/blog/xxx/xxxxxxx/skin/images/adblockblock.js 가 되겠죠?

     

     


    3) HTML편집에서 jquery 스크립트 밑에 아래 스크립트를 붙혀넣으면 됩니다.

    .


    <script src="2번에서 업로드한 js파일 주소"></script>

    <script>

    function adBlockDetected() {

                var element = document.getElementById("본문 div의 id값");

                element.innerHTML = '<img src="애드블록이 발견됐을 경우 본문 위치에 띄울 이미지 주소">';

    }

    function adBlockNotDetected() {

    }

    if(typeof fuckAdBlock === 'undefined') {

    adBlockDetected();

    } else {

    fuckAdBlock.onDetected(adBlockDetected).onNotDetected(adBlockNotDetected);

    }

    function checkAgain() {

    document.getElementById('adb-actived').style.display = 'none';

    document.getElementById('adb-not-actived').style.display = 'none';

    fuckAdBlock.onDetected(adBlockDetected).onNotDetected(adBlockNotDetected);

    setTimeout(function() {

    fuckAdBlock.check();

    }, 500);

    }

    </script>

     


    적용모습

    • 애드블록이 발견되지 않았을 경우



    • 애드블록이 발견되었을 경우



    저작자 표시 비영리 변경 금지
    신고


    죄송합니다

    광고 차단 플러그인을 해제해야 컨텐츠를 볼 수 있습니다.
    (해제 후 새로고침 해주세요)

    I'm really Sorry.
    Please turn off Adblock.

    광고


    Posted by 퍼스나콘
    • Favicon of http://persnacons.tistory.com/403 BlogIcon 고라파덕
      2015.05.13 11:35 신고

      요즘 안티-애드블록과 애드블록의 싸움 형세는 애드블록 쪽이 우세라서.... 악덕광고자가 아닌 분들이 고생이 많습니다.
      사실 기술적으로 안티-애드블록이 애드블록을 이기기는 앞으로도 좀 힘들겁니다. 굳이 원리를 말하자면 이 케이스로 예를 들어서 광고 차단 방지 스크립트 이전에 먼저 스크립트를 넣을 수 있는 권한을 가질 수 있는 것이 클라이언트 쪽이기 때문에....
      퍼스나콘님처럼 괜찮은 콘텐츠를 보여주는 분께는 예외 설정이 답! 이번에도 여러 글 잘 보고 갑니다.

    • ㅋㅋㅋ
      2015.05.17 16:42 신고

      안봐 이따위 블로그 꼴에 광고로 돈벌고싶으면 바이러스 랜섬웨어 확실히 처리하던가 하기는싫고 돈은벌고싶지? 광고할권리가 있다면 그에대한 책임과 안볼권리도 있단다

      • Favicon of http://swnews.tistory.com BlogIcon 수완뉴스
        2016.02.10 08:07 신고

        어떤 이유로 '이따위'라고 언급하셨는지 모르겠지만 솔직히 말해서 광고를 차단해야 하는 플러그인으로 사용하기 좋은 것은 것은 눈을 아프게 하는 시각광고나 광고 넘어가기를 늦게 뜨게 하는 등의 동영상 광고 등을 차단하면 쓸모 있지 않을까요? 이것도 아니고 무차별적으로 콘텐츠에 광고를 달아 선량하게 이용하는 콘텐츠 제작자들에게의 광고까지 차단하는 건 좀 너무하다고 생각합니다.
        광고를 차단하는 플러그인을 꺼야 콘텐츠를 봐야 하는 것에 대해서 '안볼 권리'란 당연히 있는 거지만, 이 포스트가 아니고 귀하께서 보고 싶은 콘텐츠인데 광고차단 플러그인을 꺼야 볼수 있다면 어떻게 하시겠습니까?
        광고가 보기 싫은 마음은 알지만, 때로는 광고로 수익을 내는 선량한 콘텐츠 제작자들의 광고는 보기 싫어도 봐줘야 한다고 생각합니다.
        만약, 그들의 광고 조차도 보지 않는다면 우리는 좋은 콘텐츠를 볼 기회를 놓치는 꼴이라고 생각합니다.
        제가 블로그 운영자는 아니지만, 지나가다가 그냥 놓치기에는 억울한 부분이 있어 오지랖이지만, 댓글 남기고 갑니다.

    • 질문
      2015.07.31 11:42 신고

      3) HTML편집에서 jquery 스크립트 밑에 아래 스크립트를 붙혀넣으면 됩니다.
      라고 적으신부분에서 이해가 안되는데..
      jquery 라고 컨트롤 F 로 검색해도 안나오고 정확히 jquery 스크립트 밑에가 어딜 말하는지가 모르겠네요 ㅠㅠ
      뭐라 검색한다음에 그 밑에 입력하면 되는거죠??

      • Favicon of http://persnacons.tistory.com BlogIcon 퍼스나콘
        2015.07.31 12:39 신고

        jquery가 정확하게 어떤건지 모르신다면 </body> 바로 위에 붙여넣으시면 웬만하면 작동할겁니다.

        근데 jquery 대부분 스킨에는 다 있고 jquery라고 검색하면 나와야하는데 안나오시는거 보니 붙여넣을 스크립트 맨 위에

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        를 추가해주세요.

    • 질문
      2015.07.31 11:44 신고

      추가로 애드블록이 켜져있을때 나올 메시지, 이미지 라는 부분에는 어떻게 써적으면 되는건가요
      제가 첨부하고 싶은 이미지를 파일 업로드란에 등록하긴 했는데... 뭐 어떻게 쓰라는건지를 모르겠어요

      • Favicon of http://persnacons.tistory.com BlogIcon 퍼스나콘
        2015.07.31 12:38 신고

        3번에서 스크립트 5줄을 가져오면
        <script src="2번에서 업로드한 js파일 주소"></script>
        <script>
        function adBlockDetected() {
        var element = document.getElementById("본문 div의 id값");
        element.innerHTML = '<img src="애드블록이 발견됐을 경우 본문 위치에 띄울 이미지 주소">';

        인데

        element.innerHTML ='<여기>'

        <여기>라고 적은 부분에 마음껏 적고싶은 내용을 적으면 됩니다.
        예를 들어

        element.innerHTML ='죄송합니다. 애드블록을 잠깐 해제해주세요<p><img src="http://~~~~">'

        라고 적어놓으면 애드블록이 켜진채로 블로그에 접속한다면

        죄송합니다. 애드블록을 잠깐 해제해주세요
        [이미지]

        이렇게 뜨게됩니다.

    • 감사합니다
      2015.07.31 12:46 신고

      친절한 답변 감사합니다!
      조금 어려운것같기도하고 그러네요 휴ㅠㅠ 다시 도전해봐야겠어요!

      • 감사합니다
        2015.07.31 13:05 신고

        덕분에 차근차근 설명해주신대로 따라서 하니깐
        완벽하게 적용됐습니다!!!
        진짜 감사해요~

    • Favicon of http://ncii.kr BlogIcon 어썸 로그
      2016.11.20 12:35 신고

      정말 감사드립니다

광고

data-ad-language="ko">

티스토리 툴바