반응형 구글 에스센스 적용하기

반응형 구글 에스센스 적용하기

반응형 스킨을 만들고 반응형 에드센스를 적용해보았습니다.
이전에 적용해보신분도 있겠지만 처음으로 이 글을 보신분도 있을거라 생각됩니다.


먼저 반응형 광고에 대해서 알아두어야할 점은 바로 너비입니다.
반응형은 각 디바이스별로 너비를 체크해서 반응하기 때문입니다.


구글에드센스에서 반응형 광고를 생성합니다.





스마트보다는 저는 고급이 필요한 버젼을 달았습니다.





코드를 보겠습니다. 

<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-...."
     data-ad-slot="....."></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

코드를 보시면 @media 라는 부분이 들어 있어서 너비를 체크합니다.
기본은 너비가 320짜리가 나오고, 너비가 500이상이면 468짜리 광고가 나오고, 800이상이면 728짜리 광고가 나옵니다.

이건 기본 셋팅이 그렇고 800이상이면 기존에 데스크탑에서 사용하면 광고가 나오는것이 좋겠네요.
좀 다듬어야 할것 같습니다.

특히 아래의 스타일 부분은 좀 걸리네요.
그대로 넣자니 본문에 스타일이 들어가는거라......그래서 head 쪽으로 옴겼습니다. 

<head>
......
<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>
....
</head>


<!-- 아래는 본문영역에 위치한 코드, 본문 치환자 바로 위입니다. -->
<div class="article">
    <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-......"
         data-ad-slot="....."></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    [#\#_article_rep_desc_##]
</div>

스타일은 상단에 두고, 광고 코드만 본문에 위치시켰습니다.

한가지 여러분들중에 html 을 좀 아시는분들은 블로그 여기저기에 광고를 넣는 분들도 있을겁니다.
제 개인적인 생각으로는 그렇지 않는것이 좋다고 생각됩니다.
광고는 블로그 본문에 가장 좋다고 생각합니다.
이 외의 방명록, 공지사항...등등의 곳은 성격이 맞지 않습니다.
블로그의 글이 있고, 광고가 있는것이 광고도 잘 나오고 좋습니다.


개    개