Erzsamatory Weblog


해상도에 따라서 구글 애드센스 광고 위치를 재설정하는 방법


구글 애드센스 광고를 블로그에 넣을 때 가장 신경을 써야 하는 부분은 바로 광고 위치입니다. 광고 위치 선정이 잘 되어야만 방문자의 눈을 사로 잡을 수가 있으며, 더 많은 클릭을 유도하여, 더 많은 수익을 창출할 수가 있습니다. 하지만 무조건 눈에 잘 띄는 곳에 광고를 배치한다고 해서 좋은 것만은 아닙니다. 왜냐하면 구글 애드센스에서는 유효한 광고 클릭에 대해서만 수익금을 지급하기 때문입니다. 무효 클릭이라는 것에 대해서 구글이 관대하게 수익금만 지급하지 않으면 너무나 좋겠지만, 구글은 무효 클릭을 유발할 수 있는 광고 위치에 대해서는 경고 또는 계정 비활성화라는 특단의 조치를 취하고 있습니다. 따라서 우리는 정책 위반을 하지 않기 위한 광고 위치에 대해서 생각해볼 필요가 있습니다. 이 글에서는 광고 위치 정책을 위반하기 쉬운 형태의 스킨인 반응형 블로그 스킨에서 광고 위치 정책을 어떻게 하면 위반하지 않을 수 있는가에 대하여 알아볼 것입니다.



반응형 스킨에서의 구글 애드센스 광고


반응형 스킨이란?
동일한 콘텐츠를 다양한 기기를 통해서 이용할 수 있도록 해주는 N스크린 기술의 적용 범위가 블로그로까지 확장되어 탄생한 새로운 형태의 블로그 스킨입니다. 단 한 개의 스킨만으로도 PC와 모바일 환경 모두를 지원할 수 있기 때문에 검색엔진 최적화, 방문자 가독성 최적화 등에 장점을 가지고 있습니다.

반응형 스킨을 사용하고 있는 블로그에 구글 애드센스 광고를 넣고자 할 때에는 반드시 광고 위치에 대해서 주의를 기울여야만 합니다. 왜냐하면 반응형 스킨이라는 것이 모바일과 PC에서 같은 콘텐츠를 그대로 출력하는 것이기 때문입니다. 모바일 화면은 PC 화면보다 작기 때문에, PC에서 잘 보이던 광고가 모바일에서는 잘 보이지 않을 가능성이 매우 높습니다. 특히, 테이블을 이용하여 광고를 넣었을 경우에는, 모바일 화면 바깥으로 광고가 이탈하여 구글에서 정한 애드센스 정책을 위반할 수도 있습니다.

이러한 문제점을 해결하기 위해서는 자바스크립트를 통하여 광고 위치를 재설정해야만 합니다. 해상도에 따라 광고 위치를 재설정하면 구글 애드센스 정책 위반을 피할 수 있을 뿐만 아니라, 방문자의 클릭률 또한 일정 수준 이상으로 유지할 수도 있습니다.


구글 애드센스 광고 위치 재설정 방법


이 글에서는 jQuery를 이용하여 구글 애드센스 광고 위치를 재설정하는 방법에 대해서 알아볼 것입니다. 본인의 블로그에서 아직 jQuery를 지원하지 않고 있다면, 외부 링크 방식으로 jQuery를 블로그에서 사용하는 방법 글에서 jQuery를 사용하는 방법에 대해서 자세하게 설명하고 있으니, 이 글을 참고하시기 바랍니다. 하지만 대부분의 티스토리 블로그 스킨에서는 jQuery를 지원하고 있다는 점을 알고 계시기 바랍니다.

jQuery를 이용하면 HTML의 DOM 요소를 삭제하거나 추가하는 것이 매우 쉬워집니다. 물론 속도면에 있어서는 순수 자바스크립트가 훨씬 빠를 것입니다. jQuery에서는 다음과 같은 방법을 통하여 매우 간단하게 HTML의 DOM 요소를 삭제하거나 추가할 수가 있습니다. 진짜 간단하죠?

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    ..........
    <script>
        $(document).ready( function () {
            var box1 = $("#box1");
            $("div").remove("#box1");
            $("#box2").append(box1);
        });
    </script>
