IT

애드센스 반응형 광고 데스크탑 티스토리 상단 우측, 모바일 상단 중앙 배치 스크립트 간결화

요즘 블로그 최적화에 신경을 쓰면서 그동안 사용하던 복잡한 코드는 가급적 줄이고 반응형에 최적화 되어 빠른 반응속도를 낼 수 있도록 하나 둘 블로그 스킨을 꾸며나가고 있다. 그 중에 일환으로 애드센스를 이것저것 나름의 실험 끝에 본문 상하단 배치를 최종적으로 확정을 했다. 이것 저것 테스트 하느라 데스크탑과 모바일을 각각 다른 애드센스 코드를 사용해 오던걸 최종확정을 지으면서 데스크탑 모바일 양분화 되어 있던걸 통합했다. 통합을 해 놓으니 코드가 간결해지고 깔끔해서 마음에 쏙 든다.

광고 클릭의 대부분의 비중을 차지하는 상단에 집중을 했다. 하단은 특별히 코드 편집 없이 그냥 반응형을 배치했다. 하단부는 특별한게 없기에 따로 장황하게 이야기 할 건 없을 것 같고 상단부분은 설명을 하면서 블로그한경닷컴과 같게 광고배치를 하고자 하는 블로그를 위해 적용한 코드를 공개하려 한다.

애드센스 반응형 데스크탑 티스토리 상단 우측, 모바일 상단 중앙 배치

데스크탑 상단 애드센스 배치

애드센스 본문 우측 상단 배치

데스크탑 화면에서 시선이 많이 가고 집중이 되는 상단 배치 상단 우측에 하나만 적용했다. 기존에 상단에 두개를 배치해 수년동안 유지해 왔으나 실제로 클릭률이 떨어진다는 것을 감지했다. 실제로 일주일 정도를 테스트 해 본 결과 상단에 두개를 배치했을 때와 본문의 글과 함께 상단 우측에 배치했을 때의 Active View가 첨예하게 차이가 났다. Active View의 차이는 스킨마다 블로그마다 다르게 나타날 수 있기에 개별적으로 확인할 필요가 있다. Active View가 낮으니 당연히 클릭률이 낮을 수 밖에 없고 동시에 수익이 저조할 수 밖에 없다.

 

상단 2개 일 때, 본문 우측 하나 일 때 Active View

그래서 본문 상단에 우측에 하나만 배치하기로 결정했다. 장기적으로 보아야 할 부분이겠지만 구글이 수집한 그 간의 통계에 의하면 본문 우측 상단에 하나를 배치하는걸 권장하고 있다. 이와 같은 권장 사항도 선택에 도움이 됐다.

모바일 상단 애드센스 배치

모바일 본문 상단

모바일은 전통적으로 선호하고 있는 상단 정중앙에 배치하는게 가장 좋다는 판단을 했다. 상당히 오래기간 상단 우측에 200×200 정사가각형 광고를 배치해 왔었다. 나름 준수한 클릭률과 수익을 가져왔다. 그러다가 스킨을 변경하면서 코드편집을 하지 않고 정중앙에 반응형을 배치했을 때, 더 수익이 늘어나는 것을 확인 후, 바로 정중앙으로 고정을 했다. 이 과정을 며칠 동안 바꿔보고 통계를 내보고 한 후 결정한 내용이다. 모바일에서 본문 상단 중앙에 배치했을 때, Active View를 보면 53~57%를 오갔다. 충분히 평균 이상의 Active View를 유지하고 있어 잠재 수익성이 매우 높다고 평가해 한동안 해당 배치를 유지할 생각이다.

데스크탑, 모바일 반응형 애드센스 스크립트

애드센스 코드 단순화를 위해 구글 애드센스 고객센터에서 추천하는 방법으로 반응형 스크립트를 작성했다. 이전에 데스크탑 따로 모바일 따로 코드를 운영하던걸 생각하면 정말 간결해졌다.

애드센스 고객센터 – 반응형 광고 코드 수정 방법

애드센스 고객센터 반응형 광고 코드 예시

화면 폭에 따른 반응형 광고 단위 크기 지정 예시, 

– 화면 폭 500픽셀 이하: 320×100 광고 단위
– 화면 폭 500~799픽셀: 468×60 광고 단위
– 화면 폭 800픽셀 이상: 728×90 광고 단위

<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"></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>

