반응형 애드센스 최대 가로 너비 width:100% 가장 크게 설정하는법

이번에 애드센스 반응형 광고를 달게 되면서 알게 된 많은 정보와 팁들, 개꿀몬(GKKmon)이 궁금했던 부분들의 해결법을 알려주려고 한다.

우선 가장 먼저 필요했던 정보는 반응형 애드센스 관련 정보였다. 잡다하지 않게 하나의 광고를 화면의 가로사이즈에 꽉 차게 깔끔하게 구현하고 싶었다. 이러 번의 실패를 거듭해 완성해낸 코드는 바로 이것

코드 Code

<style>
.custom_ad_1{height:280px;width:100%}
 @media(max-width:768px){.custom_ad_1{height:250px;width:100%}}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형 광고 가로 꽉 차게 커스텀 -->
<ins class="adsbygoogle custom_ad_1"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

빨간색 부분엔 본인의 광고 코드를

빨간색 줄을 친 부분에는 애드센스 > 내 광고 > 새 광고 단위 > 에서 광고 크기를 반응형으로 선택한 뒤에 생성된 코드의 data-ad-client="ca-pub-숫자"data-ad-slot="숫자"숫자를 대입시키면 된다.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형 광고 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-이부분"
     data-ad-slot="이부분"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

파랑색엔 임의의 Class명

파란색 부분에는 본인이 원하는 임의의 class 명을 적으면 되고 서로 같아야 한다. 만약 같은 방식으로 광고를 추가하려면, 이전에 사용했던 class 명과는 이름이 달라야 한다. 일단 이 두 가지만 변경한 뒤 그대로 붙여넣으면, 바로 사용 가능한 최대 가로 크기의 반응형 애드센스 광고가

출력된다. 본문 상단 광고인데 데스크탑에서 본문 가로 넓이가 800px이면 800px짜리 광고가 나오고, 모바일에서 300px이면 300px짜리 광고가 나오는 것이다.

화면별로 높이 설정

높이 또한 알아서 최적화된 크기로 불러오고 싶었지만, 아쉽게도 현재로는 구현이 불가능하다. 때문에 높이는 고정된 사이즈를 사용해줘야 한다. 위의 코드대로라면 데스크탑에선 height:280px 니까 280px 높이, 800×280 의 광고가 나오고, 768이하인 모바일 화면@media(max-width:768px) 에서는 height:250px 니까 300×250의 광고가 나오게 된다.

.custom_ad_1{height:280px;width:100%}부분이 원본 광고 크기, PC, 데스크탑에서 보여질 크기고 @media(max-width:768px){.custom_ad_1{height:250px;width:100%}} 이 부분이 넓이가 768px 이하인 모바일에서 보여질 크기를 설정하는 것이다.

모바일로 규정할 너비나, 본인이 원하는 대로 어떤 가로 크기에서 다른 설정을 적용시킬지 커스텀할수도 있다. @media(max-width:768px)768px 이하에서 적용하라는 뜻이고 @media(min-width:768px)768px 이상에서 적용하라는 뜻이다. 아래와 같이 연속해서 사용할수도 있다.

<style>
.custom_ad_1{height:280px;width:100%}
@media(max-width:1200px){.custom_ad_1{height:260px;width:100%}}
@media(max-width:768px){.custom_ad_1{height:250px;width:100%}}
</style>

위와 같이 설정하면 768px 이하의 모바일에선 높이가 250px, 768px~1200px 의 크기에선 260px의 높이, 1200px 이상에선 280px의 높이로 표현된다.

코드 문외한 유저들도 이해할 수 있도록 상세히 풀어서 설명해 놨으니까, 너무 어려워하지 말고 차근차근 본인의 입맛대로 커스텀하면 된다. 만약 특정 크기에서 광고를 숨기고 싶다면, 위에서 말한 대로 설정한 뒤 해당 넓이와 높이를 지우고 display:none을 입력하면 된다

.custom_ad_1{display:none}

