태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
 

 
페이지 구독





과거 기사

Locations of visitors to this page

InnerHTML을 이용하여 티스토리 모바일에 광고 넣기

IT네트워크/블로그 | 2012.12.28 17:17 | Posted by Namu(南無)

티스토리는 다음에서 태터툴즈를 발전시켜 독립 서비스로 제공하고 있는 블로그 서비스입니다. 태터툴즈의 각종 플러그인과 위젯, 그리고 다음 서비스와의 연동으로 각광 받는 블로그 서비스 중 하나입니다. 스킨의 자유로운 편집은 다음, 네이버 등 포탈 내에 있는 블로그 서비스와 다른 티스토리만의 강점입니다.

그러나, 다음 티스토리는 모바일 모드를 오픈하면서 그런 티스토라만의 장점이라 할 수 있는 스킨 수정 기능을 제공하지 않고 있습니다. 모바일 장치의 호환성을 위해서라지만, 각 블로그의 특성을 고려하지 않고 광고를 넣는 블로거를 막는 방식이라 할 수 있습니다. 그래서 많은 이들이 블로그 본문에 광고 코드를 삽입하여 티스토리 모바일에서도 광고를 표시하도록 하고 있습니다.

티스토리에 모바일 광고를 넣는 방법을 찾아보다


티스토리에 모바일 광고 개제 따라하기! / 구글

구글에서도 티스토리에 모바일 광고 게재를 알려주고 있습니다. 그러나, 이 방식은 데스크탑으로 접속했을 때의 광고를 특정 형태로 강제하고 이렇게 수정하지 않은 글에서는 광고가 나오지 않는 문제점이 있습니다. 그래서 찾아보았더니 다른 방식이 있었습니다. 데스크탑으로 접속했을 때는 모바일 광고가 보이지 않도록 하는 것이죠. 이렇게 하면 데스크탑과 모바일의 광고 배치가 서로 영향을 받지 않는 장점이 있습니다.

일종에 꼼수(?)를 사용하여 티스토리 모바일 페이지에 광고 집어넣기! / Previrtu

이 방식은 모바일 광고를 넣기 위해서 각 본문에 광고 스크립트를 넣는 것은 동일합니다. 그것을 div의 class를 이용하여 CSS3의 display: none을 이용하는 방식입니다. 그래서 “바로 이거다!” 싶어 이것을 제 블로그에 적용하였습니다. 그런데 문제가 있었습니다.

구글 애드센스는 하나의 페이지에 컨텐츠 광고를 3개까지 넣을 수 있도록 하고 있습니다. 만약 3개를 초과할 경우 그 광고는 표시되지 않습니다. 그런데 이렇게 본문에 몇 개의 광고를 넣고 단지 CSS를 통해 보이지 않도록 하더라도 해당 코드는 남아있게 됩니다. 그러므로 본문 이후에 출력되는 광고가 나오지 않는 것입니다. 제 블로그의 경우에는 본문 다음에 이어지는 하단 광고와 우측 막대 영역의 광고가 표시되지 않는 것입니다. 근본적인 코드의 문제에 닥친 것입니다.

HTML 코드를 바꾸어 문제를 해결하다

그래서 저는 자바스크립트의 InnerHTML을 이용하여 티스토리 모바일에 광고를 넣는 방식을 생각해 보았습니다. 자바스크립트의 InnerHTML은 객체 ID를 얻어 그 해당 아이디 내부의 내용을 다른 HTML로 바꾸어 주는 것입니다. 설명은 넘어가고 해당 방식을 안내해 드리죠.

1. 광고 코드 추출
적절한 광고 코드를 추출합니다. 300x250 또는 250x250의 사각형 배너 또는 320x50의 긴 배너가 아니면 모바일에서는 추천하지 않습니다.

2. 광고 코드를 넣을 DIV 준비하기

<div class="AdsenseMobile" style="width: 300px; margin: 5px auto; text-align: center" id="AdsenseM1"> [광고 코드] </div>

저는 300x250의 광고를 넣기로 준비하여서 위와 같은 코드를 준비하였습니다. 넓이가 다른 것을 사용하시는 분들은 width: 뒤의 숫자를 바꾸시고 1개를 넘는 광고를 사용하실 분은 필요한 만큼 숫자를 늘려서 준비하시기 바랍니다.

3. 글에 광고 코드 넣기
모든 글에서 HTML을 누르고 같이 코드를 하나 하나 저장합니다. 우선 새로 발행되는 글을 중심으로 하셔도 됩니다.

4. 스킨의 HTML에 코드 추가
HTML/CSS 편집으로 들어가서 HTML 부분에 다음을 추가 합니다.

<script language="JavaScript" type="text/javascript"> document.getElementById("AdsenseM1").innerHTML = '<!-- 모바일 광고 1 삭제 -->'; document.getElementById("AdsenseM2").innerHTML = '<!-- 모바일 광고 2 삭제 -->'; </script>

