티스토리 모바일에 애드센스 반응형 광고 삽입하기

IT,게임,문학 이야기/WEB, 인터넷 2013.10.10 22:21 Posted by BoniK


티스토리 모바일 페이지에 애드센스 반응형 광고를 다는 방법입니다.
모바일 페이지에 반응형 광고를 달면 스마트폰이나 태블릿PC 등의 모바일기기로 티스토리 모바일페이지를 볼 때 화면크기에 적합한 광고를 내보낼 수 있는 장점이 있습니다.

최근에 티스토리측에서 모바일페이지에 애드센스를 간단하게 넣을 수 있도록 플러그인을 지원하고 있는데 안타깝게도 반응형 광고는 아직 지원을 하지 않습니다. 그래서 포스팅 할 때마다 서식으로 직접 입력을 해야하는 단점이 있긴합니다.

제가 운영하는 블로그 <그늘진 낙원>은 모바일 페이지에서 총 세개의 광고가 나옵니다. 티스토리 애스센스 플러그인을 사용해서 넣은 상, 하 두개의 모바일 사이즈 광고, 본문에 나오는 반응형광고 이렇게 세개입니다.

제가 넣은 반응형 광고는 PC화면에서는 출력되지 않고 모바일페이지에서만 나옵니다. PC화면에서는 데스크탑화면에 적당한 큰 광고 두개가 상하로 나옵니다.

1. 애드센스에서 반응형 광고 만들기


애드센스 사이트에서 +새 광고 단위를 클릭하고 광고를 만들어줍니다.


광고 크기에서 반응형 광고 단위(베타)를 골라줍니다. 맞춤채널이나 스타일은 본인이 사용하시는 대로 잘 골라주세요.

광고가 만들어졌으면 코드를 메모장같은 곳에 복사해 둡니다.



2. 서식으로 만들어두기

티스토리 글쓰기에서 서식을 선택해서 다음 코드를 붙여넣습니다.
<div class="mobile_ad">
애드센스 광고 코드 붙여넣기
</div>
<style>#hottrendsContainer{display:none !important;}</style>
메모장에 복사해 둔 애드센스 코드를 위 주황색 글씨 부분에 붙여넣기 합니다.
이제 서식을 적당한 제목으로 정해서 저장합니다. 저는 <모바일 애드센스>라는 제목으로 저장해뒀습니다.




위 코드 중
<style>#hottrendsContainer{display:none !important;}</style>
는 모바일페이지에서 실시간 검색이 보이지 않도록 하는 CSS명령입니다. 넣어도 되고 안넣어도 되는데 아무래도 실시간 검색 없애는게 더 보기 깔끔합니다.


3. CSS수정

티스토리 관리자 화면에서 꾸미기 - HTML/CSS 편집 으로 들어갑니다.
STYLE.CSS 항목에 아래 코드를 붙여넣습니다. 어느위치든 상관없이 적당한 곳에 넣어주면됩니다.

.mobile_ad{display:none;}
앞에 붙어있는 점(.) 생략하면 안됩니다.


4. 포스팅해보기


이제 포스팅할 글을 적고 마지막에 저장 및 발행하기 전에 서식을 추가합니다.
포스팅에서 광고를 넣고 싶은 부분에 커서를 놓습니다.
그 다음에 우측 서식에 있는 <모바일 애드센스>를 클릭해서 서식을 추가합니다.

에디터 화면에서는 바뀐게 없지만 HTML소스가 추가됩니다.


5. 확인해보기

자신의 블로그 주소/m 으로 접속합니다.
그러면 모바일페이지로 접속이 되는데 인터넷 창의 크기를 늘이고 줄여보면서 광고가 제대로 나오는지 확인합니다.
참고로 애드센스광고는 만들고나서 좀 시간이 지나야 제대로 나옵니다.


6. 추가

위 방법에서 반응형광고는 모바일 페이지에서만 나옵니다.
반응형광고는 반응형페이지에서만 제대로 동작하는데 PC버전은 반응형페이지가 아닌 스킨도 있고 반응형으로 제작된 스킨도 있습니다. PC버전까지 모두 반응형페이지라면 그냥 원하는 곳에 애드센스 코드를 넣기만 해도 됩니다.

