티스토리 애드센스 수익 높이기 (광고 로딩화면 만들기)
- 머니 파이프라인/블로그 (blog)
- 2022. 12. 20. 15:01
이번 글은 티스토리 블로그 애드센스 광고 수익을 높이고 싶을 때 한 번 시도해볼만한 것에 대한 내용이다. 티스토리 블로그로 애드센스 수익을 높이려고 할 때 사람들은 각종 기술부터 먼저 익히려고 하는 경향이 있는데, 잘못된 것이다
포스팅이 1000개도 안되었을 때는 기본적인 부분만 (스킨 등) 신경 쓴 후 키워드를 고려해서 포스팅을 꾸준히 이어나가는 것이 가장 먼저다
최근 공부할 것도 많고 준비할것도 많아서 블로그 포스팅만 꾸준히 하려고 노력하면서 생활을 하고 있다
블로그 포스팅이 500개 또는 1000개도 안될 때는 기본적으로 뭐라도 포스팅을 하면서 글을 쓰는 것이 답이다. 하지만 포스팅을 꾸준히 하고 글이 쌓인 후에는 어떻게 내가 쓴 글들을 노출시키고 수익을 극대화 할 수 있을지 고민하는게 좋다
광고 로딩화면 만들기
티스토리 블로그 운영은 답이 없다. 그래서 티스토리 블로그에 관심을 가진 후에 보았던 수많은 블로그들만 봐도 참 다양하다는 것을 알 수 있다
또한 어떤 블로거에게는 A라는 방법이 수익을 늘리는데 도움을 주었지만, 어떤 블로거에게는 A라는 방법이 잘 통하지 않을 때도 있는 법이다
티스토리 블로그를 보다보면, 아래화면처럼 로딩화면이 뜨는 것을 본 적이 있을 것이다. 이런 로딩화면을 만드는 가장 큰 이유는 구글 애드센스 광고가 티스토리 블로그에 온전히 나타날 때까지 독자가 기다릴 수 있게 하기 위함이다
사실 티스토리 블로거들이 구글 애드센스 수익 확대를 위해서 이런 로딩화면을 만든다는 것은 익히 알고 있었지만, 그럼에도 불구하고 쉽사리 시행에 옮기질 못하고 있었다
하지만, 포스팅도 어느정도 쌓이고 똑같은 글 갯수로도 수익을 늘리는 방법을 고민하다보니 결국 로딩화면 설정을 해두어야겠다는 생각을 했다
티스토리 블로그에 새로운 변화, 트기 HTML이나 CSS 관련 변화를 줄 때는 항상 서브 블로그들로 실험을 한다. 그래서 적용이 잘 되는 것 같으면 조금씩 다른 블로그들에도 적용을 해보는 편이다
처음에는 티스토리 블로거들이 왜 블로그를 여러개 운영하는지 몰랐는데, 요즘은 점점 왜 블로거들이 그렇게 하고 있는지 알게 되었다
티스토리 블로그
로딩화면 만드는 방법
참 혼자서도 노력을 많이 하는 티스토리 블로거들이 많다. 나도 로딩화면 만들기에 대해 검색을 하다가 알게 된 블로그가 있는데, 블로그님이 친절하게 설명을 해두어서 쉽게 따라할 수 있었다
또한 티스토리 블로거라면 JB SKIN에 대해 알것인데 나도 JB SKIN을 사용하고 있어서, 이 스킨 기준으로 설명이 잘 되어 있어서 너무 좋았다
티스토리 블로그 로딩화면 만들기는 아래의 글에 나와있는대로 잘 따라하면 된다. 이 블로거도 다른 블로그를 참고했다고 한다. 그 블로그도 검색을 해서 찾았다. 같이 링크를 첨부해둔다
티스토리 SEO 설정 - 로딩화면을 만들어 애드센스 수익을 올려보자
애드센스 관련하여 이것저것 셋팅을 하다가 애드센스 광고가 로딩이 늦게 뜨는것을 발견했다. 덩그러니 ADSENSE라는 이미지가 노출되는데 다들 무엇인지 알거다. 광고를 모두 불러오기 전에 사용
type.tistory.com
애드센스 광고 빠르게 로딩하기
웹페이지를 지연하여 구글 애드센스 광고 동기화 "구글 애드센스 광고 단위를 생성하게 되면 광고 로딩과 관련해 동기/비동기 방식에 대한 옵션이 있다."라고 말하려 하였으나 본 포스트의 참고
topis.me
또한 티스토리 블로그 로딩화면을 만들 때 다양한 아이콘을 선택할 수 있는데 아래의 링크에서 본인이 원하는 디자인을 고르면 된다. 다양한 디자인이 있기 때문에 이쁘면서도 심플한 것을 추천한다
https://icons8.com/preloaders/
Preloaders.net - Loading GIF, SVG & APNG (AJAX loaders) generator
More than 1000 free and premium ajax loader (loading animated GIF, SVG and APNG) spinners, bars and 3D animations generator for AJAX and JQuery
icons8.com
티스토리 블로그
로딩화면 HTML CSS 설정 후
나는 위의 블로거분이 JB SKIN에 최적화된 코드를 만들어 두어서 서브 블로그들에 한번 적용을 해보았다
1) <Body id ....> 혹은 <body> 아래에 아래 소스코드를 넣는다.
필자의 경우 <Body>가 없어서 한참 애를 먹었고, 가로세로 중앙정렬을 맞추기 위해서 정말 쇼를 한 것 같다.
<!--로딩화면 초기스크립트--> <div id="loadOverwrapper"><div class="loader"> <div id="table"> <div class="table-cell"> <!-- 테이블 속성으로 중앙정렬하기--> </div> </div> <style> #table{ display:table; height:200px; background:#999 } #table .table-cell{ display:table-cell; vertical-align:middle } </style> <img src="./images/loading.gif" alt="loading"></div></div> <!--로딩화면 초기스크립트 끝-->
2) 아래와 같이 </Body> 앞에 해당 코드를 삽입한다.
<!--로딩화면-->
<script>function rmLoadOverwapper(){ document.querySelector("#loadOverwrapper").style.display="none"; }
try { document.querySelector("iframe[onload*='google']").onload=function(){ rmLoadOverwapper(); }
setTimeout(function(){ rmLoadOverwapper(); }, 2500); }
catch(err) { setTimeout(function(){ rmLoadOverwapper(); }, 2500); }
</script>
<!--로딩화면 끝-->
3) CSS 최하단에 아래 코드를 삽입한다.
/* 로딩 사이클 애니매이션 (개인추가)*/
#loadOverwrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #fff;
z-index: 9999;
text-align: center;
padding: 10% ;}}
적용한 후에 서브블로그에서 로딩화면이 제대로 구현된다는 것을 확인할 수 있었다. 모바일 및 PC화면에서 모두 적용이 되었고 모바일에서는 로딩화면을 넣으니 처음부터 애드센스 광고가 모두 나오는 것을 확인할 수 있었다
그래서 좋아했는데, 자세히 보니 문제점이 하나 발견되었다. 앵커광고랑 사이드레일 (측면 광고)가 송출되지 않는 것이었다. PC화면에서는 앵커광고 및 사이드레일 광고가 나오지 않고, 모바일에서는 측면 레일 광고가 애초부터 나오지 않으니 앵커광고만 송출되지 않고 있었다
그래서 아직 완벽하게 구글 애드센스 로딩화면을 구현한 것은 아니지만, CSS 코드를 조금만 수정하면 정말 최상의 결과가 나오지 않을까 생각하고 있다
향후에 만약 정확한 해결방법을 알게 되면 또 다시 새로운 글로 이 블로그에 포스팅을 해보고자 한다
블로그에 블로그 및 직장인 부업과 관련된 글들이 잘 정리되어 있다. 궁금한 내용이 있다면 아래의 글들을 읽어보자
* 네이버 블로그로 돈버는법 정리
* 유튜브로 돈버는법 정리
* 전자책 pdf 판매 수익 공개
* 유튜브 조회수 수익, 계산하는 방법