반응형 스킨 본문 우측 상단(PC) / 본문 상단(모바일) 애드센스 넣는 법

반응형 애드센스 안쓰고 애드센스 넣어보자! - 2

  사실 애드센스 관련 강좌는 다른 블로그에서도 많이 다뤄지고 있는 것이라서 피하려고 했지만, 여쭤보시는 분들이 많아서 한 2~3편 정도로 계속 쓰게 될 것 같습니다. 우선 오늘은 제 블로그에서 사용중인 본문 상단 우측 광고의 삽입에 대해 알아보도록 합시다. 물론 반응형이라는 전제 하에서 쓰는 것이고, 구글에서는 모바일 상단에 큰 직사각형의 광고를 허용하지 않고 있으므로 반응형 디자인에서 모바일의 경우 이 큰 광고를 배제시킬 방법도 강구해야 합니다. 아래 스크린샷을 보고 시작합시다.

PC(336 * 280px)

Mobile(200 * 200px)

  시작하기 전에 저번 강좌를 한번 보고 오시는 것도 도움이 될 것입니다. 저번 강좌에서 추가적인 내용만을 다룰 것이기 때문입니다..

2014/04/19 - [반응형 티스토리/Tistory] - 반응형 애드센스 안쓰고 원하는 애드센스 노출시키기

PC용 광고 출력시키기

  PC용 출력은 768px부터 출력되게 하면 됩니다. Bootstrap에서의 모바일 pixel이 기점이 768px이기 때문이고, 사실 아이패드를 Portrait모드로 들었을 때가 가로가 768px이므로 이렇게 된 것으로 보입니다. 아무튼 이 경우에는 큰 직사각형(336px * 280px)이 출력되게 할 것입니다.

	

<div style="float:right; margin:10px;">
	<!-- 데탑용 -->
	<script>
	if(window.getWindowCleintWidth()>=768){
		document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="" data-ad-slot=""></ins>');
		(adsbygoogle = window.adsbygoogle || []).push({});
	}
	</script>
</div> 
	

  저번 시간에 본 것과 비슷하죠? 768px이상에서 실행되게 하였고, 상위 태그로 float:right 속성을 주어서 우측으로 붙도록 하였습니다. 저기에 보시면 margin:10px;라고 조절한 부분이 있는데, 이것은 애드센스 정책에서 다른 링크와 광고가 붙으면 정책 위반이기 때문에 보험을 위해 떨어뜨려놓은 것입니다. 만약 붙어도 되는 부분이 있다면 margin-left:0px 등으로 조절하시면 붙일 수 있습니다. (margin-top, margin-left, margin-bottom, margin-right)

모바일용 광고 출력시키기

  비슷한 방법입니다. 모바일용 광고는 768px미만부터 나오도록 하면 됩니다. 앞서 말씀 드렸지만 300px*250px부터도 모바일 상단에 나오게 되면 정책 위반으로 요즘은 구글이 태클을 거는 듯 합니다. 저는 그래서 200px*200px의 광고를 상단 중앙에 배치시키고 있습니다. 이 경우 코드는 아래와 같이 될 것입니다.

	
<div style="text-align:center;width:100%;">
	<!-- 모바일 상단 -->
	<script>
	if(window.getWindowCleintWidth()<768){
		document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:200px;height:200px;margin:auto;margin-bottom:10px;" data-ad-client="" data-ad-slot=""></ins>');
		(adsbygoogle = window.adsbygoogle || []).push({});
	}
	</script>
</div> 
	

  여기서 주의깊게 보셔야 할 것은 바로 상위 div태그의 text-align:center; 속성과 script안쪽에 들어가있는 ins태그의 margin:auto; margin-bottom:10px; 부분입니다. text-align:center와 margin:auto는 쌍으로 붙어다닙니다. 이 둘은 광고를 중앙 배치할 수 있도록 해 주는 코드이죠. margin-bottom:10px는 마찬가지로 정책위반 방지용입니다. 광고 하단을 10px 띄워서 본문에 링크가 있는 경우 붙지 않도록 하는 역할을 합니다. 모바일에서는 아무래도 PC버전처럼 float:right가 불가능하기 때문에 해당 코드처럼 center로 상단에 아예 출력되게 하였습니다.

그래서 이 코드를 어디에 넣어야 하나?

  [$$_article_rep_desc_$$] 바로 위쪽에다가 넣으시면 됩니다. $$는 ##로 바꿔서 검색하시구요. 본문 상단이니까 당연한 것이기는 하지만 혹시나 여쭤보는 분들이 계실까봐 첨언해둡니다.

  그리고 위의 두 코드는 함께 병렬적으로 들어가 있으면 되고, 순서는 관계 없습니다. 어차피 if문에서 화면크기 판별해서 넣는 것이니까요. 최종모습은 아래처럼 되겠죠.

	

<div style="float:right; margin:10px;">
	<!-- 데탑용 -->
	<script>
	if(window.getWindowCleintWidth()>=768){
		document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="" data-ad-slot=""></ins>');
		(adsbygoogle = window.adsbygoogle || []).push({});
	}
	</script>
</div> 
<div style="text-align:center;width:100%;">
	<!-- 모바일 상단 -->
	<script>
	if(window.getWindowCleintWidth()<768){
		document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:200px;height:200px;margin:auto;margin-bottom:10px;" data-ad-client="" data-ad-slot=""></ins>');
		(adsbygoogle = window.adsbygoogle || []).push({});
	}
	</script>
</div> 
[$$_article_rep_desc_$$] 
	

  누에고치님은 이 방법을 半반응형이라고 부르시더라구요. 페이지 로딩시의 창 크기로 광고를 넣는 것을 판단하기 때문이죠. 진정한 반응형이라면 페이지 로딩이 끝난 후에도 화면 사이즈를 바꾸면 광고 사이즈도 변해야 합니다만, 구글 애드센스는 반응형 광고단위라도 그것을 지원하지 않고 있죠. 그래서 저도 마음 편하게 페이지 로딩 시의 창 크기로 판단하여 광고를 넣는 코드를 요즘 연재하고 있는 것입니다.

  다음 시간에는 많은 분들이 궁금해하시는 다른 글 보기 좌측에 애드센스 넣는 법에 대해 알아보도록 하겠습니다. ^^