[Javascript] 창크기 변화를 감지해서 애드센스(Adsense) 광고 옮기기

모바일에서 애드센스(Adsense) 광고 위치 옮기기

  제 블로그는 반응형입니다. 창 크기 줄임에 따라 어느 순간 (정확히는 992px를 기점으로) 모바일용 페이지로 변신합니다. 그런데 한가지 난점이 있었는데, 바로 애드센스(Adsense)였습니다. 모바일에서는 광고 위치가 조정되어야 할 필요성이 있기 때문이었는데요, 고민해도 답이 그다지 나오지 않아서 모바일일 경우에 광고를 옮기는 그런 코드를 만들기로 했습니다.

  시작하기 전에 이 방법보다 더 간단한 방법을 최근에 포스팅하였으니 참고하실 분은 참고하세요. 이 역시 반응형 애드센스를 쓰지 않고 애드센스 광고를 삽입하는 방법입니다.

http://blog.readiz.com/204

  우선 사전 작업이 필요합니다. div 2개가 필요합니다. 하나는 데스크탑 일 때 광고를 포함할 위치의 div, 다른 하나는 모바일일 때 광고를 포함할 위치의 div입니다. 각각 adpos1, adpos2라고 이름을 붙이겠습니다. 광고가 들어갈 부분에 

	
<div id="adpos1"></div> 
	

	

<div id="adpos2"></div> 
	
와 같이 표식을 달아줍니다.


그리고 아래와 같은 Adsense 소스가 있을 겁니다.


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 모바일광고 -->
<ins id="movead" class="adsbygoogle"
	 style="display:inline-block;width:300px;height:250px"
	 data-ad-client=""
	 data-ad-slot=""></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> 
	


  중간에 보면 <ins id="movead" ...>라는 부분이 있을 겁니다. 원래 소스라면 없는 부분입니다. 애드센스 소스의 ins태그 부분에 제가 임의로 추가시킨 겁니다. 이름을 붙여놔야 Javascript를 이용해서 위치를 옮길 수 있습니다. 이 애드센스 역시 추가시키는데 어차피 동적으로 옮겨다닐 것이므로 우선은 adpos1에다가 넣어줍니다. div는 기본적으로 block요소이므로 adpos1에 광고 두 종류를 다 넣어주셔야 가로로 정렬이 됩니다.

  이제 광고를 옮기는 코드를 작성할 차례입니다. 아래 코드를 블로그 소스에 추가합니다.
	
<!-- 모바일에서 광고 옮기기 -->
<script type="text/javascript">
       var mode = 1;
       function adLocate() {
            if (window.getWindowCleintWidth() >= 992) {
                old_mode = mode;
                mode = 1;
                if (old_mode != mode) $("#adpos1").append($("#movead"));
            } else {
                old_mode = mode;
                mode = 0;
                if (old_mode != mode) $("#adpos2").append($("#movead"));
            }
       }
       window.onresize = function() { adLocate() };
       $('document').ready(adLocate());
</script> 
	


  두가지의 Event Listener가 있습니다. 첫번째는 문서가 다 불러와졌을 때이고, 두번째는 창크기가 변화하였을 때입니다. 일단 adLocate()라는 함수를 만들어서, 저같은 경우에는 창크기 992px를 기준으로 해서 옮겨지게 하였습니다. 그리고는? 실제로 옮기는 거죠 뭐. jQuery의 append함수를 이용해서 옮겨줍니다. 블로그에서 jQuery를 사용하고 있지 않다면 아래코드를 삽입해야합니다. (일단 위 코드를 테스트 해보시고 안되면 넣으세요)

	
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
	


  당연한 이야기이지만 jQuery 뒤쪽으로 해당 스크립트가 들어가야합니다.

  실작동은 본 페이지에서 하실 수 있습니다. 창크기 줄여보시면 광고가 하단으로 내려갈 겁니다.