자체 광고 문제에도 티스토리를 선택한 이유
티스토리 블로그에는 자체 광고가 게재되어 있다. 이 자체 광고는 글의
최상단 또는 최하단에 랜덤하게 게시된다. 글의 최상단에 게시될 경우 광고 수익의 상당 부분을 다음 회사가
가져가게 된다. 블로그 운용 대부분의 수익은 전면 광고와 글의 상단 광고에서 생기기 때문이다. 이 때문에 기존에 티스토리 블로그를 운영하던 많은 사람들이 네이버 블로그, 워드프레스
또는 구글 블로그로 갈아타게 되었다.
그럼에도 불구하고 나는 티스토리를 선택했었다.
네이버 블로그는 구글 검색엔진 노출이 어렵고, 애드센스 광고를 연동할
수 없다. 대신에 네이버 애드포스트를 게시할 수 있는데 이는 애드센스 광고보다 수익이 낮다고 한다.
워드프레스는 서버 호스팅 비용을 지불해야하는데 초보자 입장에서는 호스팅 비용이 만만치 않다.
구글 블로그는 색인이 잘 안된다.
티스토리의 자체 광고는 너무나 큰 문제이지만 이 문제를 해결하기 위한 다양한 방법들이 소개되었으며, 글 최상단과 글 제목 위에 수동 광고를 게시함으로써 빼앗긴 수익 대부분을 회복할 수 있었다고 한다.
티스토리 광고 배치에 신경쓰다
그렇게 나는 글 최상단에 수동 광고를 설정하고 글을 작성했다. 수익이
발생하지 않아서 이성적으로는 그만해야 한다고 생각했지만 아이디어가 너무나 많아서 계속 작성했다. 결국
조금씩 수익이 나기 시작했다. 하지만 나는 그동안의 노고에 비해 너무나 적은 수익에 불만족한 나머지
광고 배치에 신경쓰기 시작했다.
광고 배치에 신경쓰기 전에는 글의 최상단 광고만 설정하고 나머지는 자동 광고에 맡겼다. 광고 수익의 극대화하고 싶은 나머지 글의 제목 위에도 광고를 설정했다. 그런데
이렇게 하니 문제 2가지가 발생했다.
광고 배치 중 발생한 문제1: 상단 광고 로딩 느림
첫번째 문제는, 광고는 마지막에 로딩되기 때문에 웹 페이지 방문하자마자
스크롤을 내려버리면 방문자가 광고를 볼 수 없게 된다.
첫번째 문제를 해결할 수 있는 방법이 있다. 페이지 로딩이 완료될 때까지 로딩 화면을 설정하는 것이다. 나는 이 로딩 화면을 설정하기 위해 온갖 블로그를 뒤지고 다녔다. 로딩 화면 설정 문제가 생각보다 까다로웠기 때문이다. 구글에서 티스토리 블로그 로딩 화면 설정하는 방법을 소개하는 글은 매우 많지만 이들 대부분은 스크롤 고정을 못하며, 모바일에서 앵커 광고 송출이 안 된다.
페이지가 로딩될 때까지 스크롤을 움직이지 못하게 고정해야 방문자가 제목 위 광고부터 제대로 볼 수 있게 된다. 이 방법을 제대로 소개한 글을 단 한가지도 찾을 수 없었다. 이 방법을 소개한 글들이 몇 개 있었는데 작동이 제대로 되지 않았다. 결국 나는 코파일럿을 통해 html 코드를 만들게 되었다. 코드는 다음과 같다.
<!-- 블로그 로딩 코드 start -->
<style type="text/css">
#waiting {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: flex;
background: white;
z-index: 999;
opacity: 0.9;
}
#waiting > img {
display: flex;
width: fit-content;
height: fit-content;
margin: auto;
}
/* 페이지 로드 시 스크롤을 막는 스타일 */
body {
overflow: hidden;
}
</style>
<div id="waiting">
<img src="./images/loading.gif">
</div>
<script type="text/javascript">
$(window).on('load', function() {
// Check if AdSense ads have loaded
var adLoaded = false;
var adElements = document.getElementsByClassName('adsbygoogle');
for (var i = 0; i < adElements.length; i++) {
if (adElements[i].clientHeight > 0) {
adLoaded = true;
break;
}
}
// If ads have loaded, hide the waiting screen and allow scrolling
if (adLoaded) {
setTimeout(function(){
$("#waiting").fadeOut();
$('body').css('overflow', 'auto'); // Restore scrolling
}, 100);
} else {
// If ads have not loaded, keep checking until they do
var checkAdLoaded = setInterval(function() {
for (var i = 0; i < adElements.length; i++) {
if (adElements[i].clientHeight > 0) {
clearInterval(checkAdLoaded);
$("#waiting").fadeOut();
$('body').css('overflow', 'auto'); // Restore scrolling
break;
}
}
}, 100); // Check every 100 milliseconds
}
});
</script>
<!-- 블로그 로딩 코드 end -->
위 코드는 미넴 스킨 제작자의 블로그에서 공유한 로딩 화면 코드를 바탕으로 수정 및 추가된 것이다.
https://sangminem.tistory.com/624
위 블로그 글에서는 단순히 웹 페이지가 로딩될 때까지 로딩 화면만 띄우는 코드를 다루었다. 로딩 동안 스크롤도 자유롭게 움직일 수 있다. 또한 위 글에서 광고를 위해 로딩 화면 유지에 500ms 시간을 추가했다고 하는 것으로 보아,
$(window).on('load', function()그런데, copilot을 통해 만든 위의 코드를 블로그에 적용해봤더니 다른 문제가 생겼다. 모바일에서
앵커 광고가 송출되지 않았다. 그래서 로딩 화면이 있는 블로그들 중에서 모바일 앵커 광고가 송출되는
블로그를 찾아다녔다. 신기했던 것은 미넴 스킨을 사용하고 있는 블로그들은 모바일 앵커 광고 송출이 매우
잘 되었다. 위에서 소개한 미넴 블로그 글에 적힌 코드를 사용하면 모바일 앵커 광고 송출이
잘 안된다. 그런데 미넴 스킨이 적용된 블로그 대부분은 모바일 앵커 광고가 송출이 되는 것이었다. 결국 미넴 스킨을 다운로드하여 로딩 화면 코드를 살펴보기 시작했다. Html
코드를 이해할 수 없어서 copilot에게 일일이 물어보며 이해하려고 노력했다. 결국에는 로딩 화면을 사용해도 모바일 앵커 광고 송출하게 되는 방법을 찾았다.
이유는 모르겠다. 그냥 차이점을 알고 방법만 알게 되었다. 차이점은 다음과 같다.
위의 미넴 스킨 제작자 블로그에서 공유한 로딩 화면 글 코드는 그냥 <body>아래
삽입하게 되어있다. 다른 블로그들에서도 대부분 로딩 화면 코드를 <body> 아래 삽입하라고 한다. 이게 문제였다. 미넴
스킨을 열어서 살펴보면 <body> 내부 요소들이 div
id=”wrapper” 에 싸여 있다. 그리고 그 안에 블로그 로딩 화면 코드가 적혀
있었다.
wrapper의 CSS를
살펴보니 아예 처음부터 overflow: hidden 코드로 스크롤을 막아 놓고 로딩이 완료되면
이 코드를 해제하는 형식이었다.
그래서 나도 똑같이 따라했더니 로딩 화면이 나타나는 동안 스크롤이 안되고 로딩 완료 후에 모바일 앵커 광고 송출이
잘 되었다. 여기서 또다른 문제가 발생한다. 이렇게 했더니, 수동 광고 말고는 다른 자동 광고들이 송출이 되지 않았다. 이것을
보고 프로그램 개발자들이 얼마나 대단한 사람들인지 깨닫게 되었다. 문제를 수정하면 또 다른 문제가 발생한다.
물론 시간이 지나면 다시 자동 광고가 나타날지도 모르나, 내가 잘
모르는 영역이기 때문에 불확실했다.
(참고로, 미넴 스킨에서 로딩 화면을 사용해도 모바일 앵커 광고가 나타나는
것을 확인한 다음 메인 블로그의 스킨을 미넴 스킨으로 변경했었다. 나의 세컨드 블로그는 기존 북클럽 스킨을
유지하며, 로딩 화면 코드 실험을 하였다. 이 세컨드 블로그에서
로딩 화면 실험을 하다가 모바일 앵커 광고 송출에 성공한 것이다.)
메인 블로그 스킨을 미넴 스킨으로 변경하니 할 게 많아졌다. 불필요한
요소들을 제거하는 것, 자동 목차가 글 최상단 광고 바로 아래 고정되어 나타나야 하는 것, 글자 크기, 자동 목차 h2 제목
굵기, 플로팅 목차 삭제, 인피드 광고 설정, 사이드바 광고 설정 등을 하면서 어쩔 수 없이 html 코드들을
조금 공부하게 되었다.
또 문제가 발생하였다. 미넴 스킨으로 변경 후 자동 광고가 송출되지
않았으며, 미넴 스킨 자체에 있는 수동 광고 설정 기능을 사용해도 광고가 나타나지 않았다. 결국 기존 미넴 스킨 html에서 제목 위 광고와 글 최상단 광고
코드를 내가 직접 바꿔 넣었다. 이렇게 하니 광고가 잘 나타났다. 문제는
커버 목록 인피드 광고와 글 중간에 나타나는 광고도 직접 수정해야 하는데, 이렇게 일일이 하다가 정신이
나갈 것 같았다. 그래서 미넴 스킨 사용 후기 글들을 찾아 다녔다. 다른
사람들도 이렇게 직접 코드를 수정하는지 궁금했다. 미넴 스킨 후기 글들을 보니 광고 설정 적용 후 며칠
후에 수동 광고가 나타난다고 하였다. 이 글을 보고, 자동
광고도 미넴 스킨 적용 후 며칠 후에 나타날지도 모른다고 생각이 들었다. 하지만 나는 이를 알지 못한다.
너무 복잡하고 혼란스러워서 다시 처음으로 돌아와 ‘이사양 잡스’ 유튜브 영상을 시청했다. 그가 말하길, 로딩 화면과 제목 위 광고, 글 최상단 광고는 이탈률을 높이기 때문에, 연금형 블로그를 운영할 것이라면 이런 전략을 사용하지 말라고 하였다. 이탈률이
높으면 시간이 지날수록 검색 결과 상단에서 내려오게 된다. 또한 다른 유튜버는 블로그에 게시된 광고가
많을수록 광고 단가가 낮아진다고 한다.
결국 나는 다시 북클럽 스킨으로 변경하고 글 최상단 광고를 수동으로 설정하는 것 외에는 전부 구글 자동 광고
알고리즘에 맡겼다.
“Simple is the Best”가 블로그 광고 세계에도 적용되었다고
생각했다.
물론 블로그 글 퀄리티가 정말 매우 매우 월등하게 좋으면 로딩 화면과 스크롤 설정을 해도 사람들이 이탈률이 그리
낮아지지는 않을 것이다.
광고 배치 중 발생한 문제 2: CLS
두번째 문제는, 구글 서치 콘솔
CLS 문제이다. 애드센스 광고는 글의 콘텐츠가 로딩되고 나서 마지막에 로딩된다. 광고가 로딩될 때 이미 로딩된 글의 레이아웃을 밀어내기 때문에 CLS 문제가
발생하며, 이는 구글 SEO에 불리하다. 이를 해결하기 위한 글 역시 여러 개이다. 대부분 광고 크기를 지정하면 CLS 문제가 해결된다고 한다. 하지만 내 경험상 그렇지 않다. 광고 크기를 지정하는 것이 아니라 광고가 나타나기 전 여백의 크기를 지정해야 한다. 이를 설정하기 위한 코드는 다음과 같다.
다음 CSS 코드를 블로그 스킨 CSS 탭에 넣어주고 html에서 수동 광고를 <div class=”adheight”>와 <div>로 둘러싸면 된다.
.adheight {
background-image: none !important;
min-height: 280px !important;
<div class="adheight">
<!-- 애드센스 광고 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-"펍코드 입력"
data-ad-slot="광고번호 입력"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
사실 CLS 수치가 안 좋아도(높아도) 글 퀄리티가 좋으면 결국에는 검색 결과 상단에 나타난다. 나는 그만큼
내 글 퀄리티에 자신이 없기 때문에 이런 자잘한 것들을 신경 쓰고 있는 것이다.
결론
다시 한번 말하지만, 개발자분들 정말 대단하다는 것을 느꼈다. 제대로 작동하는 코드를 찾을 때까지 계속 찾아야 한다. 이 방법으로도
해보고 저 방법으로도 해보며 원하는 결과가 나타날 때까지 실험해봐야 한다. 그리고 원하는 결과가 나타났을
때의 쾌감이 이 행동을 지속하게 하는 원천이라고 생각한다.
그리고 결국에는 단순함이 최종 목적지가 된 것이 흥미롭다.