최근에 블로그를 살짝 손보다가 좀 수정하고 싶은 부분이 있었습니다.
다름이 아니라
블로그 내에서 특정 삽입한 플래시 파일이 있는데,
모바일 페이지에서는 보여주고 싶지 않고(첨부된 플래시 파일의 사이즈 문제 때문에~),
일반 데스크탑에서 접속시에만 보여주고 싶었단 말이죠.
그래서 고민끝에 가장 괜찮은 방법을 찾았고 적용했습니다.
먼저 저랑 가장 비슷한 경우의 분들이....
모바일에서랑 데스크탑에서랑 구글 애드센스 광고 삽입때문에 이런 방법을 찾는 분들이 많더군요.
그래서 해결책 3가지를 제시해봅니다.
먼저 첫번째.
:: Useragent라는 속성을 이용하여, 단말에서 접속한지 여부를 확인
요건 단말제조사나 접속 브라우져를 미리 필터링하여 걸러내는 방법인데,
돌아가긴하는데 새로나오는 단말이나 별도로 설치한 브라우져의 경우 예외상황이 꽤나 많이 생기게 됩니다.
딱 봐도 불편하고 조금 무식한 스타일;;
네이버에서 모바일 접속 확인여부 검색하면 가장 많이 나오는 방법이기도 합니다.
(관련 소스는 검색하시면 많이 보실 수 있습니다.)
두번째,
:: 로딩된 화면의 본문 사이즈를 확인하여 모바일을 판단
일반 웹으로 접속시 보통 최소 600이상으로 접속하기 때문에 첫번째 방법보다는 쓸만하나, 너비 사이즈를 임의로 판단하기 애매하고 대화면 페블릿등등의 등장으로 인해 요것도 조금 애매한 방법.
그래도 역시 되긴합니다.
세번째,
:: 로딩된 페이지의 URL을 확인하여 모바일 여부를 판단!!
그리고 가장 마음에 드는 세번째 방법!! 이건 조금 꽁수이긴한데, 특정 페이지에 따라 조금 방법이 달라질 수 있습니다.
(ex : Naver, Daum 블로그 등등)
하지만 티스토리(Tistory)에서는 모바일 접속시, 반드시 "/m/"이 포함되기 때문에 현재 URL을 통해 100% 걸러낼 수 있습니다.
첫번째나 두번째보다 훨씬 명확하고 변수없이 100% 동작하는 방법이라고 생각되네요.
Redirect로 접속하거나 포탈싸이트 검색을 통해 들어와도 모두 동일합니다. ㅎㅎ
제가 생각해낸건 아니고, 쉬는시간에 블로그 검색으로 돌고돌다가 어떤 분이 생각해낸 아이디어로군요.
※ 아 근데... 진짜 출처가 기억이 안나서;;;
뭐, 각설하고 Html에 추가하는 Script 파일은 다음과 같습니다.
위와 같은 소스를 구분이 필요한곳에 넣고, Document.write 내부에 HTML 코드를 넣으시면 됩니다.
아, 그리고 참고로 티스토리에서 모바일용 구글광고 넣으려고 고민하시는 분들 혹 있는데,
그럴때는 복잡하게 이렇게 구분할 필요 없고.... 걍 맘편하게 티스토리에서 제공되는 플러그인을 사용하시면 됩니다.
구글 애드센스상에서 모바일광고는 320 x 50 만 사용 가능합니다.
걍 위에 광고1 박스내에 글보고 드리는 말씀이아니라 실제 애드센스 정책이 그렇습니다.
(모바일에서 지나치게 큰 광고 크기는 이용자에게 불편을 초래한다는 사유. 로딩시 강제 클릭으로 유도될수도 있다고 판단하는 듯)
아무튼 애드센스에서 코드 받아와서 저기 광고1란에 넣어주면!!!
자동으로 모바일에서만 모바일 용으로 나오고, 일반 웹페이지에서는 나오지 않습니다.
특히 아래쪽 "본문에 삽입된 애드센스 광고감추기" 란을 클릭하면 본문에 삽입된 광고들이 모바일 상에서는 보이지 않게 설정할 수 있습니다.
※ 일반 웹에서 접속시 광고크기가 커서 모바일상에서 보기 불편할정도로 레이아웃이 깨져서 말이죠
ㅎㅎ 그럼 잘 활용해보시길 :)