반응형 애드센스 사용시 발생하는 문제점 해결하기
2014.05.16 08:36
반응형 애드센스 사용시 발생하는 문제점 해결하기
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

반응형 스킨을 사용하신다면 애드센스를 게시하는 블로그라면 당연하게 반응형 애드센스를 사용하시죠.

 

반응형 애드센스는 지정된 공간( DIV)안에서 화면 해상도에 따라 애드센스를 출력해 주는데 사용자가 지정한 값을 무시하고 애드센스가 나오는경우가 있을겁니다.

 

이 문제는 반응형 애드센스를 블로그나 사이트에 한곳만 사용하신다면 절대 안생기는 문제로 반응형 애드센스 광고를 2,3개 나오게 하는 블로그에서는 이런문제가 있을겁니다.

 

무슨 말이냐면 모바일이나 특정 해상도에서 블로그 접속시 사이드바에 출력되는 애드센스 사이즈를 200 X 200으로 하고 본문이나 기타 다른곳에 나오는 애드센스 최고 사이즈를 336 X 280으로 했을때 이 두 값을 무시하고 어느 한쪽값만 인식해서 애드센스가 나오는 경우 입니다.

 

사이드바에 336 X 286사이즈 애드센스가 나올수 있고 반대로 본문에  200 X 200 사이즈 애드센스가 나올수있습니다.

 

반응형 애드센스 고급코드 중복으로 사용할때 발생하는 문제 해결하기

 

제가 적용한 반응형 애드센스를 참고로 보겠습니다.

 

 

위 이미지에 보이는 애드센스는 제가 적용한 정상적인 화면 입니다.

 

 

제가 적용한 사이즈를 무시하고 더 큰 애드센스가 나오는 이미지 입니다.

 

사이드바에 모바일 접속시 250 X 250  반응형 애드센스를 지정했는데 그 값이 본문 반응형 애드센스에 영향을 주고 있는겁니다.

 

이 부분을  이 글에서 해결해 보겠습니다.

 

<style>
.my_adslot { width: 320px; height: 50px; }
@media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }
@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형 사이드바 -->
<ins class="adsbygoogle my_adslot"
     style="display:inline-block"
     data-ad-client="ca-pub-911xxxxxxxxxxx"
     data-ad-slot="56xxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

위 소스가 반응형 애드센스 '고급' 코드 입니다. style을 이용해 해상도에 따라 애드센스 크기가 조절되는데 스타일에 지정된 my_adslot 가 중복이 될 경우 먼저 읽어지는 값이 적용됩니다.

 

반응형 애드센스 코드를 두개, 세개를 만들어도 my_adslot 은 변하지 않습니다. 그래서 위에서 언급한 문제가 발생하는데 간단하게 my_adslot를 수정해서 문제를 해결할수 있습니다.

 

예를 들면 본문에 반응형 애드센스를 달고 사이드바에 반응형 애드센스를 달았다면 본문에는 my_adslot 를 그대로 사용하고 사이드바에 들어가는 my_adslot 스타일값을 변경하면 됩니다.

 

사이드바에 들어가는 반응형 애드센스 코드

 

<style>
.my_adslot1 { width: 320px; height: 50px; }
@media(min-width: 500px) { .my_adslot1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .my_adslot1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형 사이드바 -->
<ins class="adsbygoogle my_adslot1"
     style="display:inline-block"
     data-ad-client="ca-pub-911xxxxxxxxxxx"
     data-ad-slot="56xxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

위 코드를 자세히 보시면 style에 들어간 my_adslot이  my_adslot1 변경되었습니다. my_adslot1 로 변경하므로써 본문에 들어간 반응형 애드센스 코드와의 충돌을 막을수 있습니다.

 

위 방식으로 반응형 애드센스를 만들어 사용하시면 2개든 3개든 반응형 애드센스를 원하는 사이즈로 보여줄수 있답니다.

 

예를들면 사이드바에는 300 X 600 애드센스를, 본문 상단에는 336 X 280 정사각형 애드센스, 본문 하단에는 728 X 90 애드센스를 반응형으로 설치가 가능합니다.

 

반응형 스킨을 생각하시고 계신다면 여러가지 수정, 고민할 부분이 많습니다.

 

애드센스를 운영하신다면 더욱 신경써야 하는 부분 애드센스 정책위반 입니다.

 

조금만 정책에 어긋나도 언제 경고를 받을지, 언제 애드센스가 중단될지 모른답니다.

 

사소한 부분이라도 미리미리 점검하셔서 예방하세요.^^

 

, , , , , , , ,

  1. 잘 기억해 둬야 되겠네요.

  2. 반응형 애드센스 수익이 어떨지 궁금 하네요.^^
    이런문제두 있구나 기억해 두신다면 문제 발생시 해결이 빠르지요.^^

  3. 좋은정보 감사합니다. 참고해야겠네요.

  4. 반응형 스킨을 테스트중인데 저두 몰랐던, 생각도 안했던 문제들로 고생하네요.
    반응형스킨을 메인 블로그에 적용해야하 하는지 고민입니다.^^

  5. 잘보고갑니다 ..
    저도 처음에 이것때문에 꼬인거 고친기억이나네요

  6. 반응형스킨에 반응형 애드센스를 사용한다면 격는 문제인가 보네요.^^