애드센스 광고 크기 내맘대로 설정하기

블로그를 꾸미다 보면 애드센스 광고 크기 조절을 하고 싶어질 때가 옵니다.

어떻게 해야지 광고 크기를 내맘대로 할 수 있는지 알려드리겠습니다.

애드센스 광고 크기 내맘대로 설정하기

애드센스 광고 크기 왜 조절할까?

보통은 사람들이 반응형 광고를 많이 사용합니다. 데스크탑이랑 모바일에 알아서 맞게 최적화 되기 때문이죠.

하지만 그래도 나만의 스타일로 광고 크기를 조절하고 싶을 때가 있습니다.

티스토리 블로그가 아닌, 사이트나 워드프레스를 운영하는 경우 내 사이트에 적합하게 수정을 해야 하는 경우가 있습니다.

물론 티스토리도 광고가 너무 커서 줄이고 싶은 경우도 있습니다. 제 워드프레스 사이트도 지금 광고 크기를 줄여놓은 상태입니다.

반응형 광고를 사용하고 있지만, 데스크탑으로 접속하면 보여지는 광고 높이를 제한했습니다.

그리고 모바일로 접속하는 경우에도 광고 높이를 제한했습니다. 첫 페이지부터 광고가 과다하게 보이지 않게 하기 위함 입니다.

제 블로그에 방문하는 사람들이 광고에 대한 반감을 줄이고, 컨텐츠에 집중할 수 있도록 배치한 것입니다.

그리고 광고 크기가 적당하면, 한눈에 들어오기 때문에 좋은거 같습니다. 광고가 너무 크다면 스크롤을 해서 봐야 합니다.

이 경우, 광고가 너무 티나기 때문에 바로 넘겨버립니다. 혹은 모바일에서 터치를 하면서 넘기다가 잘못 클릭되는 경우가 발생합니다.

이런경우, 소비자는 바로 광고 페이지를 닫아버리기 때문에 무효클릭이 발생하거나, 광고 단가에 영향이 있을 수 있습니다.

그래서 적당한 광고 크기를 설정해서 사용자에게 거부감 없이 제공하는게 좋습니다.

애드센스 광고 크기 조절하기

가장 쉬운 방법은 애드센스에서 광고를 생성할 때 반응형이 아닌 고정형으로 생성하는 방법입니다.

일단 하는 고정형 광고를 생성하는 방법으로는 [애드센스-광고-개요-광고단위기준]로 이동 하세요.

그리고 [신규 광고만들기]에서 [디스플레이광고]를 선택 그리고 [신규 광고만들기]에서 [디스플레이광고]를 선택 합니다.

애드센스 광고 크기 설정하기

그러면 우측 메뉴에 광고 크기를 설정할 수 있는 부분이 나옵니다. 저 부분에서 고정으로 클릭해줍니다.

그러면 광고 크기를 조절할 수 있는 공간이 생깁니다. 너비랑 높이를 설정할 수 있습니다.

본인이 희망하는 너비랑 높이 수치값을 입력해봅니다. 그러면 왼쪽에 미리보기 광고가 변하면서 광고 크기를 확인할 수 있습니다.

하지만 고정된 광고크기를 사용하는 경우, 입찰된 광고 갯수가 부족해서 광고가 제대로 송출되지 않을 수 있습니다.

보통 광고는 300*250 사이즈 광고가 가장 많은것으로 알려져 있습니다. 요즘엔 모바일로 인터넷을 하는 세상이기 때문입니다.

그래서 모바일에 딱 맞는 광고 사이즈가 바로 300*250 사이즈 입니다. 하지만 딱 300*250일 필요는 없습니다.

적당히 사각형 모양의 광고형태라면 문제 없습니다. 이렇게 특정 너비랑 높이를 설정해서 광고 코드를 생서하면 아래와 같은 코드로 생성됩니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 광고 고정형 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

저 위의 소스에서는 너비를 336px, 높이를 280px로 설정했습니다. 이렇게 내가 원하는 사이즈로 설정해서 생성하면 됩니다.

광고 크기 설정의 비밀

바로 위에서 고정형으로 광고를 생성하는 방법을 알려드렸습니다. 반응형과의 차이는 내가 광고 크기를 설정할 수 있다는 점 입니다.

하지만, 이렇게 되면 광고를 사이즈 별로 만들어서 사용해야 합니다. 광고를 여러개 만드는게 불편하거나 싫은 경우도 있습니다.

광고를 최소한으로 만들어서 사용하고 싶은경우 알아두면 좋은 방법이 있습니다.

결론부터 말하면, 반응형이랑 고정형이랑 광고 코드는 똑같다 입니다. 한 줄만 바꿔주면 반응형이 고정형 광고가 됩니다.

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

