반응형 애드센스 안쓰고 원하는 애드센스 노출시키기

Make Responsive Adsense!

  특히나 반응형 스킨에서 이슈가 되는 문제일 것입니다. 구글 애드센스의 반응형 광고 단위는 문제가 많습니다. 물론 잘 다루는 분들은 관계가 없지만, 일단은 어렵습니다. 원하는 형태로의 변형이 쉽지 않죠.. 또한 반응형 광고 단위는 광고 크기를 수정하는 것일 뿐, 광고가 나오는 위치를 조절할 수 있는 것은 아닙니다. CSS를 조합하여 사용하면 위치도 데스크탑에서 우측, 모바일에서 중앙 이런 정도는 지정이 가능하지만 아예 다른 광고를 노출시킬 수는 없다는 것이 문제죠. 무조건 반응형 애드센스만 사용해야 합니다. 하지만 창크기를 감지하여 애드센스를 삽입하는 코드를 사용한다면 이런 문제에서 벗어날 수 있습니다. 

  제 블로그를 예시로 보여드리면서 코드를 한번 보도록 하겠습니다.

>=1550px

<1550px

<768px

  이 방법을 이용하면 굉장히 동적으로 광고를 조절할 수 있습니다. 코드는 기본적으로 아래와 같은 형식입니다.

 

	
<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;" data-ad-client="" data-ad-slot=""></ins>');
	(adsbygoogle = window.adsbygoogle || []).push({});
}
</script> 
	

  위 코드를 광고를 출력하기를 원하는 위치에 삽입하면 됩니다. 여기에 주의하실 점이 있는데 살펴봅시다.

1. window.getWindowCleintWidth()<768

  현재 페이지의 가로폭이 768px 미만이면 코드를 실행시킨다는 의미입니다. 모바일에서만 보여주려면 window.getWindowCleintWidth()<768로 해주시면 되고, 데스크탑에서만 보이게 하고 싶다면 window.getWindowCleintWidth()>=768로 해주시면 됩니다. 물론 원하시는 특정 창크기가 있다면 그것으로 지정하시면 됩니다.

2. document.write() 사이에 들어가는 코드

  구글 애드센스 코드를 넣으시면 되는데, 주의하실 점이 있습니다. 새로 광고단위를 만드실 필요 없고, 현재 사용중이신 것을 그냥 넣으셔도 됩니다. 일단 아래처럼 생겼죠 광고 삽입코드가..

	

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- XXX -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client=""
     data-ad-slot=""></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> 
	

  여기서 <script async 부터 </ins> 까지를 document.write('')의 '와 ' 사이에 넣으시면 되는데, </ins>까지라고 했으므로 <script>를 포함한 사이에 있는 (adsbygoogle = window.adsbygoogle || []).push({}); 는 넣으시면 안됩니다. 

i) 엔터키를 제거해서 한줄로 만드세요.

ii) 애드센스 광고코드에 있는 </script>를 그대로 넣으시면 안됩니다. <\/script>로 수정해서 넣어주세요.

  아무튼 위에 제가 첨부한 코드 참고하셔서 형태 맞추시면 됩니다. 여기서 실수하시면 광고가 제대로 삽입 안되니 주의깊게 읽고 적용하세요. 그러면 이제 기본적인 세팅은 완료입니다.

세부설정

광고를 중앙배치하기

  <ins>태그의 style부분에 margin:auto; 를 넣으시면 됩니다. (이러고도 안되면 애드센스 전체를 감싸는 <div>를 만드신 후 style에 text-align:center;를 추가해주세요)

우측정렬하기

  마찬가지로 <ins>태그에 float:right; 를 넣으시면 됩니다.

문제점

  코드를 보시면 알겠지만 처음 페이지를 로딩할 때 적용이 되는 코드입니다. 따라서 페이지 로딩후에 창크기를 바꿨다고 해서 애드센스 위치가 변화하지는 않습니다. 하지만 이것은 반응형 애드센스도 마찬가지이더군요.. 한번 로딩된 광고는 바뀌지 않습니다. 만약 페이지 크기가 바뀌었을 때도 대응시키고 싶으시다면 아래 강좌를 참고하시기 바랍니다. 다만 이 방법은 좀 더 복잡합니다.

2014/01/12 - [Creation/Programming] - [Javascript] 창크기 변화를 감지해서 애드센스(Adsense) 광고 옮기기