광고 크기 및 스킨 수정으로 수익 극대화하기
티스토리 본문 폭과 광고 크기 바꿔보기
아마도 많은 티스토리 이용자는 애드센스 이용을 티스토리에서 제공하는 수익 메뉴 설정으로 사용할 것이다. 이전 글에서 얘기했지만 저는 이 수익 메뉴를 사용하지 않는다. 흔히 말하는 수동 광고를 쓰고 있다. 직접 스킨에 광고 코드를 넣고 본문 중간에도 숏코드를 이용해 광고 삽입을 한다.
수동 광고를 쓰는 데는 여러 가지 이유가 있다. 그중 한 가지 이유가 광고 코드를 내 입맛대로 수정하고 싶기 때문이다. 애드센스 광고 코드를 수정해도 되나요?라는 질문을 더러 받는데 애드센스 도움말을 확인해 보면,
<출처 : 애드센스 도움말>
기본적으로 인위적으로 광고 실적을 부풀리려는 수정은 금지하고 있음을 알 수 있다. 다만 수정을 허용하거나 권장하는 경우도 있다.
<출처 : 애드센스 도움말>
반응형 광고의 크기를 미디어 쿼리에 맞춰 변경해주는 정도의 코드 수정은 허용하고 있다. 오늘은 광고 수익을 극대화하기 위해 광고의 수정과 티스토리 블로그 스킨의 세팅을 얘기해 보려고 한다.
반응형 광고 코드 수정 방법
반응형 광고는 디바이스 크기에 따라 알아서 광고 크기가 변하는 광고이다. 그런데 광고 크기를 다시 변경한다는 게 어떤 의미인지 먼저 설명을 하겠다.
광고 실적이 높은 광고 크기
웹페이지 게시자는 반응형 광고 코드를 주어진대로 그래도 써도 문제없다. 제공되는 반응형 광고 코드를 사용하면 PC든 태블릿이든 모바일이든 기기의 크기에 맞게 알아서 광고 크기가 조절될 것이다. 그런데 특정한 광고 크기만을 사용하고 싶은 욕심이 생길 때가 있다. 다음과 같은 글을 보면 더욱 그런 욕심이 생겨나게 된다.
Google Ad manager 가이드라인을 보면 실적이 우수한 광고 크기에 대한 설명이 있다.
출처 : https://support.google.com/admanager/answer/1100453?hl=ko#top
728x90, 336x280, 300x250, 300x50, 160x600 이런 형태의 광고가 더 많은 광고 인벤토리를 제공한다고 나와 있다. 다른 임의의 사이즈에 비해 더 많은 광고들이 노출될 수 있다는 의미로 이럴 경우, 광고주들의 입찰 경쟁률을 올려 입찰 단가를 더 올리게 할 수 있다.
그래서 나는 가능하면 기기의 크기에 정확히 맞는 광고 사이즈보다는 실적이 우수한 광고 크기를 주로 사용하는 편이다.
그것을 미디어 쿼리 코드로 할 수 있다.
미디어 쿼리(Media Query)
미디어 쿼리는 CSS에서 사용되는 구문이다. 뷰포트(viewport) 크기를 설정하여 적용되는 CSS를 다르게 만드는 기능이다. CSS에서 @media ~~ 이렇게 시작하는 코드를 말한다. 앞서 언급했듯이 애드센스는 미디어 쿼리를 이용해 반응형 광고의 크기를 수정하는 것을 권장하고 있다. 애드센스 도움말에서 다음과 같이 사용하라고 나와 있다.
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX11XXX9" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
위 코드의 처음 <script> ~ </script>에 해당되는 내용이 미디어 쿼리이다. 간단히 해석해보면
class가 example_responsive_1인 요소의 크기는 가로 320픽셀, 높이 100픽셀인데,
화면 크기가 최소 500픽셀까지는(500픽셀 이상) class가 example_responsive_1인 요소의 크기를 가로 468픽셀, 세로 60픽셀로 하고,
화면 크기가 최소 800픽셀까지는(800픽셀 이상) class가 example_responsive_1인 요소의 크기를 가로 728픽셀, 세로 90픽셀로 하라
라는 명령이다.
여기서 클래스(class)가 example_responsive_1은
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX11XXX9" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
애드센스 광고 코드에 넣어서 미디어 쿼리에 따라 애드센스 광고 크기를 변동하게 한 것이다.
<script>~</script>에 해당되는 내용을 CSS에 넣어두고 광고 코드를 스킨에 넣을 때 class 명만 써주면 된다. 실제 코드 사용은 아래에 티스토리 CSS 코드 샘플을 넣어 보여줄 예정이다.
이 코드를 사용함으로써 이제 어떤 기기에서든 최적화된 광고 크기(실적이 우수한 광고 크기)가 나올 수 있게 된다. 물론 적당한 광고가 없을 경우 미디어 쿼리가 작용하지 않을 수도 있다.
티스토리 스킨 수정(본문 폭 수정)
티스토리 스킨의 여러 가지 요소 중 본문 폭을 수정하는 것도 여러 가지 측면에서 권장할 만하다. 티스토리에서 제공되는 기본 스킨들의 본문 폭은 스킨마다 다르지만 보통 860px 이상은 되는 듯하다. 내가 자주 사용하는 POSTER 스킨의 경우가 그렇다. 스킨을 적용하면 본문 폭이 860px이 된다. 너무 넓다.
티스토리 본문 폭을 줄이는 이유
넓다고 느끼는 이유는 모바일에서 상관없지만 PC에서 본문 폭이 넓으면 글자 수가 많아진다. 한 문단에 들어가는 글자 수가 많아져서 전체적으로 포스팅 글자 수가 증가하거나 문단이 빈약해 보이거나 이미지가 너무 커 보인다. 사실 수익에 별 도움이 되는 건 아니고 생각한다.
글을 읽는 사람들이 집중을 할 수 있게 하기 위해서는 본문 폭을 줄일 필요가 있다. 극단적으로 본문 폭을 520px 이하로 줄이기도 하지만 개인적으로는 728px 정도가 적당한 듯하다. 728px은 위에서 언급했던 광고 실적이 좋은 광고 크기(728x90) 중 하나이다. 미디어 쿼리로 광고 크기를 728픽셀로 맞추는 것도 좋은데 아예 최대 본문 폭을 728px로 맞추는 것이다.
사람마다 취향이 다르기 때문에 디자인에 대한 부분은 어떤 게 옳다고 말할 수 없다. 다만 내가 티스토리 본문 폭을 줄여보다고 하는 이유는 조금 더 광고 수익 실적을 높일 수 있다고 보고 때문이다.
티스토리 본문 폭 줄이는 CSS 코드
티스토리 본문 폭을 줄여보고 싶다면 CSS 코드를 수정해야 한다. 내가 모든 스킨을 다 사용해본 것은 아니어서 다 설명할 수 없다. 개인적으로 사용하는 POSTER 스킨에 대한 CSS 코드 샘플만 여기서 제공하도록 하겠다.
이 역시 개인의 취향이 다 다르기 때문에 CSS 수정은 최소화만 했다.
적용 내용
POSTER 스킨의 본문 폭 728px로 변경
본문 글자 양쪽 정렬(p 태그 기준)
p 태그 상단 margin 값(12px) 설정
본문 내 링크의 색깔 수정
광고 크기 변경 미디어 쿼리 적용
적용방법
위 파일을 다운로드하면 아래 사진과 같이 POSTER 스킨의 전체 CSS 파일이 담겨 있다. 내가 수정한 내용이 이미 적용되어 있다.
txt 파일 내용먼저 티스토리 스킨 변경에서 POSTER로 변경한다.
스킨 변경다음, POSTER 스킨이 적용된 후 CSS에 들어가서 전체 내용을 위 txt 파일 내용으로 덮어 씌우기 하면 된다.
CSS에 덮어 씌우기광고 크기 변경 적용은 CSS에 아래 코드가 적용되어 있다.
.ad_responsive { width: 300px; height: 250px; }
@media(min-width: 480px) { .ad_responsive { width: 468px; height: 60px; } }
@media(min-width: 728px) { .ad_responsive { width: 728px; height: 90px; } }
반응형 광고 크기 변경을 하려면 스킨 또는 본문에 광고 코드 삽입시
<div style="padding : 20px 0; text-align : center;">
<ins class="adsbygoogle ad_responsive"
style="display: block"
data-ad-client="ca-pub-00000000000000"
data-ad-slot="111111111"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
광고 코드의 빨간색 부분을 수정해야 한다. style="display: block", data-ad-format="auto", data-full-width-responsive="true" 이 부분은 삭제한다.
파란색 코드는 추가한다. <div style="padding : 20px 0; text-align : center;">와 </div> 이 코드는 추가한다.(광고 가운데 정렬 목적의 코드이다. 추가해주는 게 좋다.) class에 ad_responsive도 추가해준다. (ad_responsive 추가시 앞에 한칸 띄는게 중요하다)
만일 코드 수정하는데 어려움이 있다면 미디어 쿼리는 적용하지 않아도 된다. 잘못 수정했다가 광고가 안 나오는 경우보단 그냥 놔두는 게 좋다. 코드 적용에 궁금한 점이 있다면 댓글로 얘기해주기 바란다.
마무리
조금 장황하게 티스토리에서 애드센스 수익을 극대화하는 반응형 광고 크기와 스킨 본문 폭 수정 방법에 대해 알아보았다. 애드센스 수익은 유입과 콘텐츠에 따라 천차만별이지만 같은 조건이라면 오늘 얘기한 방법이 좀 더 달러 수입을 높여줄 수 있을 것이다.
시도해볼 수 있다면 한번 해보는 걸 권장한다. 궁금한 점이나 내 생각과 다른 점이 있다면 언제든 얘기해주기 바란다.
본문내 숏코드까지 적용해보고 싶다면, 티스워드의 숏코드 생성기를 이용해보자.
