반응형 사이트나 블로그로 개편한 후 구글 애드센스에서 제공하는 반응형 광고를 이용한 구현이 보편화 되고 있습니다.

그 수익률 면에 있어서도 기존에 비한 소폭/대폭 상승을 기대할 수도 있었습니다.

 

구글 애드센스 반응형 광고에서는 스마트 크기 조정 방식과 고급(수정 필요) 방식의 두가지 구현 방법을 제공하고 있는데요, 보통은 스마트 크기 조절 방법을 통하여 손쉽게 페이지에 구현하고 계실 것입니다.

하지만 조금 더 세밀하고 복잡한 페이지 레이아웃에서는 미디어쿼리를 이용한 고급 방법을 이용하여 페이지와 공간에 적합한 크기를 구현하게 됩니다.

 

여기서 일반적으로 많이 사용하고 계시는 스마트 크기 조정 방식에서 한가지 팁을 드리고자 합니다.

.


아래와 같이 구글 애드센스 반응형 광고 코드를 얻은 후 자신의 페이지에 그대로 붙여넣을 경우 광고 포멧 유형은 auto 방식으로 페이지 가로 사이즈와 폭에 맞추어 자동으로 사이징된 광고가 노출되게 됩니다.

 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 본문하단반응형 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2443xxxxxxxxxxx"
     data-ad-slot="24xxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

이 경우 많은 분들이 느끼셨겠지만, 광고 구현 배치 위치에 따라 다르겠지만 일반적인 블로그의 경우 본문의 가로 폭이 넓으므로 가로 수평형 광고만 노출되는 경우가 많아 광고 노출 및 수익 면에서 높은 수치를 보여주지 못하게 됩니다.

특히나 본문 하단에 위치할 경우에는 더더욱 그러하겠습니다.

 

반응형 광고auto

 

이럴 경우 직사각형 형태의 광고를 노출시켜야 하는데요, 아래와 같이 format 타입을 rectangle 로 변경해 주게되면, 수평형이 아닌 무조건적인 직사각형 형태의 광고가 노출되게 됩니다.

 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 본문하단반응형 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2443xxxxxxxxxxx"
     data-ad-slot="24xxxxxxxxx"
     data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

아래는 rectangle 형태로 변경한 후 광고가 노출되는 화면입니다.

 

반응형 광고rectangle

 

 

복잡한 미디어쿼리를 이용하지 않고도 간단하게 직사각형 형태의 광고를 노출시킬 수 있었으며, 이는 구글 애드센스에서 지원하는 format 형식을 변화시켜 다양항 형태의 광고 크기를 노출실 수 있겠습니다.

 

구글 애드센스 data-ad-format 태그의 종류 (일반적인 모양 정의)

"rectangle" - 직사각형 형태

"vertical" - 수직 형태

"horizontal" - 수평 형태

 

위 3가지로 조합하시면 되겠으며, 이들을 쉼표로 조합하여 "rectangle, horizontal" 형태로 구현할 수도 있겠습니다.

 

구글 애드센스 반응형 광고 단위 만들기 도움말 페이지

 

본인의 사이트와 블로그, 광고 게재 위치에 따라 다양하게 조정 사용하시면 되겠습니다.


  1. Favicon of https://uomostory.tistory.com BlogIcon mapsi 2014.04.30 11:41 신고

    저도 이 내용 어제 알았는데 오늘 다시한번 반복하니 확실히 알겠습니다.
    반응형 쓰시는 초보분들에게는 여러가지로 도움이 될것 같고 제가 돌아다녀보니깐
    스마트크기와 고급코드 섞어서 제가각 다 용도가 다양하더라구요
    좋은 하루 되세요

    • Favicon of https://cezacx2.tistory.com BlogIcon 귀하신분 2014.04.30 14:25 신고

      오잉?^^ㅎ 전 처음 반응형 광고 달 때 애드센스 도움말 보고 적용했었는데, 하단 광고에 대한 중용성을 인지하지 못하고 있다가 mapsi 님 말씀 듣고 혹시나 해서 다시 적용해봤습니다^^ㅎ 어디에 설치되든 주위와 잘 조화를 이루고 이용자들에게 친화적인 광고가 되어야 하겠습니다^^ㅎ 댓글 감사합니다^^

  2. Favicon of https://happy-box.tistory.com BlogIcon 건강정보 2014.05.02 11:25 신고

    좋은 정보 잘 보고 갑니다~^^

  3. Favicon of https://happyqueen.tistory.com BlogIcon 가을사나이 2014.05.06 12:57 신고

    오늘도 좋은정보 얻네요

  4. 2014.05.19 14:30

    비밀댓글입니다

    • Favicon of https://cezacx2.tistory.com BlogIcon 귀하신분 2014.05.20 09:06 신고

      이미 잘 적용하셨네요~~~ 댓글 남기도록 하겠습니다~~~

    • 2014.05.20 10:54

      비밀댓글입니다

  5. Favicon of https://ace03k.tistory.com BlogIcon 에이스케이 2015.10.04 04:15 신고

    찾고 있던 굉장히 좋은 정보입니다~ 감사합니다

    • Favicon of https://cezacx2.tistory.com BlogIcon 귀하신분 2015.10.04 17:29 신고

      누추한 곳까지 찾아주셔서 감사합니다~~ 도움 되셨다면 제가 더 행복이죠^^

  6. Favicon of https://qlsdl0575.tistory.com BlogIcon 김 루 2018.01.06 00:53 신고

    저는 님처럼 저렇게 직사각형이 아니라 글쓴이님 하단의 반응형처럼 크기만 크게 나오는데 뭐가잘못된걸까요? ㅠ

    • Favicon of https://cezacx2.tistory.com BlogIcon 귀하신분 2018.01.06 20:52 신고

      bertical을 지정하셨다면 조금 기다려보셔야 해요~ 적용되는데 시간이 좀 걸렸던 것 같은데.. 그리고 방문자의 화면 비율에 따라서 다르게 표현될 수 있으니, 정확하게 직사각형만 출력되지는 않습니다. 많은 변수에 따라서 여러 형태의 광고가 출력되게 됩니다...
      혹시 직사각형만 원하신다면 큰직사각형의 광고를 고정으로 픽스시키는 것이 좋습니다...