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

사이트 주소에 WWW 포함 여부, 현대 웹사이트 주소의 트렌드와 선택 기준

사이트 주소에 WWW 포함 여부, 현대 웹사이트 주소의 트렌드와 선택 기준

웹사이트 도메인 주소에 “WWW”를 포함시키거나 포함시키지 않는 결정은 사용자 경험과 웹사이트 운영 측면에서 고려될 수 있는 전략이다. 최근의 트렌드는 기술적 중요성보다는 사용자의 편의성과 브랜드의 식별성을 중시하는 방향으로 나아가고…

SKT 다이렉트 플랜 요금제 결합할인 유의사항

SKT 다이렉트 플랜 요금제 결합할인 유의사항

통신비 부담을 줄이고 싶은데, 데이터 사용량은 줄이고 싶다. “SKT 통신비 다이어트, T 다이렉트 플랜”이 바로 그 해답을 제시한다. 조금만 잘 찾아보면 데이터 사용은 그대로 유지하면서 통신비는 줄일 수…

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

선택약정할인제도 선택약정할인제도는 단말 지원금을 받지 않는 고객에게 요금 할인 혜택을 제공하는 제도이다. 이 제도는 지급 단말, 중고 단말, 신규 단말 이용 고객 모두에게 적용되며, 요금 상품 선택과 12/24개월의…

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

취업, 이직 준비나 정부 지원금 신청 할 때, 문서 작업시 대부분 이름과 서명란이 있다. 매번 느끼지만 디지털과 아날로그의 경계에 있는 듯한 느낌이다. 서명란에 싸인이나 도장을 삽입하는 과정은 간단해…

GitHub 콘솔 git add, git commit, git push 명령어 정리

GitHub 콘솔(명령줄 인터페이스)에서 커밋하는 방법은 여러 단계로 구성된다. 여기서는 Git을 사용하여 변경사항을 커밋하고 GitHub 저장소에 푸시하는 기본적인 절차를 안내한다. 이 과정을 시작하기 전에, 로컬 컴퓨터에 Git이 설치되어 있어야…

알리익스프레스 Windows Hello 내돈내산 웹카메라 구매 후기 및 설치 드라이버

알리익스프레스 Windows Hello 카메라 내돈내산 후기 및 드라이버

필자가 가지고 있는 랩탑 레노버 씽크패드 P14S에서는 Windows Hello 기능이 지문과 얼굴인식으로 되어 전원을 켜거나 브라우저에서 로그인할 때, PIN번호를 누르지 않아도 지문 또는 얼굴인식으로 간단히 해결 할 수…

This Post Has 4 Comments

답글 남기기

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