위 스크립트를 추가할 위치는 HTML의 본문이 시작하는 <body> 다음과 끝나는 </body> 바로 앞에 추가하시면 됩니다. 또한 추가하는 광고가 많으면 그 만큼 document.getElementByID(“AdsenseMn”).innerHTML = ''을 추가하시기 바랍니다. 이 방식으로 데스크탑에서는 모바일 광고 코드를 지워버리도록 하고 모바일에서만 광고 코드가 출력되게 합니다.

실제 적용된 모습은 위와 같습니다. 반대로 데스크탑에서는 광고가 표시되지 않습니다.

InnerHTML을 이용한 방식의 장점, 단점

이와 같은 방식으로 했을 경우 나중에 티스토리가 모바일 스킨을 제공하게 되더라도 거기에도 InnerHTML 코드를 그대로 삽입하여 광고를 표시되지 않도록 하기만 하면 기존 글의 광고 코드를 무조건 삭제할 필요가 없다는 장점이 있습니다.

다만, 역시 문제는 기존 글의 본문에 광고 코드를 넣어야 한다는 단점은 해결되지 않습니다. 이 문제는 누군가 프로그램으로 BlogAPI를 써서 본문의 내용을 모두 추가해주는 기능을 제공해주지 않는다면 해결되지 않습니다. 이 점은 제가 불가능한 점이라 다른 분들이 추가하여 주신다면, 참 좋을 거 같습니다.

※ 브라우저 별 호환성 문제가 있습니다. 브라우저 별로 InnerHTML의 해석이 다릅니다. 그래서 새로운 방법입니다. 자바스크립트로 티스토리 모바일에 광고 넣기를 이용하여 적용하는 것이 좋습니다.

저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요!!

  1. 코버 2012.12.28 20:12 신고  댓글주소  수정/삭제  댓글쓰기

    여전히 소스 코드에 약간의 문제가 있는 모양입니다.

    사이드바와 하단부의 애드센스가 출력이 안되고 계시네요...

  2. Favicon of http://danbis.net 단비스 2013.01.07 14:51 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보감사합니다.
    이런걸 찾고 있었는데... 적용해보니 크롬과 파이어폭스에서는 잘되는데,
    IE, 사파리, 안드로이드 브라우저에서 PC용으로 봤을때는 광고가 출력이 안되지만, 광고가 있는것으로 인식을 하는듯...
    호환성문제만 해결되면 정말 최고의 방법이 아닐까 싶네요~

    • Favicon of http://studioxga.net Namu(南無) 2013.01.07 15:13 신고  댓글주소  수정/삭제

      이 방식을 근본적으로 해결할 방법이 없네요. IE/사파리 등에서 InnerHTML을 돌리는 방식이 달라서 해결할 방법이 없습니다... ;; 저는 그래서 다른 방법으로 바꾸어서 지금 적용 중입니다.

  3. Favicon of http://danbis.net 단비스 2013.01.07 17:31 신고  댓글주소  수정/삭제  댓글쓰기

    다른 방법이 있기는 한가 보네요~
    rss 구독을 하면서 노하우 공개를 기대해보겠습니다...^^

  4. Favicon of http://airmanstar.tistory.com you 2 2013.01.11 03:40 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 글잘읽어 보았습니다 제블로그에 적용도 해봤는데요 멋지더라구요 근데 님 모바일 화면상에서도 그렇듯 제 모바일 상 광고에서도 약간 오른쪽 쏠림이 있네요 중앙정배열 방법은 없으신가요?

    • Favicon of http://studioxga.net Namu(南無) 2013.01.11 04:21 신고  댓글주소  수정/삭제

      이 방법은 데스크탑으로 볼 때 충돌이 있어서 추천하지 않고 새로운 방법을 추천합니다.
      http://studioxga.net/1387
      또한 약간 오른쪽으로 쏠려보이는 것은 중앙 정열을 했음에도 바탕이 되는 상자가 살짝 쏠려있네요. 광고를 div 태그로 묶어주고 CSS를 다음과 같이 추가하면 됩니다. style="margin: 5px auto; padding-right: 8px;" 좌우 정렬을 조정하고 싶으면 padding-right 다음 숫자를 조절해주시면 됩니다.

  5. Favicon of http://happydayworld.tistory.com 캠핑마스터 2013.08.09 18:27 신고  댓글주소  수정/삭제  댓글쓰기

    현재 위 방법대로 모바일 애드센스를 사용중입니다
    근데 300*250 사이즈를 사용중이어서
    제거 해야 하는데 일일이 수작업으로 하려니 힘드네요
    한방에 해결하는방법이 없나요?
    현제 document.getElementByID(“AdsenseM1”).innerHTML =
    document.getElementByID(“AdsenseM2”).innerHTML =
    1,2 2개 사용중인데 문제가 되는놈이 1입니다 상단에 들어가는 놈이라 빼야하거든요 ㅠ.ㅠ