▶애드센스 반응형 고급코드 수정 도우미 바로가기


    반응형 광고단위는 반응형 웹 구현을 위한 광고단위입니다.

    구글에서 제공하는 코드를 그대로 사용하면 별다른 설정이 필요없는 반면에, 무조건 가로로 꽉찬 광고가 나타납니다.

    그러나 스타일 시트 수정을 통해 화면크기에 따라 원하는 광고를 노출시킬 수 있습니다.

    하지만 스타일 시트를 수정하는 것은 어느정도의 HTML/CSS지식이 필요합니다.

    이 과정에서 어려움을 겪으시는 분들을 위해 이 도구는 클릭 몇번으로 스타일시트 수정을 도와드립니다.

    반응형 광고단위 코드를 붙여넣고 설정을 마치면 상황에 맞게 생성된 코드를 가져올 수 있습니다.


    반응형 광고단위 베타테스트에서는 스마트크기조정모드와 고급모드가 있었는데,

    베타테스트가 끝나면서, 실수로인해 정책위반의 위험이 높은 고급모드는 아예 CSS지식이 있는 사용자만 쓸 수 있게되었습니다.(직접 코드를 짜야하므로)

    반응형 고급코드 수정도우미는 일반 반응형 광고단위를 붙여넣으면 자동으로 고급코드에 맞게 변환시켜줍니다.


    ※주의:

    수정도우미가 업데이트되면서, 특정 화면크기 (이상/이하)옵션이 생겼습니다. 이부분 꼬이지 않도록 되도록이면 간단한 구조로 설정해주세요.(이상 또는 이하로 통일)

    자칫하면 애드센스 정책에 위반될 수 있으니, 가능한 모든 화면크기에서 테스트해보시고 광고가 잘린다거나 이상하게 표시되는 경우가 있으면 즉시 광고를 내리고 수정해주세요.

    입력된 값에대한 유효성 체크가 거의 없으므로, 잘못된 값이나 오타에 의한 정책위반은 책임지지 않습니다.


    ※코드 수정 근거 : https://support.google.com/adsense/answer/6307124?hl=ko&ref_topic=1307438 - 고급 부분


    .


    자세한 사용방법


    먼저 에드센스에서 크기가 반응형인 광고단위를 생성한 후 코드를 가져옵니다.




    복사한 코드를 붙여넣습니다.



    원하는대로 설정을합니다.

    조건을 더 추가하려면 +버튼을 누르고, 조건을 삭제하려면 오른쪽의 -버튼을 누릅니다.


    오른쪽 위의 물음표 아이콘을 클릭하면 기본크기의 개념기기별 가로픽셀의 예시를 확인할 수 있습니다.


    설정이 완료되면 적용버튼을 클릭합니다.



    적용버튼을 클릭하면 미리보기창과 함께 생성된 코드가 나타납니다.


    미리보기를 통해 창크기를 조절하면서 변하는 광고단위의 크기를 확인할 수 있습니다.

    (실제 애드센스 광고는 창크기를 줄이거나 늘려도 실시간으로 바뀌지는 않습니다.

    또한 미리보기에 여백이 있어서 오른쪽이 잘리는 경우도 있는데, 실제 사이트에서는 여백 등의 조건이 다르므로

    적용 후에 직접 따로 테스트 해보셔야합니다.)


    생성된 코드는 수정이 완료된 고급모드 코드이므로, 애드센스에서 가져온 코드와 동일하게 사용하면 됩니다.




    주의사항

    • 설정을 잘못하여 광고 일부가 잘려서 게재되는 경우 정책위반에 해당합니다. 반드시 실제 적용 후 테스트 해보셔야합니다.
    • 모바일 최상단에 세로 100px이상인 광고가 나타나지 않도록 주의하세요.


    저작자 표시 비영리 동일 조건 변경 허락
    신고
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • 이전 댓글 더보기
    • BlogIcon 카나리스
      2015.08.24 12:39 신고

      다른 모바일 환경은 괜찮은데
      아이폰5만 계속 이상하게 표시되네요.;;
      100%해도 320px를 넣어도 계속 옆이 잘립니다.
      아무래도 스킨에서 왼쪽 공백 때문에 생기는거 같네요.

      • BlogIcon 뭐하라
        2015.08.24 13:24 신고

        제경우에는 광고를 감싸는 div에 좌우 여백을 줄이는 방식으로 해결했습니다.
        <div class="adbox"></div>안에 광고를 넣고
        다음을 css에 추가했습니다.
        .adbox{margin-left:-8px;margin-right:-8px}

      • BlogIcon 카나리스
        2015.08.24 14:07 신고

        아하 그렇군요.
        감사합니다. 시도해보겠습니다!

    • BlogIcon 난별석
      2015.11.04 09:16 신고

      감사합니다.
      덕분에 반응형 스킨에 원하는 광고를 달 수 있게 되었어요.
      ㅎㅎ
      막혔던 게 뚫린 기분이라 기분이 좋네요.^^~

    • BlogIcon 엣지 Edge
      2016.01.11 07:07 신고

      이상한점이 있습니다. 728*90 광고를 800피트 이상일때만 나오게 하고 나머지는 죄다 336*280 광고만 나오게 했는데도 불구하고 저기 사이트에서 구성한걸로 보면 미리보기에서는 잘나오는데 제 블로그에서는 적용이 안되네요. 저도 반응형 스킨이라서 줄이면 광고도 줄어들어야 하는데 줄지않고 728*90 으로 계속 유지가 됩니다 ㅠㅠ

      지금 예) 뭐하라님의 블로그도 반응형이신데 하단 728*90 광고가 pc 화면에서는 잘나오는데 줄이면 728*90 광고가 줄어들지 않네요. 이건 수정이 불가능한것인지 궁금합니다.

      • BlogIcon 뭐하라
        2016.01.11 11:49 신고

        실제광고는 원래 로딩될 당시 화면크기만 인식합니다
        창을 줄인상태에서 새로고침해보세요

    • BlogIcon 모피우스
      2016.01.15 20:46 신고

      이건 완전 대박입니다.

    • BlogIcon baikgom1004
      2016.02.20 17:09 신고

      뭐하라님처럼 베스트공감, 카카오스토리, 페이스북 공유하기 위에 광고를 추가하려면 HTML어느부분에 추가하면되나요?

      • BlogIcon 뭐하라
        2016.02.22 21:12 신고

        http://nubiz.tistory.com/487
        이 글을 참조해보세요

    • BlogIcon baikgom1004
      2016.02.23 20:55 신고

      http://nubiz.tistory.com/487를 참고하여 추가한 하단 광고는 항상 광고가 빨리뜨고 또 안뜨는 적이 없습니다. 하지만 상단광고를위에 추가했을때는 광고가 뜨기는 하나 새로고침하였을 때도 늦게 뜨고 광고가 뜨지 않을때도 있습니다. 왜 그런건지 혹시 아시나요?(그리고 모바일에선 상단광고가 아예 뜨지않습니다)

      • BlogIcon 뭐하라
        2016.02.24 09:44 신고


        .read { width: 100%; height: 50; }

        height에 단위가 빠져있어서 320px이하 모바일에서 광고가 안나타났을겁니다
        광고 늦게뜨는 문제는 잘모르겠군요..

      • BlogIcon baikgom1004
        2016.02.25 00:59 신고

        <!--광고위치 3: 본문 위-->아래에 직접적으로 반응형광고단위를 추가하면 로딩이 느려지는것 같습니다. 다른방법으로 본문위에 추가하는 방법을 알려주셨으면 합니다.

      • BlogIcon 뭐하라
        2016.02.25 17:12 신고

        이번에 추가된 반응형 애드센스 플러그인을 사용해보는것도 좋겠습니다!

    • BlogIcon ,,.-
      2016.03.31 08:41 신고

      기존에 하단에 반응형광고를 포스팅마다 넣어주었는데.. 이 스킨을 꼭 쓰고 싶은데.. 하단광고가 안나오더라구요. 일일히 수정하기는 힘들고 살릴수 있는 방법은 없을까요?

      • BlogIcon 뭐하라
        2016.03.31 11:32 신고

        무슨이유에선지 반응형코드가 height값을 못잡아서 발생하는문제입니다.
        님 블로그의 경우엔
        css에 .tt_adsense_bottom{height:250px;}
        을 한번 추가해보세요.

    • BlogIcon ,,.-
      2016.03.31 13:48 신고

      죄송하지만.. 이걸 어느부분에 추가하면 될까요...

    • BlogIcon ,,.-
      2016.03.31 13:51 신고

      안되네요ㅜㅜ

      • BlogIcon 뭐하라
        2016.04.02 21:22 신고

        2단형스킨을 새로 업로드했으니 이용해보세요
        http://nubiz.tistory.com/641

    • BlogIcon ,,.-
      2016.04.02 21:23 신고

      우아 감사합니다ㅜㅜ 님 좀 짱인듯


    • 2016.04.27 15:30

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.04.28 16:32 신고

        지금은 해결하셨는지 잘 나오네요.
        모바일 상단에 336 280광고는 정책위반의 소지가 크니 유의하세요.


    • 2016.04.28 16:38

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.04.28 17:18 신고

        노트시리즈도 스마트폰으로 간주해서 위험하다고 생각됩니다. 기준을 401이상으로 하시는건 어떨까요?


    • 2016.04.28 17:21

      비밀댓글입니다


    • 2016.04.28 17:34

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.04.28 18:30 신고

        애스센스에서 제시하는것은 모바일에서 상단 높이 100입니다

    • BlogIcon 헤샤브
      2016.05.22 18:22 신고

      너무 좋아요
      잘 쓰겠습니다

    • BlogIcon 고두암
      2016.05.25 04:42 신고

      뭐하라님~ 상단 코드를 PC는 가로 728 세로 90으로, 모바일은 320에 100으로 수정하니 PC와 모바일 모두 박스형이 나오는데,
      어떻게 해야 할지 모르겠습니다. 다른 블로그 2개는 정상적으로 나오는데, 블로그 한개만 그렇습니다. 스킨은 모두 머하라님 스킨입니다.
      왜 이럴까요? 또 하단도 Pc 336에 280으로 모바일 은 300에 250으로 수정하여 올리니 아예 광고가 뜨지를 않습니다.

      • BlogIcon 뭐하라
        2016.05.25 11:44 신고

        제가확인했을떄는 모두 정상으로 나옵니다
        다만 상단광고에서 400px이상에서 728광고를 설정하셨는데, 그럼 411같은 기기에서도 728광고가나와서 광고가 짤립니다 728광고는 적어도 800px이상 에서 표시되도록해야합니다

      • BlogIcon 고두암
        2016.05.25 13:26 신고

        그렇군요! 그럼 스킨에서 px를 수정하면 되는 건지요!

      • BlogIcon 뭐하라
        2016.05.25 13:28 신고

        이 도우미 이용해서 조건을 추가해서 다시만드시면됩니다

      • BlogIcon 고두암
        2016.05.25 13:37 신고

        아! 그렇군요~ 친절한 답변 감사합니다.


    • 2016.06.16 13:58

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.06.16 14:02 신고

        네 이름은 알파벳으로 시작해야하고 영문숫자로 띄어쓰기없어야합니다
        플러그인에넣어도됩니다

    • BlogIcon 고두암
      2016.07.20 01:38 신고

      태그와 카테고리의 글을 클릭했을 때 화면이 뜨지 않고 이동되지 않는데 뭐가 잘못된지를 모르겠습니다.

      • BlogIcon 뭐하라
        2016.07.20 13:50 신고

        잘되고 있네요 일시적인 문제였나봅니다

      • BlogIcon 고두암
        2016.07.20 15:49 신고

        첫번째와 두번째 블로그는 잘 되는데, 세번째(딱따구리 꿈해몽쉼터)가
        안되고 있습니다. 저는 아무리 봐도 문제가 뭔지를 모르겠습니다.

      • BlogIcon 뭐하라
        2016.07.20 15:52 신고

        mark5의 필수수정사항을 수정하지 않으셨네요~

      • BlogIcon 고두암
        2016.07.20 17:03 신고

        아~ 그렇군요! 알려주셔서 감사합니다.


    • 2017.01.08 07:35

      비밀댓글입니다

    • BlogIcon 해밝세상
      2017.01.08 07:47 신고

      네 감사합니다^^

티스토리 툴바