반응형 스킨사용하시는분들이 많아지고 있는데요, 그 전에는 포스트상단에 광고를 2개넣어도 모바일에서 광고가 따로 들어가니 문제가 없었습니다.

    그러나 반응형 스킨에서는 광고를 2개 넣는다고 해도 모바일환경에서 접속했을 때 광고가 너무 커 정책위반을 할 수도 있었습니다.


    여기 제가 사용한 방법을 소개시켜드라고자 합니다.

    제가 사용한 반응형 스킨은 http://blog.readiz.com/ 에서 제공받았습니다.


    반응형 광고단위 사용하기

    이미 반응형 스킨을 사용중이신 분들은 애드센스의 반응형 광고단위도 사용하고 계실 거라고 생각합니다.

    반응형 광고단위란 기기의 해상도, 브라우저의 가로 크기에 따라 광고단위 크기가 조절되는 광고단위입니다.


    새 광고단위를 만들면서 반응형 광고단위(베타)를 선택할 수 있다.



    반응형 광고단위는 광고단위 크기를 마음대로 바꿀 수 있으므로 한번 만들어놓으면 레이아웃이 바뀌더라도 광고단위를 새로 생성할 필요가 없어 편리합니다.


    반응형 광고단위는 두가지 방식의 코드를 제공합니다.



    스마트 크기 조정: 따로 코드 수정 없이 화면 해상도에 알맞은 광고가 출력됩니다. 설정에따라 완전자동, 가로형, 세로형, 직사각형 광고단위 위주로 게재되게 할 수 있습니다.


    고급: 사용자가 직접 가로px에 따라 표시될 광고단위 크기를 설정가능합니다.


    이 포스트 목적은 상단에 광고2개를 나란히 배치하는 것이므로 '고급' 코드를 사용할 것입니다.

    (스마트 크기조정으로는 모바일에선 가로형, 일반 웹에선 직사각형 같은 설정이 어렵습니다.)


    고급 코드의 구조는 다음과 같습니다.

    <style>

    .광고이름 { width: 320px; height: 50px; }   <-가로가 최소px보다 작을때 혹은 반응형 미지원 브라우저에서 320x50 크기 광고 게재

    @media(min-width: 500px) { .광고이름 { width: 468px; height: 60px; } }   <-가로 500px이상일 때 468x60크기 광고 게재

    @media(min-width: 800px) { .광고이름 { width: 728px; height: 90px; } }   <-가로 800px이상일 때 728x90크기 광고 게재

    </style>

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    <!-- 광고이름 -->

    <ins class="adsbygoogle 광고이름"

         style="display:inline-block"

         data-ad-client="ca-pub-ID"

         data-ad-slot="광고"></ins>

    <script>

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

    </script>

    여기서 사옹자가 수정할 수 있는 부분은 @media(min-width로 시작하는 부분입니다.


    이 포스트에서는 반응형 광고단위를 2개 사용할 예정입니다.


    계획

    본문 상단에 2개의 광고를 나란히 배치하기 위해 다음과 같은 레이아웃구성을 생각해봤습니다.


    가로 픽셀이 320~정도인 모바일에서는 320x50 크기의 광고단위가 위아래로 배치되고,

    가로 픽셀이 700이 넘어가는 환경에서는 가장 수익률이 좋은 직사각형 광고가 좌우로 나란히 배치되게할 계획입니다.



    .


    적용하기

    아래 html코드에서 빨간색글자로 된 부분을 자신의 애드센스 코드로 바꿔서 사용하시면 됩니다.

    수정 후 skin.html에서 알맞은 위치에 붙여넣습니다.(##_article_rep_desc_## 위쪽)

    <div class="adsenseL">

    <style>

    .adsense1 { width: 320px; height: 50px; }

    @media(min-width: 320px) { .adsense1 { width: 320px; height: 50px; } }

    @media(min-width: 720px) { .adsense1 { width: 350px; height: 250px; } }

    @media(min-width: 1000px) { .adsense1 { width: 480px; height: 280px; } }

    </style>

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    <!-- 왼쪽에 들어가는 광고 -->

    <ins class="adsbygoogle adsense1"

         style="display:inline-block"

         data-ad-client="ca-ID"

         data-ad-slot="slot 번호"></ins>

    <script>

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

    </script>

    </div>


    <div class="adsenseR">

    <style>

    .adsense2 { width: 320px; height: 50px; }

    @media(min-width: 320px) { .adsense2 { width: 320px; height: 50px; } }

    @media(min-width: 720px) { .adsense2 { width: 320px; height: 250px; } }

    @media(min-width: 1000px) { .adsense2 { width: 336px; height: 280px; } }

    </style>

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    <!-- 오른쪽에 들어가는 광고 -->

    <ins class="adsbygoogle adsense2"

         style="display:inline-block"

         data-ad-client="ca-ID"

         data-ad-slot="slot 번호"></ins>

    <script>

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

    </script>

    </div>


     style.css 맨 밑줄에 다음을 추가합니다.

    .adsenseL {float:left;margin:0px 0px 0px 7px}

    .adsenseR {margin:0px 0px 20px 7px}

     


    모바일 환경에서는 세로로 320x50광고가 2개 게재될 것이고,

    720px이상에서는 320x250크기의 광고가 가로로 2개 게재됩니다.

    1000px이상에서는 그보다 큰 336x280크기의 광고가 2개 게재됩니다.


    반드시 본인의 스킨에 맞춰서 min-width값을 맞춰야 합니다.

    그렇지 않으면 가로 여백이 부족해서 직사각형광고가 세로로 2개 게재될 수 있는데, 경우에따라 컨텐츠를 너무 가려 정책위반이 될 수 있으니 주의하시기 바랍니다.

    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함

    • 2014.06.05 15:06

      비밀댓글입니다

      • BlogIcon 뭐하라
        2014.06.05 16:18 신고

        div를 다빼고 넣으신것같네요.
        광고가 한줄에 한개만 들어가서 그렇습니다
        아니면 방금 이 글에 더 쉬운방법 포스팅해서 트랙백 걸어놨으니 참조해보세요

    • BlogIcon 오자서
      2015.02.09 18:18 신고

      안녕하세요.
      검색하다 여기까지 오게되었습니다.
      다름이아니라....
      데스크탑에서는 상단에 광고 2개...그리고 모바일에서는 광고 하나만 나오게 하고 싶습니다.
      이것을 오랫동안 해보려고 해도 안되네요....ㅠ.ㅠ
      어떻게 하면 될까요?

      • BlogIcon 뭐하라
        2015.02.09 23:01 신고

        현재는 반응형광고단위의 고급코드가 제공되지 않아서 쉽게설명해드리기가 어렵네요
        css 미디어쿼리로 특정 스크린사이즈 이하에서 광고를 없앨 수 있습니다.

        아래는 고급코드 예시입니다.
        <style>
        .adsense2 { width: 0px; height: 0px; }//320보다 작은 화면에서 광고없앰.
        @media(min-width: 720px) { .adsense2 { width: 320px; height: 250px; } }//720px보다 큰 화면에서 광고크기 320x250
        </style>

      • BlogIcon 오자서
        2015.02.10 10:48 신고

        ㅋ 왜그럴까요?
        가르쳐 주신대로 해봤는데....
        이렇게 나옵니다. 이미지를 올릴 수 없어 제가 예전에 작성했던
        포스팅 주소로....

        http://boribab.tistory.com/9063

      • BlogIcon 뭐하라
        2015.02.10 11:31 신고

        상단 2개를 반응형으로 구현하는 것은 상당히 고급기술이에요
        부트스트랩기반스킨 쓰고계시니 이걸로 시도해보세요
        http://nubiz.tistory.com/460