반응형광고라고 해서 1px단위로 광고가 변하지는 않습니다. 광고주한테 받은 광고 사이즈들 중에서 현재 페이지에 적당한 것을 골라서 내보내는 것입니다.


신고
힘내서 포스팅할 수 있도록 위의 공감버튼(♡)을 눌러주시면 감사하겠습니다.
블로그 내용을 무단으로 퍼가시면 안됩니다. (링크만 허용)
네이버 이웃추가하면 <그늘진 낙원>의 새 글 소식을 네이버에서 확인할 수 있습니다.

Posted by BoniK

댓글을 달아 주세요

  1. 부탁드립니다 2013.12.05 03:46 신고  댓글주소  수정/삭제  댓글쓰기

    죄송합니다 갑자기 이런댓글을남겨서
    저는 부모님용돈용으로 지금블로그를 운영하고잇는데요 거의컴맹수준이라
    잘모르는게 많네요
    다른것이아니라 모바일로 보았을때 본문에 뜨는 광고를 하고싶은데 서식에 넣고
    이런걸 아예모를것같아서 부탁드립니다 꼭사례하겠습니다
    네이트온 edka1004@nate.com
    010 4467 0608 연락좀꼭부탁드립니다

    • Favicon of http://bonik.me BoniK 2013.12.05 10:22 신고  댓글주소  수정/삭제

      제가 어차피 웹전문가도 아니고 요즘에 중요한 일이 있어서 도와드리기가 힘들 것 같네요.
      http://www.xpressengine.com/agent
      위 사이트에 가면 직업으로 하시는 분들 많으시니까 한 번 둘러보세요.

  2. Favicon of http://wodbslek1.tistory.com 나를나대로 2013.12.09 12:14 신고  댓글주소  수정/삭제  댓글쓰기

    좋은글 추천늘리고갑니다.
    저렇게지정해놓고 서식으로 가져와서
    예전모든포스팅도 수정하면되겠군요^^
    모바일에서만 크기별로나온다니 신기한
    기능이네요^^

  3. Favicon of http://wodbslek.tistory.com/ 알렌' 2013.12.11 03:55 신고  댓글주소  수정/삭제  댓글쓰기

    아..스마트폰에서만 보이는 광고가 아니라 타블렛에서 쓰는게
    반응형광고인가요??? 문의드린건 제 ㅎ휴대폰 (g2)에서도
    본문 포스팅 맨하단에 있는 광고를 넣는방식을 여쩌본건데..
    이대로 하면되는건가요?ㅎㅎ

음악레슨,화성학레슨,미디레슨

© 2010-2016 bonik.me All rights reserved. 저작물 무단도용 및 복제 금지 | 레슨문의 | 블로그 광고문의
블로그 광고 안내

그늘진 낙원에 광고를 넣고 싶은 분들을 위한 안내입니다.

사이트 컨텐츠 카테고리 : 음악,엔터테인먼트/실용음악/작곡 | 음악/컴퓨터음악 | 취미/악기연주
광고불가 업종 : 성인, 유흥업소, 다단계, P2P 및 웹하드, 도박, 불법 의약품
광고 문의 : mail@bonik.me (업체명, 업종, 희망 광고내용 등을 알려주세요.)


블로그 방문자 분석

방문자 분석


배너 광고

추천 업종 : 음악앨범, 공연, 오디션, 대학 실용음악과, 실용음악학원, 악기판매, 녹음실, 음악 관련 세미나 등
광고 위치, 형태 : 사이트 우측 정사각형 배너 (기본 200X200px 이미지 / 모니터 크기에 따라 자동 변경)
광고 기간 및 비용 (배너 제작 비용은 포함되어 있지 않습니다.)

기간

비용

추가혜택

 1개월

20,000 원

 

 3개월

50,000 원

 

 6개월

100,000 원

 블로그 포스팅 1회 포함

 12개월

200,000 원

 블로그 포스팅 1회 포함



포스팅 광고

추천 업종 : 문화(음악, 영화, 문학, 게임, 만화 등), IT (기기, 서비스, 어플), 교육, 관광, 건강 등
광고 형태 : 블로그에 광고 내용을 포스팅
광고 비용 : 포스팅 1회 당 5만원 (이미지 제작 및 출장 비용은 포함되어 있지 않습니다.)
포스팅 내용 : 포스팅 내용은 의뢰자의 의견을 반영하여 직접 작성


▲ Back to top