데스크탑/모바일 환경에 따른 변화를 직접 설정하기
애드고시 한 방에 통과하고 바로 광고를 달아 보았습니다. 제일 먼저 반응형 광고를 웹 상단과 하단에 넣어 보았습니다. 그런데 웹에서는 가로형으로 잘 나타나던 것이 모바일로 보니 거의 정사각형으로 커져 버리더라구요.
그래서 이 ‘반응형’ 광고가 반응하는 방식을 직접 설정하려 구글링을 찾아 보니까, 블로거들이 안내한 코드들이 좀 별로인 것 같습니다.
먼저, 구글에 ‘애드센스 광고 PC 모바일’ 뭐 이런 키워드로 검색하면 찾을 수 있는 반응형 광고 설정 방법들이 거의 다 이런 코드로 나옵니다.
window.getWindowCleintWidth() 함수를 이용해서 screen 크기를 구분해주는데요.
저거 말고, 이거 합시다.
<aside class="main" style="text-align: center;width: 100%;">
<style>
.responsive_header_ad { width: 320px; height: 70px; }
@media(min-width: 500px) { .responsive_header_ad { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive_header_ad { width: 786px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive_header_ad -->
<ins class="adsbygoogle responsive_header_ad"
style="display:inline-block"
data-ad-client="ca-pub-xxxxxxxxxx"
data-ad-slot="xxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</aside>
애드센스에서 반응형 광고로 발급받은 코드에서 data-ad-client, data-ad-slot을 저 xxxx칸에 넣어 주시고 <style> </style> 내부의 width, height을 입맛대로 정의하면 됩니다.
지금 이 코드에는 3가지인데, 순서대로 모바일, 태블릿, 데스크탑/노트북 화면이라고 보시면 됩니다.
<ins> 클래스를 보시면 저는 임의로 responsive_header_ad 라고 정의했는데 저는 페이지 상단의 광고를 이용했으므로 이름을 이렇게 지었습니다.