티스토리 모바일 페이지에 애드센스 반응형 광고를 다는 방법입니다.
모바일 페이지에 반응형 광고를 달면 스마트폰이나 태블릿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단위로 광고가 변하지는 않습니다. 광고주한테 받은 광고 사이즈들 중에서 현재 페이지에 적당한 것을 골라서 내보내는 것입니다.
'IT,게임,문학 이야기 > WEB, 인터넷' 카테고리의 다른 글
블로그 관리하면서 해서는 안되는 것들 - 저품질 블로그 예방 (1) | 2013.11.28 |
---|---|
실용음악블로그 <그늘진 낙원> 방문자 100만명 기념 음악무료배포 (30) | 2013.11.10 |
티스토리 모바일에 애드센스 반응형 광고 삽입하기 (9) | 2013.10.10 |
구글 애드센스 저작권관련 정책 이해하기 (0) | 2013.09.27 |
실용음악 블로그 <그늘진 낙원> 방문자수 50만명 돌파!! (2) | 2013.04.11 |
블로그 리뉴얼을 했습니다. (3) | 2013.03.21 |
댓글을 달아 주세요
부탁드립니다 2013.12.05 03:46 댓글주소 수정/삭제 댓글쓰기
죄송합니다 갑자기 이런댓글을남겨서
저는 부모님용돈용으로 지금블로그를 운영하고잇는데요 거의컴맹수준이라
잘모르는게 많네요
다른것이아니라 모바일로 보았을때 본문에 뜨는 광고를 하고싶은데 서식에 넣고
이런걸 아예모를것같아서 부탁드립니다 꼭사례하겠습니다
네이트온 edka1004@nate.com
010 4467 0608 연락좀꼭부탁드립니다
제가 어차피 웹전문가도 아니고 요즘에 중요한 일이 있어서 도와드리기가 힘들 것 같네요.
http://www.xpressengine.com/agent
위 사이트에 가면 직업으로 하시는 분들 많으시니까 한 번 둘러보세요.
좋은글 추천늘리고갑니다.
저렇게지정해놓고 서식으로 가져와서
예전모든포스팅도 수정하면되겠군요^^
모바일에서만 크기별로나온다니 신기한
기능이네요^^
근데 타블렛보다는 스마트폰 접속이 훨씬 많다보니 그렇게 효과 있는 건지는 잘 모르겠어요. ㅎ
아..스마트폰에서만 보이는 광고가 아니라 타블렛에서 쓰는게
반응형광고인가요??? 문의드린건 제 ㅎ휴대폰 (g2)에서도
본문 포스팅 맨하단에 있는 광고를 넣는방식을 여쩌본건데..
이대로 하면되는건가요?ㅎㅎ
스마트폰, 타블렛 상관없이 디스플레이 크기에 따라 광고크기도 바뀌는게 반응형입니다. 제가 이전에 모바일용 달아놓은 것과 비교해서 수입이 별 차이 없다는 뜻이었어요. 이대로 하시면 됩니다.
아...답변감사합니다
폰이커질수록 광고도 크게출력된다고
이해하면되겠네요ㅎㅎ
혹시 상단2개 하단1개가 데스크톱서사용중인데 이서식도 넣게되면 광고위반이지요??
상단걸 하나없애야하나봐요..
모바일에서만 보이고 PC에서는 안보이기 때문에 상관없습니다.