[Javascript] 창크기 변화를 감지해서 애드센스(Adsense) 광고 옮기기
모바일에서 애드센스(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 뒤쪽으로 해당 스크립트가 들어가야합니다.
실작동은 본 페이지에서 하실 수 있습니다. 창크기 줄여보시면 광고가 하단으로 내려갈 겁니다.
'Creation > Programming' 카테고리의 다른 글
간단한 명령에는 jQuery 종속에서 벗어나자 (7) | 2014.04.25 |
---|---|
Import jQuery 2.x and 1.x according to IE version (0) | 2014.04.05 |
Bitonic Sort in Distributed Parallel Computer System (1) | 2014.03.21 |
쓸만한 웹 HTML 에디터, widgEditor (3) | 2014.01.18 |
[Converter] Hex, Base64를 Plain Text(텍스트)로 변환해주는 사이트 (1) | 2014.01.17 |
[Javascript] 창크기 변화를 감지해서 애드센스(Adsense) 광고 옮기기 (27) | 2014.01.12 |
[정규표현식이란?] 정규표현식을 공부해보고 테스트 할 수 있는 사이트 (0) | 2014.01.11 |
[PHP] 데이터 <BR>태그로 자동줄바꿈, 링크감지 기능 추가하기 (1) | 2014.01.08 |
[PHP] Array_map 함수 : 배열 한번에 다루기 (2) | 2014.01.05 |
유니코드에 대한 글 / 유니코드 <-> HTML 변환기 (0) | 2014.01.02 |
[PHP] 접속 도메인에 따라 같은 IP주소로 연결해도 다른 페이지 보여주기 (0) | 2013.11.26 |
컴퓨터에서는 정상적으로 화면 줄이면 작동을 하는데
모바일은 계속 연속으로 이미지가 뜨네요 ㅠㅠ
위에 올리신 글의 가이드데로 적용을 해봤습니다. 일단은 컴퓨터상에서는 이상없이 현재 이 블로그처럼 작동이 되는데
제 핸드폰(기종:베가아이언)으로 들어가보면 두개의 이미지가 세로로 나열되어 있습니다.
간단히 말해 핸드폰에서는 두개의 이미지 중 하나가 지정된 곳으로 이동을 해야하는데 그렇지 못하고 있군요.
혹시 Article_rep_desc 바로 위에서 바로 아래로 가라고 해서 그런걸까요...
문제되는 페이지는 현재...접었네요. 애드센스 정책때문에 계속 유지를 시키고 있을 수 없어서 -_-;
모바일에서 보면 광고 두개가 가득하거든요 ㅋㅋ
음 우선 현재는 문제되는 부분을 제거하셔가지고 제가 직접 확인은 못하는 상황인데요
1. 제 블로그도 적용이 되지 않고 있나요?
2. 제가 첨부한 javascript는 jQuery삽입 뒤에 위치하여야 합니다. (</body>전에다가 넣으면 괜찮을 겁니다)
두가지를 확인해보시겠습니까?
- 아이폰에서 이 페이지로 들어와 보기
두 가지 다 해봤는데 이 페이지에 삽입돼 있는 광고 두 개 중 한 개만 맨 밑으로 이동하고 한 개는 원래 위치에 있네요. 둘 다 이동되게 하려면 어떻게 해야 할까요?
정확히 어떤 사이즈의 광고가 와서는 안된다는 얘기는 권고인 것으로 알고 있습니다.
이걸 응용해서 본문내 삽입한 광고의 관리를 용이하게 하는데 적용할 계획입니다. 본문에는 div만 넣어두고 스킨에 광고코드를 입력해놔서 이동하게 하면 될 것 같네요.
http://nubiz.tistory.com/310
기존엔 이런방법을 썼는데, 일부브라우저에서는 광고소스를 볼 수 없어 정책위반 위험이 높았거든요.
좋은 내용 감사합니다!
몇번의 수정후 제가 본 스킨중에 가장 뛰어나고, 모바일에서도 안깨지는 스킨을 만들었내요 ㅎㅎ~~
다시한번 감사드립니다!
한가지 궁금한점이 있는대요 저번 답글에서도 말씀드렸지만 데스크톱 상단바에 있는 카테고리에 마우스를 같다대면 배치가 어긋나는 오류가 있던대 왜 일어나는 오류인지 궁금합니다!
이부분이 자연스럽지 않아서 저는 아에 데스크톱 상단바에서 카테고리를 제거했습니다
이글을 보고 떠오른 생각이 창 너비가 어느정도 이상이면 데스크롭 상단바를 한줄로 합치고 낮으면 두줄로 내리는 작업을 하고 싶은대 css에 정의된 높이를 어떻게 바꿔야 하는지등에서 막혀서 쩔쩔매다 덧글 남깁니다 ㅎ..
제가 이번주까지 시험이라 요즘 살펴보질 못하고 있습니다. 관련포스팅을 약속드립니다만 혹시 다음주에도 제가 올리지 않으면 다시한번 일깨워주시면 감사하겠습니다. ㅠㅠ 죄송해요
크롬 버전 수정 하신것인가요?...
감사합니다. 앞으로 자주올께요!!!
모바일로 접속 하다가 약간의 불편한점 말씀드릴려구요
카테고리 클릭해서 들어가면 목록 나오고
1,2,3,4,5 다음페이지 볼려면 pc 화면이야 마우스로 클릭하면되는데
모바일은 숫자가 너무 작아서 잘못 클릭되는거 같아요