애드센스 모바일 반영형 광고 가로 폭 전체 나오게 하지 않는 방법 (테두리 여백 주는 법)

애드센스 반영형 광고는 모바일에서 보기 시 좌우 여백 없이 가로폭이 전체로 꽉 차게 나오게 됩니다. 그런데 일부 좌우 테두리가 있는 스킨의 경우 테두리를 넘어가게 되어 디자인이 이상하게 보이게 됩니다. 제가 쓰는 JB스킨의 경우도 테두리가 있는 디자인이라서 매번 광고가 삐져나온다는 느낌이 들어서 신경이 쓰이던 상황이였습니다.


▲ 기본 애드센스 모바일 반응형 / 전체 가로폭 금지 적용 후 모습

테두리 있는 스킨의 경우 가로폭 전체 적용을 금지 시킨게 훨씬 깔끔하고 시인성이 좋아 보입니다.


오른쪽 처럼 모바일 보기 시 전체 가로폭을 방지하는 방법은 아래 코드를 추가 하면 됩니다.


적용방법


적용코드

1
data-full-width-responsive="false"                                               
cs


적용 전

적용하기 전 기본 애드센스 광고는 아래와 같이 생겼습니다.

1
2
3
4
5
6
7
8
9
10
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 블로그 상단 광고  -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxx"
     data-ad-slot="xxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
cs


적용 후

아래와 같이 애드센스 광고 삽입 코드에 data-full-width-responsive="false" 룰 추가해주면 됩니다.
1
2
3
4
5
6
7
8
9
10
11
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 블로그 상단 광고  -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxx"
     data-ad-slot="xxxx"
     data-ad-format="auto"
     data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
cs


참고로 구글 애드센스에서는 data-full-width-responsive="false"로 가로폭을 전체로 사용하지 않는 경우 수입이 줄 수 있다고 경고하고 있습니다만, 스킨이나 홈페이지 디자인이에 따라서는 좋은 방법인 것 같습니다.

이 글을 공유하기

댓글

Email by JB FACTORY