정보/블로그 운영팁

애드센스 일치하는 콘텐츠 광고 스크롤 따라다니기

아미넴 2020. 11. 28.
반응형

긴 글을 작성했을 경우 스크롤을 내리다 보면 사이드바가 너무 휑해 보이기도 하고,

사이드바에 배치시킨 일치하는 콘텐츠 광고가 금방 시야에서 사라져서 고안한 방법입니다.

광고가 너무 많아도 불편을 초래할 수 있으니 적절히 배치시키는 것이 더욱 중요합니다.

 

목차

     

    따라다니는 광고는 애드센스 정책 위반인가

    예전에는 고정되거나 플로팅 된 위치에 광고를 게재하는 행위를 제한한다는 문구가 있었다고 하는데요.

    이 때문에 일부 블로거분들께서 우려를 하고 계신 것 같아요.

     

    그런데 지금 확인을 해 보면 그런 내용이 없습니다.

    원래 이 부분에 있었다고 하는군요.

     

    제 생각에는 광고가 본문과 겹친다거나 실수로 클릭을 유도하거나 불법 프로그램을 사용하여 정상적이지 못한 방법으로 광고를 변형시키지만 않는다면 문제는 없을 것으로 예상됩니다.

     

    아래 정책도 직접 확인해 보시고 그래도 우려가 되신다면 굳이 적용하실 필요는 없을 것 같아요 ㅎㅎ

    support.google.com/adsense/answer/1346295?hl=ko

     

    광고 게재위치 정책 - AdSense 고객센터

    도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요

    support.google.com

     

    일치하는 콘텐츠 자격 요건

    일치하는 콘텐츠 광고는 자격 요건이 있는 것 같습니다.

    저도 처음부터 뜬 것 같지는 않으니 지속적으로 확인해 보시길 바랍니다.

     

     

     

    사이드바에 광고 배치하기

     

    먼저 구글 애드센스 사이트에서 일치하는 콘텐츠 광고를 신규로 하나 만들겠습니다.

     

    애드센스 사이트에 접속합니다.

     

    광고 > 개요를 클릭합니다.

     

    광고 단위 기준 > 일치하는 콘텐츠를 선택 합니다.

     

    광고 단위 이름을 입력하고

    크기에서 맞춤을 선택하고 너비 230, 높이 750을 입력해 보겠습니다.

    개인 블로그 사이즈에 맞게 적절히 조절해 주세요.

     

    그러면 다음과 같은 미리보기 화면을 보실 수 있습니다.

     

    그 다음 저장 및 코드 생성 버튼을 클릭합니다.

     

    코드 복사를 한 다음 완료 버튼을 클릭합니다.

     

     

    + 내용추가

    HTML 배너출력이 안 보이시는 분은 다음 작업을 추가로 진행해 주세요.

     

    관리자 페이지에서 플러그인을 선택합니다.

     

    배너 출력을 찾아서 선택합니다.

     

    적용 버튼을 클릭합니다.

     

    다음 티스토리 관리 페이지에서 꾸미기 > 사이드바를 클릭합니다.

     

    HTML 배너출력 플러스 버튼을 클릭하여 사이드바2를 선택합니다.

    각자 다를 수 있으므로 맞게 선택해 주세요.

     

    적당히 이름을 입력하고 HTML 소스를 만들어 붙입니다.

     

    저같은 경우는 추천글 타이틀로 해서

    애드센스 사이트에서 복사한 태그를 붙여 넣었습니다.

    첫 script 태그는 중복이므로 제거했습니다.

    스크롤 따라다니게 만들 때 필요한 id값을 부여하기 위해 이 광고 태그를 div 태그로 감쌌습니다.

    맨아래 div 태그는 아래쪽 여백을 주기 위해 추가한 부분입니다.

    <h2>추천글</h2>
    <div id="recommend-ads">
        <ins class="adsbygoogle"
            style="display:inline-block;width:230px;height:750px"
            data-ad-client="ca-pub-0000000000000000"
            data-ad-slot="0000000000"></ins>
    </div>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    <div style="margin-bottom:30px;"></div>

     

    다음과 같이 생성이 되었으면 성공입니다.

     

    변경사항 저장을 하고 확인해 보겠습니다.

     

    깔끔하게 적용이 잘 됐네요.

     

     

    스크롤 따라다니게 하기

     

    위에서 만든 광고 태그를 스크롤 시 따라다니도록 만들어 보겠습니다.

     

    관리 페이지 > 꾸미기 > 스킨 편집으로 이동합니다.

     

    html 편집을 클릭합니다.

     

    그럼 위외 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다.

     

    아래와 같이 div 태그를 하나 더 작성합니다.

    <html>
    <!-- 생략 -->
    <body>
    <!-- 생략 -->
    
    <!-- 일치하는 콘텐츠 광고 태그 -->
    <div class="match-ads"></div> <!-- 이 부분을 추가해야 합니다 -->
    
    <!-- 생략 -->
    </body>
    </html>

    사이드바에 넣은 광고 코드를 사이드바에서 벗어나게 하기 위해 이 태그 안쪽으로 이동시킬 계획입니다.

     

    CSS 탭으로 이동합니다.

     

    match-ads 클래스를 다음과 같이 추가합니다.

    .match-ads {
    	position:absolute;
    }

    이동을 자유롭게 하기 위해 position 속성을 absolute로 설정하였습니다.

     

    body 태그 안쪽 맨 아래에 다음과 같이 작성합니다.

    <html>
    <!-- 생략 -->
    <body>
    <!-- 생략 -->
    
    <script>
      var sidebarHeight = $('aside').height(); // 스킨에 따라 사이드바 높이 구하는 방법이 다를 수 있음
      $(window).on('scroll', function() {
          if(window.innerWidth > 767 && window.scrollY > sidebarHeight) {
              var matchAds = $('.match-ads');
              if(matchAds.height() === 0) {
                  var recommendAds = $('#recommend-ads');
                  var adsX = recommendAds.offset().left;
                  matchAds.append(recommendAds.find('ins.adsbygoogle'));
              }
    
              $('.match-ads').css('top', (window.scrollY+30)+"px");
              $('.match-ads').css('left', adsX+"px");
              $('.match-ads').css('transition', "0.5s");
          } else {
              $('#recommend-ads').append($('.match-ads').find('ins.adsbygoogle'));
          }
      });
    </script>
    </body>
    </html>

    ※ 조건은 각자 블로그에 맞게 수정이 필요할 수도 있습니다.

     

    브라우저 너비가 767 이상인 경우(모바일 뷰가 아닌 경우)에 스크롤 위치가 사이드바 전체 높이를 넘어가면

    추천글에 있던 광고 태그를 꺼내서 만들어 놓은 match-ads 클래스를 가진 div 태그로 이동시켜

    스크롤 높이에 따라 계속 움직이도록 하였습니다.

     

    스크롤 높이가 다시 사이드바 전체 높이를 넘지 않게 되면 원상 복귀 시키도록 하였습니다.

     

    #내용수정 (2020.12.27)

    고래 스킨 4.0 사용하시는 분은 script 태그 안쪽을 아래 내용으로 변경해 주세요.

    <script>
        var $sidebar = $('#sidebar');
        var $sidebarChildren = $sidebar.children();
        var sidebarHeight = $sidebar.offset().top + 100;
        for(var i=0;i<$sidebarChildren.length;i++) {
            sidebarHeight += $sidebarChildren.eq(i).outerHeight();
        }
        $(window).on('scroll', function() {
            // 여기는 기존 로직과 동일
        }
    </script>

     

    #내용수정 (2021.01.31)

    최근 광고가 담긴 태그를 다른 태그로 옮기면 정상적으로 광고가 표시 되지 않는 현상이 발생하는 것 같아서 다음과 같이 원래 태그의 스타일을 바꾸는 방법을 추가하였으니 참고 바랍니다.

    <html>
    <!-- 생략 -->
    <body>
    <!-- 생략 -->
    <script>
      var sidebarHeight = $('aside').height(); // 스킨에 따라 사이드바 높이 구하는 방법이 다를 수 있음
      $(window).on('scroll', function() {
          var recommendAds = $('#recommend-ads');
          if(window.innerWidth > 767 && window.scrollY > sidebarHeight) {
              if($('#dummy-ads').length == 0) {
                  var dummy = $('<div id="dummy-ads" style="width:300px;height:900px;"></div>');
                  recommendAds.after(dummy);
                  recommendAds.css('position', 'fixed');
                  recommendAds.css('top', '10px');
              }
          } else {
              $('#dummy-ads').remove();
              recommendAds.css('position', 'inherit');
              recommendAds.css('top', '');
          }
      });
    </script>
    </body>
    </html>

    원래 위치의 공간은 보존해야 정상 동작을 하므로 임시로 dummy 태그를 만들어 두었습니다.

     

    실제 적용 영상

     

     

    궁금하신 점은 댓글로 남겨 주세요.

    감사합니다 :)

    반응형
    그리드형(광고전용)

    댓글63

    • 이전 댓글 더보기
    • dreamk 2020.12.03 22:59 신고

      좋은 정보 감사합니다 애드센스 승인되면 시도해봐야겠네요 ^^
      답글

    • 혹시 사이드바에서 html배너출력 + 가 안보여서 못하고있네요 ㅜㅜ 어케하나요
      답글

      • 아미넴 2020.12.06 17:19 신고

        답변 늦어서 죄송해요!
        플러그인에서 배너 출력을 적용해야 하는데 블로그 초반에 해 놓은거라 깜박했네요 ㅠ
        본문에 내용 추가 했습니다.

    • 어나더머머 2020.12.10 00:31 신고

      내용 감사합니다. 저도 애드센스 통과부터하고 다시 봐야겠어요.^^ 구독 하고 갑니다.
      한번 놀러오세요~
      그리고 혹시 다국어 서비스에 대해서도 올려놓으신게 있으신지요..^^; 컴퓨터 언어는 알기까지가 쉽지않네요.
      답글

      • 아미넴 2020.12.10 00:46 신고

        안녕하세요 구독 감사드려요 ㅎㅎ
        애드센스 승인되면 꼭 다시 들러주세요!

        번역 서비스는 아래 링크 참고하시면 됩니다
        https://sangminem.tistory.com/160

        저도 놀러 갈게요 :)

    • 어나더머머 2020.12.10 09:28 신고

      감사합니다~~~^^👍
      답글

    • 익명 2020.12.12 14:47

      비밀댓글입니다
      답글

    • 익명 2020.12.27 14:15

      비밀댓글입니다
      답글

      • 아미넴 2020.12.27 16:15 신고

        안녕하세요!
        살펴본 바로는 잘못된 부분은 딱히 없어보이는데 혹시 사용하시는 스킨이 어떻게 되나요?
        테스트 한 번 해볼게요~

    • 익명 2020.12.27 16:37

      비밀댓글입니다
      답글

      • 아미넴 2020.12.27 17:40 신고

        확인해보니 고래스킨은 구조가 좀 다르네요.
        본문 내용 수정해 놓았습니다.

        script 태그 내용을 아래와 같이 바꾸시면 될 것 같습니다 ㅎㅎ

        <script>
        var $sidebar = $('#sidebar');
        var $sidebarChildren = $sidebar.children();
        var sidebarHeight = $sidebar.offset().top + 100;
        for(var i=0;i<$sidebarChildren.length;i++) {
        sidebarHeight += $sidebarChildren.eq(i).outerHeight();
        }
        $(window).on('scroll', function() {
        if(window.innerWidth > 767 && window.scrollY > sidebarHeight) {
        var matchAds = $('.match-ads');
        if(matchAds.height() === 0) {
        var recommendAds = $('#recommend-ads');
        var adsX = recommendAds.offset().left;
        matchAds.append(recommendAds.find('ins.adsbygoogle'));
        }

        $('.match-ads').css('top', (window.scrollY+30)+"px");
        $('.match-ads').css('left', adsX+"px");
        $('.match-ads').css('transition', "0.5s");
        } else {
        $('#recommend-ads').append($('.match-ads').find('ins.adsbygoogle'));
        }
        });
        </script>

    • 익명 2020.12.27 18:02

      비밀댓글입니다
      답글

      • 아미넴 2020.12.27 18:07 신고

        방금 ★☆★☆♣님 블로그를 살펴보니
        <div class="match-ads"></div>
        부분이 안보이는 것 같네요!
        다시 한번 확인 부탁드릴게요~

      • 아미넴 2020.12.27 18:14 신고

        티스토리 스킨 구조는 기본 HTML 문법이랑 차이가 있어서 원래 빨갛게 보일 수도 있어요~
        만약 기존에 빨갛지 않았는데 수정 후 빨개졌다면 문법 오류가 있을 가능성이 있습니다.
        기존 반영사항 지우고 다시 해보시는걸 추천드릴게요~

    • 익명 2020.12.27 18:14

      비밀댓글입니다
      답글

      • 아미넴 2020.12.27 18:18 신고

        아 네 맞아요

        <!-- 일치하는 콘텐츠 광고 태그 -->
        <div class="match-ads"></div>

        이부분도 body 태그 안쪽에 있어야 합니다.
        위치는 크게 상관없구요~

    • 익명 2020.12.27 18:20

      비밀댓글입니다
      답글

      • 아미넴 2020.12.27 18:22 신고

        한 가지 더 잘못하신 부분이 있네요.

        <div id="recommend-ads">
        <ins class="adsbygoogle"
        style="display:inline-block;width:230px;height:750px"
        data-ad-client="ca-pub-0000000000000000"
        data-ad-slot="0000000000"></ins>
        </div>

        <div id="recommend-ads"></div> 부분도 빠뜨리셨어요~
        머리식히고 나중에 다시 한 번 해보세요 ㅎㅎ

    • 익명 2020.12.27 20:22

      비밀댓글입니다
      답글

    • 익명 2020.12.27 21:02

      비밀댓글입니다
      답글

      • 아미넴 2020.12.27 21:15 신고

        아 지금 봤네요 ㅎㅎ
        일단 문법에 맞지 않는 부분이 있습니다.

        <div style="margin-margin:30px;"></div>

        여기서 margin-margin은 어떤 의도로 수정하신 걸까요?

        혹시 왼쪽 여백을 좀 더 주고 싶으신 것이라면 그 부분을 수정하면 안 되고

        이 부분을
        <div id="recommend-ads">

        이런 식으로 수정하셔야 합니다.
        <div id="recommend-ads" style="padding-left: 20px;">

        혹시 해 보시고 잘 안 되면 말씀해 주세요 ㅎ

    • 익명 2020.12.27 21:22

      비밀댓글입니다
      답글

    • 익명 2020.12.27 21:29

      비밀댓글입니다
      답글

      • 아미넴 2020.12.27 21:38 신고

        구조가 좀 특이하네요.
        일단은

        script쪽에 이 부분을
        var adsX = recommendAds.offset().left;

        이렇게 바꿔보세요.
        var adsX = $('#sidebar').offset().left;

    • 익명 2020.12.27 21:44

      비밀댓글입니다
      답글

    • 익명 2020.12.27 21:53

      비밀댓글입니다
      답글

    • 익명 2020.12.27 22:00

      비밀댓글입니다
      답글

    • 익명 2020.12.27 22:08

      비밀댓글입니다
      답글

    • 제이온 (J.ON) 2021.01.12 17:25 신고

      사이드바에 일치하는 광고 코드를 넣을 때 아래와 같은 소스코드를 넣은다고 하셨는데

      <h2>추천글</h2>
      <div id="recommend-ads">
      <ins class="adsbygoogle"
      style="display:inline-block;width:230px;height:750px"
      data-ad-client="ca-pub-0000000000000000"
      data-ad-slot="0000000000"></ins>
      </div>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
      <div style="margin-bottom:30px;"></div>

      혹시 이 내용을 모바일에는 광고가 노출안되도록 할 수는 없을까요?
      답글

      • 아미넴 2021.01.12 17:35 신고

        안녕하세요.
        보통의 반응형 스킨은 모바일 크기에서는 사이드바가 가려져서 문제가 안될텐데 혹시 어떤 스킨 사용하는지 알수있을까요

      • 제이온 (J.ON) 2021.01.12 17:37 신고

        친효 스킨을 사용중인데, 모바일로 접속하여 쭉 하단부로 내리면 사이드바가 보입니다.

      • 아미넴 2021.01.12 17:45 신고

        그 스킨은 구조가 좀 다른가보네요
        확인해보고 말씀드릴게요~

      • 제이온 (J.ON) 2021.01.12 18:13 신고

        넵.. 아무래도 로딩속도때문에 모바일에는 안뜨게 하고싶네요..

      • 아미넴 2021.01.12 19:29 신고

        아 친효스킨은 모바일 모드에서 사이드바 내용들이 그냥 밑으로 붙는 구조네요.
        간단히 해결할 수 있긴합니다.

        <script>
        $(document).ready(function(){
        // 이부분에 다음과 같이 작성하시면 됩니다
        if(window.innerWidth < 768) {
        $('.module').find('h2').hide();
        $('.module').find('#recommend-ads').hide();
        }
        });
        </script>

        이렇게 추가해 보세요~

      • 제이온 (J.ON) 2021.01.12 19:51 신고

        감사합니다 ㅎㅎ 잘되네요

    • Super Mom & Daddy 2021.02.06 16:31 신고

      저도 이제 이거 해 볼 날을 기다리고 있는데...아직은 승인 된지 별로 안되서 일치하는 콘텐츠는 아직 안뜨네요...유입량 늘리기가 정말 힘들기는 하내요~ㅋㅋ 항상 잘보고 갑니다.
      답글

    💲 추천 글