리뷰/어플,모바일,인터넷

티스토리 반응형 웹과 애드센스 설치하고 수익이 완전히

cultpd 2014. 9. 6. 11:02

광고코드를 너무 많이 넣어서 애드센스에서 경고 ㅜㅜ



글쓰기에 앞서 필자도 html에 초보다. 배우면서 연구하면서 쓴 글이기에 

질문은 못받고 또한 따라하시다 괜히 블로그 망칠 수도 있으니 

항상 백업해두시고 연구하시기 바란다. 

필자도 몇번이나 새로 세팅하는 바보같은 행동을 했기에... 

그리고 이 글은 계속 업데이트 예정이다!


반응형 웹이 대세다.

모바일 접속이 빛의 속도로 확산되고

이제 컴퓨터보다 앞지른 경우가 많다.


하지만 기존의 사이트, 블로그를 반응형 웹으로 수정하고

애드센스를 설치하고 싶다면

신중히 생각해야한다.



우선 반응형 웹이 무엇인지 개념을 아주 쉽게 설명하면

접속자의 단말기, 디바이스를 인식하여 웹을 최적화하는 것이다.

그러니까 여러가지 경우의 수를 입력해놓고

크기가 이 정도되는 화면이면 이렇게 표현하고

그것보다 작으면 이렇게 표현하고... 뭐 이런 식으로 반응을 하여

사이트가 변화하는 것이다.


그리 어려운 작업은 아닌데

문제는 애드센스를 달아야한다면 고민해봐야한다.


물론 최적화하여 잘 운영하는 사람들이 있지만

이는 초기단계라서 쉽게 세팅되어 있지 못하다.

그러니까 단순히 스킨 올리고 단편적인 언어 복사해다 붙이면 되는

이전의 작업과 다르다는 것이다.



우선 필자가 반응형 웹으로 블로그를 바꾸고 나서 

애드센스 수익이 말도 안되는 수준으로 떨어졌다.

하필이면 30만 접속이 있던 날, 반응형 웹을 시도하다

10만도 안되는 접속 수준으로 수익이 떨어졌다.



문제는 뭔가?

반응형 웹은 디바이스의 사이즈에 따라 작게는 두개에서 많게는 4-5개의 변화를

미리 정해놓는 것인데

문제는 이게 아무리 정확하다 해도 살짝씩 다르다.

넥서스 다르고 아이폰 5와 아이폰 4까지도 다르다 ㅜㅜ

게다가 익스플로러 구형으로 접속하는 경우까지


여러가지 변수가 생기는데 구글 애드센스가 함께 일체형으로 잘 연동되면 

문제는 거의 없어지지만 구글 애드센스의 반응형 광고가 문제다.

이게 또 지 마음대로 큰 광고 냈다 작은 광고 냈다, 때로는 배너를 내보내기도 한다 ㅜㅜ


수익이 1/3로 줄게 된 그날!

문제는 좌우로 긴 배너가 컴퓨터에는 나가고

놀랍게 모바일에서 원래는 위 아래 두개만 나갔었는데

아래에 아주 작게 바뀐 두개의 구글 광고가 그대로 반응형으로 줄어들어 

나간 것이다.


이게 뭘 의미하냐하면

pc는 pc대로 거의 안보이는 좌우로 긴 배너가 나간 것이고

모바일은 너무 작은 글씨 두뭉치가 나간 것이다 ㅎㅎㅎㅎ



게다가 크게 나오게 하려고 바꾸니 또 모바일에서 구글 규정을 어기는

한 화면에 광고만 차지하게되는...

현재 진퇴양난이다.


구글 애드센스에서 스마트로 하면 멋대로 바뀌기 때문에 디바이스마다

문제가 생길 수 있으니 애드센스 반응형을 만들고





광고코드를 가져갈 때 스마트 크기 조정으로 하지 않고

고급으로 가져가면 방법이 있다.

하지만 이게 코드 수정을 할 줄 모르면 여간 괴로운게 아니다.






예를 들면 아래 세줄을 해석하면 

내 광고는 320x50 사이즈로 하겠다.

하지만 가로가 500픽셀 이상이면 468x60 사이즈 광고를 내보내라.

800픽셀이 넘어가는 화면에서는 728x90 사이즈 배너 광고를 내보내라.



이것때문에 하루 종일 원하지 않는 길다란 배너만 계속 나간거다.

구글의 광고 사이즈는 애드센스에 보면 있으니 

자신의 블로그와 연동해 이것을 잘 수정해보면 답이 나온다.


하지만 그냥 반응형 웹은 조금 기다렸다가 버그가 다 잡히고

사용자가 편리하게 이용할 수 있게 개선된 후 만드는 것이 좋겠다.

반응형 웹도 과도기고 구글 애드센스 반응형 광고도 과도기라서

이 둘이 만나면 큰 손실을 볼 수도 있다.


특히 어떤 블로거의 반응형 티스토리 스킨에는 악성 광고 코드같은 것이 

심어져 있는 것 같다.

블로그가 완전히 맛이 가서 게속 스킨이 벗겨진다 ㅜㅜ


세상에 참 나쁜 사람들 많다.


나도 초보라서 모르겠는데

그럼에도 불구하고 먼저 고생하고 있으니

요런 사이즈로 하고 있음을 알려드리고

아래 코드는 글 오른쪽에 애드센스가 나오는 코드다.




글 아래 붙여놓은 애드센스 광고의 경우

아무리 수정해도 제멋대로 사이즈가 나와서 며칠을 고생했는데

이제보니 


한 광고계정을 다양한 곳에 붙이면서 이름을 같게 하니 사이즈가 안변하거나

제멋대로 요동친다.

아래보면 adslot부분을 adslot3으로 바꾼 이유다.




<div style="float:right;margin: 0px 0px 20px 20px">
애드센스 코드
</div>


픽셀은 순서대로 위 오른쪽 밑 왼쪽

시계방향 마진 (여백)을 주는 것인데 글과 만나는 왼쪽과 밑부분만 마진을 주는것


<table align="right" border="0" cellpadding="0" cellspacing="5">
<tr><td> 
<div>
애드센스 코드 
</div>
</td></tr></table>


티스토리 치환자 모음 

[ ##_blog_link_##] 블로그의 주소(url) - 블로그 주소가 필요한곳에 넣으면 됩니다.

[ ##_title_##] 블로그 제목으로 환경설정-기본설정에 변경가능

[ ##_page_title_##] 현재 보고 있는 글의 제목

[ ##_localog_link_##] 지역로그 페이지 링크(주소)

[ ##_taglog_link_##] 태그로그 페이지 주소

[ ##_notice_rep_title_##] 공지사항 글의 제목

[ ##_article_rep_link_##] 포스트(글)의 주소

[ ##_article_rep_title_##] 포스트 제목

[ ##_article_rep_category_##] 카테고리명

[ ##_article_rep_desc_##] 블로그 글(포스트)

[ ##_image_##] 블로그 이미지

[ ##_desc_##] 블로그 설명글

[ ##_rctps_rep_title_##] 최근글 제목

[ ##_owner_url_##] 관리페이지 링크

[ ##_rss_url_##] rss 피드 주소


메뉴 새롭게 만든 것 

https://github.com/adtile/fixed-nav


마크쿼리 스킨 다운로드 

http://markquery.com/download/


티스토리 반응형 스킨 또 하나 

http://blog.readiz.com/category/반응형%20티스토리