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

Posted by Readiz
2014.01.12 23:49 Creation/Programming


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



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


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






  우선 사전 작업이 필요합니다. 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 뒤쪽으로 해당 스크립트가 들어가야합니다.


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




저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 스킨을 적용해보고서 말이죠.
    컴퓨터에서는 정상적으로 화면 줄이면 작동을 하는데
    모바일은 계속 연속으로 이미지가 뜨네요 ㅠㅠ
    • 이미지가 연속으로 뜬다는게 어떤 말씀이시죠? 문제가 되는 페이지와 확인해보신 스마트폰 기종을 알려주시면 확인해보겠습니다.
    • 그룬라이프
    • 2014.02.27 18:30 신고
    일단 리디즈님?이라고 불러야하나요? ㅎㅎ
    위에 올리신 글의 가이드데로 적용을 해봤습니다. 일단은 컴퓨터상에서는 이상없이 현재 이 블로그처럼 작동이 되는데
    제 핸드폰(기종:베가아이언)으로 들어가보면 두개의 이미지가 세로로 나열되어 있습니다.
    간단히 말해 핸드폰에서는 두개의 이미지 중 하나가 지정된 곳으로 이동을 해야하는데 그렇지 못하고 있군요.
    혹시 Article_rep_desc 바로 위에서 바로 아래로 가라고 해서 그런걸까요...
    문제되는 페이지는 현재...접었네요. 애드센스 정책때문에 계속 유지를 시키고 있을 수 없어서 -_-;
    모바일에서 보면 광고 두개가 가득하거든요 ㅋㅋ
    • Readiz는 Read + easy라서 레디즈라고 읽어주시면 됩니다.

      음 우선 현재는 문제되는 부분을 제거하셔가지고 제가 직접 확인은 못하는 상황인데요
      1. 제 블로그도 적용이 되지 않고 있나요?
      2. 제가 첨부한 javascript는 jQuery삽입 뒤에 위치하여야 합니다. (</body>전에다가 넣으면 괜찮을 겁니다)

      두가지를 확인해보시겠습니까?
    • 지나가며
    • 2014.03.13 10:28 신고
    - PC에서 브라우저 폭을 줄여서 이 페이지 보기
    - 아이폰에서 이 페이지로 들어와 보기

    두 가지 다 해봤는데 이 페이지에 삽입돼 있는 광고 두 개 중 한 개만 맨 밑으로 이동하고 한 개는 원래 위치에 있네요. 둘 다 이동되게 하려면 어떻게 해야 할까요?
    • 이 포스팅에서 소개한 방법은 모바일에서 하나만 광고가 내려가게해 최대한 상단노출을 많이 시키고자 한 것입니다. 둘다 내리려면 광고 두개 모두에다가 ID를 부여하먄 되겠죠
  2. 애드센스 정책에 모바일 최상단에 직사각형 배너가 노출되면 정책 위반된다는 애길 들었는데 문제 없는건가요?
    • 상단에 컨텐츠가 보이지 않으면 정책 위반으로 알고 있습니다.
      정확히 어떤 사이즈의 광고가 와서는 안된다는 얘기는 권고인 것으로 알고 있습니다.
  3. 저의 경우 상단에 336x280 1개 사용중인데 모바일에서 동일하게 적용 되는데 문제가 되지 않는건가요``?
    • 정확한건 구글측에 문의해보세요.. 저도 애드센스에 관해서는 경험이 그리 많지 않네요 ㅋㅋ
  4. 혹시 jQuery가 동작하지 않는 브라우저가 있나요? IE7 이상에서 작동하면 적용해보고싶습니다.
    • jQuery는 IE6도 지원합니다.. ㅋㅋ
    • 그렇군요^^
      이걸 응용해서 본문내 삽입한 광고의 관리를 용이하게 하는데 적용할 계획입니다. 본문에는 div만 넣어두고 스킨에 광고코드를 입력해놔서 이동하게 하면 될 것 같네요.
      http://nubiz.tistory.com/310
      기존엔 이런방법을 썼는데, 일부브라우저에서는 광고소스를 볼 수 없어 정책위반 위험이 높았거든요.
      좋은 내용 감사합니다!
    • 네 그렇게 응용하셔도 됩니다.
  5. 애드센스가아닌 리얼클릭은 어떻게 적용하죠?
    • 리얼클릭은 사용하지 않아서 잘 모르겠네요.. 이 코드 참고하시면 작성 가능하실듯 합니다만..
  6. 죄송한데 코드만들어서 보내주실수 있나요?
    • 코드는 위에 다 공개되어 있습니다.
  7. Readiz님!! 낮에 덧글남겼던 미르입니다~
    몇번의 수정후 제가 본 스킨중에 가장 뛰어나고, 모바일에서도 안깨지는 스킨을 만들었내요 ㅎㅎ~~
    다시한번 감사드립니다!

    한가지 궁금한점이 있는대요 저번 답글에서도 말씀드렸지만 데스크톱 상단바에 있는 카테고리에 마우스를 같다대면 배치가 어긋나는 오류가 있던대 왜 일어나는 오류인지 궁금합니다!
    이부분이 자연스럽지 않아서 저는 아에 데스크톱 상단바에서 카테고리를 제거했습니다

    이글을 보고 떠오른 생각이 창 너비가 어느정도 이상이면 데스크롭 상단바를 한줄로 합치고 낮으면 두줄로 내리는 작업을 하고 싶은대 css에 정의된 높이를 어떻게 바꿔야 하는지등에서 막혀서 쩔쩔매다 덧글 남깁니다 ㅎ..
    • 미르님 죄송합니다. 제보하신것은 크롬이 새버전으로 업뎃되면서 오류를 일으키는 것 같은데 알고는 있습니다만 수정을 못하고 있네요.
      제가 이번주까지 시험이라 요즘 살펴보질 못하고 있습니다. 관련포스팅을 약속드립니다만 혹시 다음주에도 제가 올리지 않으면 다시한번 일깨워주시면 감사하겠습니다. ㅠㅠ 죄송해요
    • 항상 감사합니다 Readiz님~ 시험도 좋은결과 있길 바랍니다~~
  8. 이걸 응용해서 데스크탑에서 가로 폭 변경시 즉각적으로 애드센스 사이즈를 변화시키고 싶은데 팁 좀 주실 수 있나요??
    • 궁금타
    • 2014.07.14 01:09 신고
    안녕하세요~


    크롬 버전 수정 하신것인가요?...
  9. 와!! 정말 알기 쉽게 설명해주셨내요.
    감사합니다. 앞으로 자주올께요!!!
    • 2014.09.10 11:30
    비밀댓글입니다
  10. 안녕하세요
    모바일로 접속 하다가 약간의 불편한점 말씀드릴려구요
    카테고리 클릭해서 들어가면 목록 나오고

    1,2,3,4,5 다음페이지 볼려면 pc 화면이야 마우스로 클릭하면되는데

    모바일은 숫자가 너무 작아서 잘못 클릭되는거 같아요

티스토리 툴바