[ Ads ] 티스토리 반응형 스킨에 애드센스 광고 조절

티스토리에 반응형 스킨을 사용하다 보면 티스토리 모바일 스킨을 사용 하지 않게 됩니다. 반응형이 알아서 조절해주기 때문에 이쁘게 나오기도 하는 장점도 있지만 모바일 스킨을 사용하지 않고 반응형으로 PC와 모바일을 같이 사용하게 되면 코드도 하나로 통일 할 수있는 장점이 있습니다.

제가 발견한 단점은 모바일 전용 애드센스를 사용할 수 없다는 점이 단점이었습니다. 반응형 애드센스 광고를 삽입해도 되지만 문제는 PC에서는 광고3개 모바일에서는 광고 2개까지만 삽입할 수 있다는 것이 문제가 되었습니다. 반응형으로 3개를 적용하자니 모바일에서 정책위반으로 짤릴 수도 있기 때문 입니다.

그래서 제가 선택한 방법은 상단에 PC와 모바일에서 같이 사용할 수 있는 반응형 애드센스 1개

를 삽입하고 하단에는 사각형 광고를 PC에서는 2개  모바일에서는 1개만 노출해주는 방법으로

해보았습니다.

시작전에 3개의 광고를 생성하세요.

1. 반응형 광고 1개

2. 직사각형 광고 2개 (저는 300x250 광고2개로 사용. 336x280사용하셔도 됩니다.)

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

상단에 반응형 애드센스 광고를 1개 배치합니다.

<style>
    .ad1 {width: 0px; height: 0px;}
    .ad2 {width: 0px; height: 0px;}
    @media (min-width: 350px) { .ad1 { width: 300px; height: 250px; }}
    @media (min-width: 400px) { .ad1 { width: 336px; height: 280px; }}
    @media (min-width: 720px) { .ad1 { width: 336px; height: 280px; }}
    @media (min-width: 810px) { .ad1 { width: 300px; height: 250px; } .ad2 { width: 300px; height: 250px; margin-left: 1%;}}
    @media (min-width:1120px) { .ad1 { width: 300px; height: 250px; } .ad2 { width: 300px; height: 250px; margin-left: 1%;}}
    @media (min-width:1200px) { .ad1 { width: 336px; height: 280px; } .ad2 { width: 336px; height: 280px; margin-left: 1%;}} 
</style> 
 
<div class="adstyle1" style="text-align: center; margin-bottom:80px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 하단 광고 1 -->
<ins class="adsbygoogle ad1"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
 
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 하단 광고 2 -->
<ins class="adsbygoogle ad2"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> 
</div>

하단에 직사각형 배너를 배치하는데 브라우저 크기에 따란 직사각형 배너의 크기를 변경하고 모바일 태블릿 최대 Width 가 800이기 때문에 800까지는 광고가 1개만 810이상이면 2개가 나오도록 설정하는 스크립트 입니다.

위 소스를 적용하면 모바일에선 상단에 광고1개 하단에 광고1개

PC에서는 상단에 광고1개 하단에 광고 2개가 나오도록 되어 있습니다.

조금씩 수정하면서 더 많은 것들을 할 수 있으니 자신에 스타일에 맞게 코드를 수정하여 적용하시면 유용하게 사용하실 수 있을거라 생각 됩니다.