</head>
<body>
    ..........
    <span id="box1">황민식입니다.</span>
    <div id="box2">안녕하십니까?</div>
    <!-- 출력 결과: 안녕하십니까?황민식입니다. -->
    ..........
</body>
</html>


위 소스코드의 실제 출력 결과는 안녕하십니까?황민식입니다. 라는 내용이 들어 있는 본래의 #box1 SPAN은 삭제되었으며, 복제된 #box1 SPAN이 #box2 DIV 내부에 새롭게 추가되었기 때문입니다. 이 글에서 설명할 구글 애드센스 광고의 위치를 재설정 방법도 이와 같은 방식의 소스코드를 이용합니다.

따라서 이 글을 제대로 이해하기 위해서는 자바스크립트에 관한 기초적인 지식이 필요하며, 만약 자바스크립트에 관한 기초 지식이 없다 하더라도, 그냥 이 글에서 제공하고 있는 소스와 사용 방법만 잘 따라하면 원하는 결과를 얻을 수 있을 것입니다.

구글 애드센스 광고 위치 재설정 소스코드


이 글에서는 반응형 스킨을 사용하고 있는 블로그에서 본문 최상단에 반응형 애드센스 광고 코드를 넣은 상황에 대해서 설명할 것입니다. 반응형 스킨이라는 것이 PC 화면와 모바일 화면에서 같은 스킨 파일을 이용하는 것이기 때문에, PC에서는 적당한 크기로 잘 보이는 광고가 모바일에서는 정책을 위반할 정도로 화면에 꽉 차게 보일 수가 있습니다. 이러한 문제 때문에, 반응형 스킨을 사용하고자 했던 많은 블로거가, 반응형 스킨의 수익률이 더 좋음에도 불구하고, 다시 이전의 스킨으로 돌아가 버리는 최악의 상황까지 발생하였습니다. 하지만 이 문제는 위에서 소개했던 소스코드를 활용하면 매우 쉽게 해결할 수 있습니다.

