크기에 따라 변하는 반응형 애드센스 광고 코드 수정

크기에 따라 변하는 반응형 애드센스 광고 코드 수정 / 애드센스 모바일 반응 광고

   잠시만 눈에 보이지 않아도 불안감을 떨칠 수 없다는 중독성 강한 스마트폰, 이제는 어른이나 아이 할 것 없이 모두가 스마트폰이 없으면 일상생활에 지장을 받을 정도로 스마트폰은 우리 생활에 밀접하게 맞닿아 있습니다.

   이렇게 스마트폰 보급이 일반화되며 이제는 일일 모바일 인터넷 사용자가 데스크톱 인터넷 사용자를 넘어서는 시대가 되었습니다. 변하는 시대에 발맞춰 웹사이트나 블로그도 모바일 친화형 스킨(레이아웃)을 내놓으며 사용자의 불편함을 최소화하고 있습니다.

   구글 애드센스에서도 발 빠르게 몇 년 전부터 블로거에게 크기에 따라 변하는 반응형 광고 코드를 사용할 수 있게 하며 광고주와 블로거의 편의를 충족시켜주고 있습니다.

   반응형 광고란 가로와 세로 길이가 정해져 있는 일반 광고와 달리 사이트의 너비에 따라 크기가 자동으로 변하는 광고로 하나의 광고 코드를 사용해도 광고가 삽입된 곳의 크기에 따라 '728x90', '336x280', '300x600' 등 다양한 광고로 구현됩니다.

   크기가 자동으로 변한다는 편리함도 있지만, 무엇보다도 반응형 광고를 사용해야 하는 가장 큰 이유는 반응형 스킨에 고정 크기의 광고를 삽입하면 애드센스 정책을 위반할 가능성이 크기 때문입니다.

   광고가 게시글과 겹치거나 모바일로 접속시 콘텐츠 없이 광고만 한 화면을 차지하는 형태는 반응형 애드센스 광고를 사용하지 않아 경고를 받게 되는 가장 흔한 이유입니다.

광고와 콘텐츠가 겹치는 현상 광고가 한 페이지를 차지하는 현상

   예를 들어 해상도 1024x720인 데스크톱으로 웹사이트를 꾸미고 레이아웃에 맞게 적당한 위치에 720x90 광고를 삽입했다 하더라도 모바일로 접속하면 광고의 가로 길이가 길어 콘텐츠 위까지 겹쳐지는 현상이 발생할 위험이 있습니다. 혹은 336x280 광고를 삽입했는데 모바일로 접속하니 한 화면 가득 광고만 들어오게 돼 본의 아니게 애드센스 광고 정책을 위반하는 경우도 생깁니다.

   반응형 광고 코드를 사용하더라도 후자의 경우처럼 간혹 모바일 화면에 꽉 차는 광고가 노출되는 경우도 있습니다. 이 경우, 게시자의 고의성이 없더라도 정책 위반으로 억울하게 걸릴 수 있으므로 조심해야합니다.

   '반응형 광고 코드를 사용해도 정책 위반이라 걸리면 도대체 어떻게 하라는 거야?'라고 생각하시는 분들에게 지금 바로 해결책을 알려드리겠습니다.

---

크기에 따라 변하는 반응형 애드센스 광고 코드 수정

   웹사이트나 블로그 크기에 따라 자동으로 변하는 반응형 광고에 약간의 소스코드를 추가해 제약을 걸어주면 광고 정책에 걸릴 위험도 없어지고 정돈된 광고에 수익 증가도 기대해 볼 수 있습니다.

   추가한 소스코드의 원리를 간단히 설명하자면 기본으로 보여질 광고 크기를 세팅한 뒤 웹사이트의 최대 너비에 따라 그때그때 맞춤 크기를 임의로 정해주는 것입니다.

   아래 코드는 기본으로 보여질 광고 크기는 720x90이고 웹사이트 가로 크기가 970px보다 작을 때는 720x90, 720px보다 작을 때는 468x60, 468px보다 작을 때는 320x50으로 노출되게 설정된 것입니다.

( 'max-width' 를 'min-width' 로 바꾸면 기준의 방향을 반대로 설정할 수 있습니다 )

크기에 따라 변하는 반응형 애드센스 광고 코드 수정 / 애드센스 모바일 반응 광고

   파란색 박스 안에 있는 코드를 참고하셔서 운영하는 웹사이트 레이아웃에 맞게 빨간색으로 표시된 기준 가로 길이와 광고 크기를 설정하고 고객 번호와 광고 번호를 입력한 뒤 완성된 소스코드를 광고를 넣을 위치에 삽입하시면 됩니다.

( 광고를 가운데 정렬 하고 싶다면 파란색 코드도 포함시켜주세요 - [ 왼쪽정렬 : 'center' -> 'left' / 오른쪽 정렬 : 'center' -> 'right' ] )

크기에 따라 변하는 반응형 애드센스 광고 코드 수정.txt

---

너비에 따라 지정된 크기로 변하는 반응형 애드센스 광고 코드 (수정 후)

<div align="center">

<style type="text/css">

.adslot_1 { width:720px; height: 90px; }

@media (max-width:970px) { .adslot_1 { width: 720px; height: 90px; } }

@media (max-width:720px) { .adslot_1 { width: 468px; height: 60px; } }

@media (max-width:468px) { .adslot_1 { width: 320px; height: 50px; } }

</style>

<ins class="adsbygoogle adslot_1"

     style="display:inline-block;"

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

     data-ad-slot="*********"></ins>

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

<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

</div>

너비에 따라 자동으로 변하는 반응형 애드센스 광고 코드 (기본형)

<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"></ins>

<script>

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

</script>

---

☞  [ 바로  가기 ] 상위 노출 키워드 찾기 노하우 대공개!

☞  [ 바로  가기 ] 블로그 상위 노출과 양질 포스팅의 필요성

☞  [ 바로  가기 ] 고품질 블로그를 만드는 비밀 정보 - 이탈률을 낮춰라!

---

포스팅과 관련된 피드백은 언제나 환영합니다.

또한, 광고코드를 적용하시면서 궁금한 점이 생기면 언제든 댓글 남겨주시면 성심껏 답변해드리겠습니다.

감사합니다.