티스토리 반응형 스킨에서 애드센스(adsense) 광고 두 개를 나란히 배치하는 법을 알아보겠습니다. 이 전에도 광고 두 개를 나란히 배치 할 수 있지만 반응형 스킨에서 사용할 경우 문제가 생깁니다. 데스크탑 모드에서는 문제 없이 사용 가능하지만 해상도가 작은 모바일기기로 반응형 스킨을 씌운 사이트에 접속 시 광고가 화면 밖으로 나가는 현상이 생깁니다. 게다가 300x250 이상의 광고는 모바일 웹페이지의 첫 화면에서 블로그 콘텐츠 노출 없이 광고만 노출되는 경우가 생기고 이는 구글 애드센스 정책 위반 사항이기 때문에 사용하지 않는 것이 좋습니다. 정책 위반시 계정이 정지될 수 있습니다. 계정이 정지되면 복구하기가 상당히 힘들다고 하니 광고 노출 시 정책 위반 사항이 없는지 꼼꼼히 체크하는 것이 중요합니다.
반응형 스킨에서 광고 두 개를 나란히 배치하기 위해서는 반응형 광고를 생성해야 합니다.
코드를 복사 해놓고 style 부분을 아래와 같이 수정합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <style> .my_adslot { width: 100%; height: 100%; } @media(min-width: 320px) { .my_adslot { width: 300px; height: 50px; } } @media(min-width: 768px) { .my_adslot { width: 300px; height: 250px; } } @media(min-width: 1200px) { .my_adslot { width: 336px; height: 280px; } } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 반응형 --> <ins class="adsbygoogle my_adslot" style="display:inline-block" data-ad-client="" data-ad-slot=""></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> |
min-width는 페이지에 접속한 디바이스의 최소 가로값입니다.
수정 후 해당 코드를 본문 상단 또는 하단 중 원하시는 곳에 복사합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <style> .my_adslot { width: 100%; height: 100%; } @media(min-width: 320px) { .my_adslot { width: 300px; height: 50px; } } @media(min-width: 768px) { .my_adslot { width: 300px; height: 250px; } } @media(min-width: 1200px) { .my_adslot { width: 336px; height: 280px; } } </style> <!-- 애드센스 상단 2 개 Start --> <div id="adsense-top2" class="adsense-top2"> <div id="adsense-1" style="float:left; width:336px; height:280px;"> <!-- 반응형 애드센스 1 삽입 --> </div> <div id="adsense-2" style="float:left; width:336px; height:280px; padding-left:10px"> <!-- 반응형 애드센스 2 삽입 --> </div> </div> |
지난 글에 사용한 코드에서 <style> 이 추가 되었고 애드센스 코드만 반응형으로 수정되었습니다. 이렇게 적용하고 나시면 지금 보고 계신 페이지 처럼 본문 상단에 두 개의 광고가 나란히 배치됩니다. 스마트폰 등 가로해상도가 작은 기기에서 접속을 하면 336x280 광고 대신 300x50크기의 광고가 노출되는 것을 확인 할 수 있습니다. 하지만 광고가 적절하지 못하게 배치되고 하단에 여백이 많이 생기는 문제가 발생합니다. 또한 모바일 디바이스에서 한 화면에 두 개 이상의 광고 노출을 제한하는 구글의 정책에도 위반됩니다. 이는 css 속성을 변경하여 수정하였습니다.
우선 jQuery를 사용하기 위해 아래의 코드를 skin.html의 상단에 복사합니다. 저는 <head> 바로 밑에 삽입하였습니다.
1 2 3 | <!-- jQuery Load Start --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <!-- jQuery Load End --> |
그 후 아래의 코드를 애드센스를 삽입한 부분에 붙여넣습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript"> if( document.body.clientWidth <= 320 ) { $("#adsense-1").css("float","none"); $("#adsense-1").css("height","0px"); $("#adsense-1").css("padding-left","0px"); $("#adsense-2").css("display","none"); $("#adsense-top2").css("height",$(".my_adslot").css("height")); $("#adsense-top2").css("width",$(".my_adslot").css("width")); $("#adsense-top2").css("margin-left","auto"); $("#adsense-top2").css("margin-right", "auto"); } </script> |
'알아보기 > 블로그' 카테고리의 다른 글
| 티스토리 블로그 별 수식어로 필명 관리하기 (1) | 2015.02.21 |
|---|---|
| 티스토리 블로그 애드센스(Adsense) 두 개 나란히 노출하기 (0) | 2014.08.28 |
| 티스토리 블로그 본문 상, 하단에 구글 애드센스(Adsense) 광고 삽입하기 (1) | 2014.08.25 |
| 구글 애드센스(Google Adsense) 광고 생성하기 (0) | 2014.08.13 |