Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
66 lines (45 sloc) 2.38 KB
comments title key picture_frame tags
true
구글 애드센스 반응형 광고 설정하기
201809192
shadow
블로그
AdSense

데스크탑/모바일 환경에 따른 변화를 직접 설정하기


애드고시 한 방에 통과하고 바로 광고를 달아 보았습니다. 제일 먼저 반응형 광고를 웹 상단과 하단에 넣어 보았습니다. 그런데 웹에서는 가로형으로 잘 나타나던 것이 모바일로 보니 거의 정사각형으로 커져 버리더라구요.

그래서 이 '반응형' 광고가 반응하는 방식을 직접 설정하려 구글링을 찾아 보니까, 블로거들이 안내한 코드들이 좀 별로인 것 같습니다.

먼저, 구글에 '애드센스 광고 PC 모바일' 뭐 이런 키워드로 검색하면 찾을 수 있는 반응형 광고 설정 방법들이 거의 다 이런 코드로 나옵니다.


1


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 라고 정의했는데 저는 페이지 상단의 광고를 이용했으므로 이름을 이렇게 지었습니다.