대부분의 블로거는 다음과 같은 방법으로 본인의 블로그에 애드센스 광고를 추가할 것입니다. 물론 티스토리에서는 플러그인을 통하여 애드센스 광고를 추가할 수 있기 때문에, 일부 티스토리 블로그 다음과 같은 방법을 사용하지 않을 수도 있습니다. 하지만 구글 애드센스 광고를 최대한 활용하기 위해서는 플러그인을 통하여 광고를 추가하는 것 보다는 직접 스킨 파일에 애드센스 소스코드를 삽입하는 것이 더 좋습니다. 스킨에 직접 애드센스 소스코드를 추가하면 플러그인으로는 구현하지 못 했던 다양한 기능을 구현할 수 있기 때문입니다. 이 글에서 설명하는 것은 이러한 기능들 중 단 한 가지에 불과합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    ..........
</head>
<body>
    ..........
    <!-- 애드센스 광고 코드 (동기식) -->
    <script>애드센스 광고 코드</script>
    <!-- 티스토리 치환자 또는 본문 내용 출력 메소드 -->
    [##_article_rep_desc_##]
    ..........
</body>
</html>


아직까지 위와 같은 동기식 애드센스 소스코드를 사용하고 있다면, 티스토리에서 비동기 애드센스 코드를 사용하는 방법 글을 참고하여, 반드시 비동기식 애드센스 소스코드를 사용할 수 있도록 합니다. 하지만 이 글에서 설명하고자 하는 반응형 애드센스 광고는 비동기 애드센스 소스코드만을 제공하고 있으므로, 현재 자신이 반응형 광고를 사용하고 있을 때에는, 위 글을 참고하여, 반응형 애드센스 소스코드를 제대로 사용하는 방법에 대해서 꼭 숙지할 수 있도록 합니다.

대부분의 블로거는 위와 같은 방법으로 블로그 글 본문 상단에 애드센스 광고가 출력되도록 하고 있습니다. 하지만 반응형 스킨에서는 위와 같은 방법을 사용하면 안 됩니다. 왜냐하면 모바일 환경에서 정책 위반 사유가 발생할 수 있기 때문입니다. 그렇다면 어떻게 이 문제를 해결할 수 있을까요? 가장 쉽게 생각해서, PC 화면에서는 본문 최상단에 광고를 그대로 표시하고, 모바일 환경에서만 본문 하단에 광고가 표시되도록 하면 되겠죠? 쉽게 말해서, 화면의 해상도를 감지하여, 정책이 위반되지 않을 수 있는 해상도에서는 본문 상단에 그대로 광고를 표시하고, 정책이 위반될 수 있는 해상도에서만 본문 하단에 광고가 출력되도록 하면 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <script>
        // 화면의 해상도가 600px 미만이면
        // 모바일 화면으로 간주하고
        // 하단에 광고를 출력합니다.
        $(document).ready( function () {
            if ($(window).width() < 600) {
                var adsensebox = $("#adsensebox_top");
                $("div").remove("#adsensebox_top");
                $("#adsensebox_bottom").append(adsensebox);
            }
            
            // 애드센스 광고 출력 메소드가 이곳에 위치해야 합니다.
            (adsbygoogle = window.adsbygoogle || []).push({});
        });
    </script>
</head>
<body>
    ..........
    <!-- 애드센스 광고 코드 (비동기식) -->
    <div id="adsensebox_top">
        <ins> .......... </ins>
    </div>
    <!-- 티스토리 치환자 또는 본문 내용 출력 메소드 -->
    [##_article_rep_desc_##]
    <!-- 모바일 환경에서 출력될 광고 위치 -->
    <div id="adsensebox_bottom"></div>
    ..........
</body>
</html>


위의 소스코드와 같은 방법으로 애드센스의 출력 위치를 자유롭게 변경할 수 있습니다. 하지만 이 방법은 비동기식 애드센스 소스코드를 사용한다는 것을 바탕으로 개발되었기 때문에, 비동기식이 아닌 동기식 애드센스 소스코드를 사용하고 있거나, 티스토리에서 비동기 애드센스 코드를 사용하는 방법 글에서 설명하고 있는 방법이 아닌 다른 방법으로 비동기식 애드센스 소스코드를 사용하고 있는 경우에는, 이 글에서 설명하고 있는 방법을 사용할 수 없습니다.

또한 이 글에서 설명하고 있는 방법이 최선의 방법이라고 할 수는 없으며, 이와는 다른 방법으로 같은 기능을 구현한 소스가 인터넷에 많이 있으니 다른 소스코드도 많이 참고해본 후 이 소스코드를 사용하시기 바랍니다.


마무리


지금까지 비동기식 애드센스 소스코드를 어떻게 하면 더 효율적으로 사용할 수 있는가에 대해서 알아보았습니다. 또한 반응형 스킨을 사용하는 블로그에서 어떻게 하면 광고 게재 정책을 위반하지 않을 수 있는가에 대해서도 알아보았습니다.

구글 애드센스에서는 광고 게재 정책 위반에 대해서 아주 엄격하게 검사를 하고 있기 때문에, 자신의 블로그에 정책을 위반한 사례가 있는 경우에는 반드시 정책 위반 사례를 해소해야 할 것입니다. 그렇지 않으면 지금 당장은 높은 수익을 얻을 수 있을지는 몰라도, 정책 위반으로 인하여 나중에 계정이 비활성화된다면 지금까지 발전시켰던 블로그를 폐쇄해야 하는 최악의 상황이 발생할 수도 있습니다.

따라서 이 글을 참고하여, 특히 반응형 스킨을 사용하고 있는 경우에는, 자신의 블로그에서 정책을 위반하는 사례가 발생하지 않도록 사전에 대비책을 세워두는 것이 좋을 것입니다.
http://www.erzsamatory.net/trackback/72

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기
  1. 2014/03/07 12:36
    날씨가 쌀쌀하네요. 좋은 금요일 되시고, 주말도 잘 보내세요. 유익한 정보 잘보고 갑니다.
    • Walter E.
      Walter E.
      2014/05/06 09:55
      댓글 감사합니다 ^^

      즐거운 금요일 되십시오.
  2. 2014/03/07 15:46
    감사 합니다. 참고해서 공부좀 해야 겠네요.
    반응형 스킨 정말 어렵긴 합니다.
    • Walter E.
      Walter E.
      2014/05/06 09:55
      계속 업그레이드 중이지만, 지금 애드센스 위치도 약간 맘에 안 들어요 ㅜㅜ..

      조만간 또 새로운 위치로 옮겨야겠습니다 ..
  3. Danpung
    Danpung
    2014/04/20 16:31
    광고를 이동하는것 말고
    모바일화면일때 해당광고를 없애고(안보이게하고)
    그위치에 다른사이즈의 광고를 넣는방법이 있을까요?
    • Walter E.
      Walter E.
      2014/05/06 09:54
      모바일 화면이라고 하는 것으로 보아, 반응형 스킨을 사용하지 않는 것 같습니다.

      티스토리 모바일 스킨에서는 자바스크립트를 지원하지 않는 것으로 알고 있습니다.

      그래서 티스토리에서는 어려울 것 같구요.

      그리고 구글에서는 애드센스 광고를 고의로 가리는 행위를 용납하지 않습니다.

      따라서 반응형스킨을 통하여 반응형 애드센스를 사용하는 것이 좋을 것 같습니다.
  4. 2014/09/11 21:10
    좋은정보 잘 알아갑니다~ 반응형 도전해봐야겠어요~
    • Walter E.
      Walter E.
      2014/09/11 21:44
      반응형이 정말 좋습니다 ^^
  5. 비밀방문자
    비밀방문자
    2015/02/26 04:25
    관리자만 볼 수 있는 댓글입니다.
    • Walter E.
      Walter E.
      2015/02/26 11:31
      일단 table 태그가 아니라 div 태그를 사용하는 것이 좋습니다. table은 동적으로 형태를 바꾸는 것이 어렵기 때문입니다.

      <div style="max-width:692px;width:100%;height:280px;margin:{여백-위} auto {아래-여백} auto;">
      <!-- 애드센스 1 -->
      <div id="first-ads" style="max-width:336px;width:100%;height:280px;float:left;">{애드센스}</div>
      <!-- 애드센스 2 -->
      <div id="second-ads" style="max-width:336px;width:100%;height:280px;float:right;">{애드센스}</div>
      </div>

      위 처럼 작성하면 글 상단에 애드센스 광고 두 개를 나란히 배치할 수 있습니다.

      그리고 모바일 환경에서 광고의 위치를 바꾸기 위해서는 이 글에서 설명했던 방법을 이용하면 됩니다. 모바일 환경을 감지하는 가장 쉬운 방법이 화면의 해상도입니다. jQuery를 이용하여 해상도를 구한 후, 모바일 환경이라면 append를 이용하여 다른 DOM 객체에 second-ads 광고를 넣어주면 됩니다. 기존의 second-ads 광고는 삭제해야 합니다.

      그러므로 글을 작성할 때 <div id="mobile-ads"></div>와 같이 특정한 아이디를 가지는 빈 div 태그를 생성해야 합니다.

      그리고 애드센스 광고를 실행해주는 아래의 자바스크립트는 페이지를 불러오는 과정에서 가장 마지막에 삽입되는 것이 좋습니다. 그렇지 않으면 동적으로 광고 위치를 변경시키는데 문제가 발생할 수도 있습니다.

      (adsbygoogle = window.adsbygoogle || []).push({});

      jQuery를 이용한다면 다음과 같은 방법으로 문서 불러오기 완료 후 애드센스 코드가 실행되게 할 수 있습니다.

      jQuery(window).load(function() {
      (adsbygoogle = window.adsbygoogle || []).push({});
      });

      마지막으로 애드센스 스크립트 파일을 불러오는 <script ~ 부분은 페이지에서 한 번만 사용해도 됩니다. 이 파일은 <head> 영역에 한 번만 넣으면 됩니다.