고정형이랑 반응형의 차이는 저 코드에서 바로 style 부분이 다릅니다. 스타일 부분에 높이랑 너비값을 지정해주면 고정형 광고가 되는 것입니다.

광고 코드를 다르게 생성하면, 해당 광고에서 발생하는 수익을 따로따로 확인할 수 있는 장점이 있습니다.

광고 코드를 많이 만드는것을 꺼려하는 사람이라면, 이렇게 코드를 응용해서 사용하면 좋습니다.

1개의 광고 코드로 다양한 모양으로 사이트나 블로그에 적용할 수 있습니다.

특별하게 어느 위치에서 광고 수익이 발생하는지 상관없고 광고 단위를 최소화해서 관리하고 싶은경우 사용하면 좋은 방법입니다.

하지만 광고 코드를 수정하는것은 초보자에게 어렵습니다. 그래서 쉽게 수정하는 방법을 알려드리겠습니다.

광고 크기 쉽게 설정하기

애드센스 헬퍼 사이트를 이용하면 편하게 광고 코드를 수정할 수 있습니다.

일단 주의사항으로는 반응형 광고 코드로 사용해야 합니다.

기존에 사용하던 반응형 코드가 있다면, 그것을 활용해도 됩니다. 없다면 새로 만들어서 활용하면 됩니다.

애드센스 헬퍼 사이트를 이용한 광고 크기 설정하기

사이트에 접속을하고, 코드를 삽입하라는 부분에 반응형 광고 코드를 삽입하면 됩니다.

그리고 아래 설정 부분에서 내가 원하는 조건으로 광고 크기를 설정해주면 됩니다.

설정 부분에 대해서 자세히 설명 드리겠습니다. 크게 3가지가 있습니다.

  • 기본크기 (1~399px)
  • 가로픽셀이 400px 이상 (400~767px)
  • 가로픽셀이 768px 이상 (768px 이상~)

이렇게 3가지로 나눠서 설정이 가능합니다. 쉽게 설명드리면 768px 기준으로 데스크탑이랑 모바일을 나눈다고 생각하면 됩니다.

저 기본값을 그대로 설명하면, 모바일에서는 320*250 혹은 336*280 크기의 광고를 송출합니다. 그리고 데스크탑에서는 728*90 크기의 광고를 송출합니다.

모바일의 경우 스마트폰도 있고, 테블릿도 있습니다. 그래서 사용하는 기기 환경이나 조건에 따라서 320*250 혹은 336*280 크기의 광고가 송출됩니다.

그 이상의 환경인 데스크탑에서는 728*90의 광고가 나오는 개념입니다.

보통의 경우라면 저 기본설정을 그대로 사용해도 무방합니다.

조금 더 자세한 설정이나, 특정 기기에 최적화 시키고 싶다면 기기별로 px값을 찾아봐야 합니다.

설정을 완료했다면, 아래 빨간 버튼을 누르면 수정된 코드가 생성됩니다. 그 코드를 사용하면 됩니다.

이 사이트에 사용중인 광고 코드

<style>
.myAd2534 { width:100%; height: 150px; }
@media(min-width: 400px) { .myAd2534 { width: 100%; height: 150px; } }
@media(min-width: 768px) { .myAd2534 { width: 100%; height: 100px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle myAd2534"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxx"
     data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

제 사이트에 적용중인 광고 코드입니다. 참고하시기 바랍니다. 저는 가로폭은 100% 로 설정했습니다.

어떤 기기에서 접속해도 가로폭은 꽉 차게 보이게 했습니다. 그리고 높이의 경우 모바일에서는 150px수준 데스크탑은 100px수준으로 했습니다.

광고 크기가 너무 커서 광고가 한 눈에 다 보이지도 않고, 너무 커서 불편하더라구요. 그래서 줄였습니다.

그리고 크기가 작으면 페이지 로딩속도에 조금 도움이 되지 않을까? 싶기도 합니다. 이것은 뇌피셜이기 때문에 그냥 흘려들으세요.

그리고 중요한 부분이 바로 data-full-width-responsive=”false” 입니다.

원래 반응형 광고 부분은 ture로 설정되어 있을 겁니다.

애드센스에서 광고 최적화 실험에서 모바일에서 100% 광고 크기 적용을 한 경우입니다.

저 설정이 ture로 되어 있으면, 내가 사이즈를 설정해도 모바일에서는 최대 크기로 광고가 보입니다.

그래서 크기를 수정하고 싶다면 ture값을 false로 바꿔주면 내가 설정한 크기로 나오게 됩니다.

관련글 읽기

블로그 네이버에 노출 시키려면?
티스토리 저품질 원인과 해결방법?

Leave a Comment