위와 같은 스크립트를 애드센스 고객센터에서 알려준다. 위 코드를 참고로 데스크탑에서는 우측 상단에, 모바일에서는 상단 정중앙에 들어가는 스크립트를 금방 만들 수 있었다.

 

실제 적용한 스크립트

<style>
.ads-top {width:100%;height:250px;}
@media(min-width: 767px) {.ads-top {float:right;padding-left:10px;width:336px;height:280px}}
</style>
<!-- 애드센스 본문상단 반응형 -->
<ins class="adsbygoogle ads-top"
	 style="display:inline-block"
     data-ad-client="ca-pub-계정고유번호"
     data-ad-slot="광고슬롯고유번호"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

북클럽 스킨의 경우 고객센터의 예시와 같이 디바이스 크기를 세분화 할 필요까지 없다. 스킨 기준으로 768px를 넘지 않으면 모바일기기, 768px를 넘으면 태블릿이나 데스크탑이다. 뭐 아이패드 레티나 사이즈도 있긴 한데 그건 무시했다.

 

모바일 광고의 경우 높이를 250px로 고정했다. 그 이유는 광고가 너무 커지면 첫 화면에 로드할 때, 본문의 내용이 하나도 안나오게 될 수 도 있기 때문이다. 데스크탑의 경우 float를 이용해 우측에 고정했다. 본문과 구분을 두기 위해 패딩으로 좌측에 공간을 두었다.

만약 좌측에 광고를 배치하려면

float:left

padding-right:10px

만 변경하면 우측 정렬이 된다.

 


위 스크립트를에서 계정 고유번호와 광고슬롯고유번호를 각각 입력한 후, 티스토리 플러그인 애드센스 반응형에서 상단 단 입력창에 붙여넣기를 하면 바로 적용된다. 참고로 애드센스 광고 단위는 반응형이다. 

Related Posts

티스토리 탈출 다양한 CMS(Content Management System) 종류 모음

카카오가 정말 실책을 해도 큰 실책을 했다.실책으로 봐야하는지도 의문이다. 황금알을 낳는 거위의 배를 갈랐으니 말이다. 자사 블로그 플랫폼인 다음 블로그를 없애고 티스토리로 통합하더니 수익형 블로그를 운영하는 티스토리에 강제로…

Intel CPU 보증기간 워런티 조회 방법

인텔 CPU는 고장이 나지 않는 걸로 정평이 나 있다. 오죽하면 국내에서 운영하던 통합 AS 센터가 고칠 CPU가 없다고 문을 닫았을까. 그럼에도 혹여나 있을 고장에 대비해 미리 보증기간을 알아…

ASUS 메인보드 바이오스 업데이트 방법 EZ 플래시 업데이트 (Prime H310M-A R2.0)

OS든, 시스템이든, 소프트웨어든 최신 업데이트가 있으면 즉각즉각 하는 편이다. 보안상의 문제점이 해결되고 뭔가 알지 못했던 문제점들이 고쳐진다는 믿음 때문이다. 메인보드 바이오스 같은 경우 업데이트가 자주 있지는 않다. 일년에…

컴퓨터 조립 메인보드 F_PANEL 프런트패널 케이블 연결 방법

컴퓨터 조립이 쉬운 듯하면서 은근히 까다롭다. 특히 선정리가 그렇다. 선정리에 익숙하지 않은 탓에 이 고생을 왜 하고 있지란 생각이 들 때도 있다. 그럼에도 직접 해냈다는 성취감으로 직접 조립을…

윈도우 설치시 “새 파티션을 만들거나 기존 파티션을 찾을 수 없습니다. 자세한 내용은 설치 로그 파일을 참조하세요.” 오류 해결 방법

최근 시스템을 업그레이드 하면서 SSD를 포맷을 하여 싹 밀어버리고 윈도우를 재설치하는 이른바 윈도우 클린 설치를 했다. 포맷하는 과정이 잘못됐는지 윈도우 설치 도중에 윈도우 설치 위치를 지정하는 단계에서 “새…

카카오톡 오픈채팅방 대화내용 저장 백업 방법

카카오톡은 기본으로 제공해야 할 기능인 백업 기능을 톡서랍이라는 이름으로 돈을 받고 즉 유료과금 형태로 서비스를 제공하고 있다. 그마저도 백업 기능이 완벽하지 않다. 카카오톡 오픈채팅방의 대화 내용은 톡서랍을 통해서…

This Post Has 4 Comments

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다