앞서 나열한 수정 방법들은 반응형 광고 코드 수정 애드센스 공식 도움말에서도 추천하고 있는 방법이니까, 수정하면 애드센스 약관이나 정책에 어긋나지 않는지 걱정하지 않아도 된다.

추가 기능

그리고 추가 기능 중에 data-full-width-responsive="true"를 사용하면 휴대기기, 모바일 화면에서 상위요소의 폭을 무시하고 최대 가로 크기로 나오게 설정 가능한데, 이상하게 이 기능을 사용하면 위에서 설정한 높이가 먹히지 않으니 참고하길 바란다. data-full-width-responsive="false"는 반대로 반드시 전체 폭을 무시하지 않게 설정한다.

태그 매개변수 사용 방법 애드센스 공식 도움말에선 상위요소를 무시하고 전체 폭을 사용하는 것이 잠재 수익 면에서 유리하다고 말하고 있다. 갑자기 틀을 깨버리니까 눈에 띄어서 어찌 보면 당연한 결과인데, 이게 광고로 구분되어 더 보기 좋은 상황도 있고, 미관을 해치는 경우도 있다. 가독성을 중시하고 미관을 해치기 원치 않는다면 false를, 미관이나 가독성보다는 클릭률과 수익을 원한다면 true를 사용하면 되는 것인데, 개인적으로는 콘텐츠 내부는 false가 자연스럽고, 최상단이나 최하단 같은 콘텐츠의 시작과 끝부분에서는 true가 더 자연스럽다고 생각한다.

그럼 가장 효율적인 높이는 몇 px?

이쯤 하면 설정이나 사이트와의 조화는 거의 끝난 셈이다. 마지막으로 높이는 몇 px로 설정하는 것이 가냥 효율적이냐 하는 것인데, 실험해본 결과 애드센스 광고 크기에 ‘가로 배너’ 항목에 있는 높이로 설정할수록 디스플레이 광고 비율이 높아지고, 사용 가능한 광고가 없는 경우가 줄어든다.

애드센스를 제대로 운영해보고 테스트해본 유저들이라면 알고 있는 명백한 사실이자 개꿀팁이 있는데, 애드센스에서 공식적으로 말하는 사실과는 다르게, 대부분의 상황에서 ‘텍스트 및 디스플레이 광고’ 보다, ‘디스플레이 광고만’ 나오는 게 클릭율과 광고단가, 수익 등 모든 면에서 월등하다.

모든 광고주가 적절하고 퀄리티 있는 이미지를 제공하지 않기 때문에, 텍스트를 포함시킨 광고를 노출할 시 더욱 많은 광고주들이 경쟁이 붙기 때문에 더욱 높은 단가가 책정된다는 게 공식 입장인데, 실제로 테스트해보면 전혀 아니다. 심지어 대부분의 콘텐츠가 텍스트로 이루어져 있어, 텍스트 광고에 더욱 특화되어있는 사이트에서도 ‘디스플레이 광고만’ 나오는 게 더욱 수익이 높았다.

때문에 무조건 큰 높이를 설정하는 것 보다, 애드센스에 기본으로 설정되어 있는 가로배너의 높이인 250px, 100px, 90px, 60px, 50px 로 설정하는 것이 더욱 많은 디스플레이 광고를 노출시키고, 이는 수익증가로 이어질 수 있다.

개꿀몬(GKKmon)은 250px이나 280px로 설정했을 시 큼지막한 광고들의 이미지 퀄리티가 좋고, 텍스트로 나온다 해도 예전처럼 싼 티 나는 광고가 아니라 얼핏 보면 디스플레이 광고 같은, 미관적으로 나쁘지 않은 녀석들이 나왔기 때문에 250px의 높이를 선택했다. 유저분들도 본인의 취향, 사이트나 블로그의 성격, 수익률을 고려해서 크기를 조절해 보고, 본인의 사이트에 가장 적합한 크기를 찾길 바란다.