어제 저녁에 티스토리 스킨을 어떻게든 최적화시켜 보려고 만지작 거리다가 무심코 게시물 하나를 보게 되었답니다. 처음에는 CLS 시간을 단축시키거나 딜레이 시간을 없애는 것이 목표였지요. 이전 게시물에서도 언급했었던데, 구글 애드센스 광고가 나타나야 할 자리에 광고가 나타나지 않을 때 포스팅한 게시물이 밀려 올라가면서 튕기는 현상, 반대로 이야기하자면 포스팅한 게시물 위 쪽에 애드센스 광고 배너가 들어오면서 게시물이 아래로 밀리는 현상. 어찌 되었든 고정으로 딱 붙어 있는 것이 아니라 애드센스 광고가 나타나지 않을 것을 대비하여 자동으로 공백을 없애는 기능을 적극 사용하는 바람에 구글 서치 콘솔에서 CLS 문제가 발생했었습니다. 내용이 궁금하면 이전 게시물을 참고하세요.
구글 서치콘솔 CLS 문제: 0.1 초과? 깔끔하게 해결하는 방법
CLS (Cumulative Layout Shift) 문제는 웹사이트에서 페이지 로딩 중에 발생하는 레이아웃 변화가 사용자 경험에 부정적인 영향을 미치는 문제입니다. CLS 점수는 변화된 레이아웃 요소의 크기와 위치,
blogschool.kr
애드센스 수익 당장에 2배로 늘리는 법
조금 보기는 싫더라도 공간을 강제로 비워두고 싶어서 스킨 수정 작업 중이었습니다. 그러다가 우연히 발견한 가뭄에 단비 같은 애드센스 팁. 구체적으로 언급하자면 보통 PC 화면에서 포스팅된 게시물 상단에 애드센스 광고 배너가 노출되게 하면 이렇게 나타납니다.
크게 이상하지도 않고 그냥 깔끔합니다. 맨 상단에 제목이 나오고 본문이 시작되기 전에 본문 상단에 가로로 길쭉하게 배너가 보입니다. 모바일에서는 알아서 적당한 크기로 가로 100%에 세로 250픽셀 정도 되는 게시물이 보이는 것 같습니다.
그런데, 여기서 문제가 발생했습니다. 아직 CSS를 다루는 것에 익숙하지 않아서 PC에서는 광고가 없는 경우에 공백으로 비워두는 것이 어렵지 않은데, 모바일에서는 class에서 responsive를 어떻게 처리해야 하는지 몰라서 공백을 비울 수가 없는 겁니다. 그래서 자료를 이리 뒤적 저리 뒤적거리며 돌아다녔습니다. 당연히 검색 키워드도 "티스토리 모바일 애드센스 본문 상단"으로 검색을 했지요.
하늘이 도왔다고 해야 할까요? 검색하는 게시물 중 절반 이상이 티스토리 애드센스 본문 상단에 배너 두 개 달기와 관련된 게시물이 나타나는 거예요. 처음에는 그냥 무시했습니다. 왜냐고요? 가로로 길쭉하고 깔끔한 배너 하나가 보기에도 시원하고 화면에도 가로로 100% 꽉 들어차는 것이 좋았거든요. 어디서 들은 것은 있어가지고, '광고 배너가 크면 클릭 단가도 높다더라'라는 말을 굳게 믿고 바꿀 생각이 없었습니다.
1. 모바일에서는 수동 배너 사용
하지만, 모바일에서 수동으로 배너를 넣는다면 애드센스 광고가 뜨지 않을 때, 공간이 게시물이 달라붙어서 끌려 올라오지 않고 빈 공간을 비울 수 있게 되겠다는 생각은 들었습니다. 구글 서치 콘솔의 CLS 문제는 어떻게든 해결하고 싶었거든요. 그래서 일단 한 번 수동으로 바꿔서 수정해 봤습니다. 결과는 아래 이미지처럼 바뀌었습니다.
음... 뭔가 세로로 폭이 더 넓어진 것 같고, 가로는 꽉 차지 않고 뭔가 어정쩡한 상황이 되어서 마음에 들지 않네요. 간혹 두 개의 광고가 동일한 것이 뜨면 보기에도 정말 웃긴다는 생각이 들기도 했습니다. 화면에 꽉 차게 할 수는 없을까? 고민하면서 대략 정사각형에 가까운 배너의 가로 픽셀 크기를 남아있는 공간만큼 크게 바꾸어 보았습니다.
2. 구글이 권장하는 크기 사용
여기에서 시간을 한 참 보내다가 다시 폭풍 검색을 통해서 알아낸 사실은 구글이 권장하는 배너의 크기가 있다는 것이었습니다. 이미 가로나 세로로 길쭉한 배너의 권장 크기는 알고는 있었지만 이번처럼 정사각형에 가까운 배너는 처음이라 숫자를 외우고 있지는 않았거든요. 가로 336px. '아! 이래서 기존에 관련 팁을 남긴 블로거들이 한결같이 어정쩡한 크기의 배너를 사용했구나' 깨달음이 왔습니다.
3. 하나의 배너가 아니라 두 개의 배너 사용
뭔가 성격상 각이 딱 맞는 것을 좋아하지만, 이번에는 그냥 넘어가기로 했습니다. 얼마간 사용해 보다가 마음에 들지 않으면 그냥 원래대로 돌려야겠다고 생각하면서 말이죠. 참고로 해당 소스를 여러분에게도 공유합니다.
<!-- 상단 광고 2개 모바일 1개 시작 -->
<div style="text-align: center; margin: 15px 0 !important;">
<style>
.adsbygoogle.post-top-first {display:block;}
.adsbygoogle.post-top-second {display:none}
@media (min-width: 680px) {
.adsbygoogle.post-top-first {display:inline-block;min-width:300px;max-width:300px;width:100%;height:250px;}
.adsbygoogle.post-top-second {display:inline-block;margin-left:20px;min-width:300px;max-width:300px;width:100%;height:250px;}
}
@media (min-width: 768px) {
.adsbygoogle.post-top-first {display:inline-block;min-width:336px;max-width:336px;width:100%;height:280px;}
.adsbygoogle.post-top-second {display:inline-block;min-width:336px;max-width:336px;width:100%;height:280px;}
}
</style>
<!-- 상단 광고 1-->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle post-top-first"
data-ad-client="ca-pub-고유 애드센스 코드"
data-ad-slot="광고코드1"
data-ad-format="rectangle"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 상단 광고 2-->
<ins class="adsbygoogle post-top-second"
data-ad-client="ca-pub-고유 애드센스 코드"
data-ad-slot="광고코드2"
data-ad-format="rectangle"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- 상단 광고 2개 모바일 1개 끝 -->위 소스를 여러분이 사용하는 스킨의 html을 열어 _article_rep_desc_ 부분 바로 윗줄에 넣어주시면 됩니다. 구글 애드센스에 로그인한 후 광고 메뉴 - 광고 단위 기준 - 디스플레이 광고 - 사각형 - 반응형으로 두 개를 만들어서 사용하면 됩니다. 더 자세한 내용은 다음에 포스팅으로 한 번 준비해 보겠습니다. 참고로 수강생분들에게는 제가 강의하기보다는 아예 복사해서 붙여 넣으실 수 있도록 오프라인 수업 중에 도와 드리겠습니다.
자! 이제 중요한 이야기를 하겠습니다. 오늘 제가 이 포스팅을 작성한 이유이기도 합니다. 오늘 애드센스 보고서를 보고 깜짝 놀랐습니다. 평소에도 본문 상단의 배너가 다른 위치에 있는 배너보다 더 클릭률이 높다는 것은 풍문을 통해서 알고 있었습니다. 그런데 이렇게 수동으로 바꿔놓고 보니 본문 상단의 배너 클릭이 다른 위치에 있는 배너보다 확연히 높았다는 사실입니다. 그리고, 기분 탓인지는 모르겠습니다. 앞으로 어느 정도 기간을 두고 살펴봐야겠지만, 평소보다 클릭한 횟수가 약 1.3배 정도는 되는 것 같고 수익은 무려 2배에 가깝습니다. 한 마디로 CPC 단가가 높아진 것입니다.
4. 본문 상단은 반드시 배너 노출
광고 수익이 평소보다 2배가 된 다른 이유가 분명 있을 수도 있지만, 현재로서는 알 수 있는 방법은 없습니다. 우연의 일치일까요? 어찌 되었건 본문 상단 배너를 가로폭이 길쭉한 배너였던 것을 정사각형에 가까운 두 개의 배너로 바꾼 후에 수익이 두 배로 늘었습니다. 이것이 천기누설인가 싶기도 합니다. 하하.
하여간 애드센스 수익을 위해 블로그 활동을 하시는 분들에게는 꼭 권하고 싶은 방법입니다. 하여간 덕분에 구글 서치 콘솔 CLS 문제도 깔끔하게 해결될 것 같습니다. 오늘 블로그를 방문한 여러분들에게 모두 도움이 되었으면 좋겠습니다. 지치지 마세요. 함께하면 길이 됩니다. 날마다 메리 크리스마스 ~
댓글