웹페이지를 지연하여 구글 애드센스 광고 동기화
"구글 애드센스 광고 단위를 생성하게 되면 광고 로딩과 관련해 동기/비동기 방식에 대한 옵션이 있다."라고 말하려 하였으나 본 포스트의 참고자료로 쓸겸 관련 옵션을 캡처하러 애드센스를 방문 하였더니.. 헐~ 그 세 이 옵션이 사라 졌다.
원래 이 옵션이 주는 의미는 웹페이지 로딩과 속도와 맞추어(동기화 방식) 표시 할지 아니면 웹페이지는 웹페이지대로 광고는 광고대로 서버 응답에 따라 각각 따로 표시할지에 대한 옵션이다. 필자의 기억으로는 이렇게 동기/비동기 구현 방식을 구분해서 그에 따른 광고 코드가 달랐던 기억이 있다. 따로 이에 대한 설정을 하지 않으면 비동기방식이 기본 디폴트값 이다. 근데 이 옵션은 있으나 마나 대부분의 웹사이트에서 웹페이지 로딩 속도가 애드센스 광고에 비해 빠르게 로딩 된다. 사실 구글 애드센스 광고의 반응 속도가 느린 것은 생각해 보라 얼마나 전세계 수도 없이 많은 웹페이지들이 동시 다발 적으로 얼마나 많은 광고 요청을 하고 있을지 이와 관련해 발생된 트래픽은 아무리 고성능의 네트워크와 하드웨어를 해도 감당하기 어려울 것이다. 어떻게 보면 구글이니까 가능한 일 일지도 모르겠다. 이런 이유로 대부분의 웹사이트에서 애드센스를 운영하는 웹마스터들은 비동기 방식을 선호했다. 애드센스 측도 이 부분을 충분히 의식했는지 언근슬쩍 이 옵션을 없애 버린 게 아닐까 짐작된다.
나의 웹사이트를 방문하는 이용자는 컨텐츠(정보)에만 관심 있지 페이지 내 게재되고 있는 광고 따위는 관심이 없다. 경우에 따라서는 이 광고를 브라우저에 아예 표시하지 않게 하는 확장프로그램을 쓰기도 한다.
웹페이지 상단에 자리하는 광고의 경우 '조회 가능 Active view'가 다른 광고들에 비해 그 수치가 형편 없이 낮은 경우가 있다. 그 이유는 상단 광고가 표시되기 전에 웹페이지(컨텐츠)가 먼저 로딩 되기 때문이다. 특히 필자의 블로그와 같은 웹페이지 레이아웃을 가진 사이트에서는 상단 광고가 가지는 비중이 다른 광고들에 비해 상대적으로 크다. 전반적으로 웹페이지 다른 요소들 보다 차지하는 면적도 크고 일단 젤 눈에 잘 뛰는 핵심 위치이기 때문에 웹마스터 입장에서는 이 광고를 어떻게든 웹페이지를 이용하는 사용자 눈에 들게 하여 최종 클릭을 발생 시켜주길 은근히 기대한다.
조회 가능 Active View란? 측정 가능한 모든 노출수 중 조회 가능한 노출수의 비율입니다. 예를 들어 사이트의 광고에 100회의 측정 가능한 노출이 발생했다고 가정해 보겠습니다. 이는 Active View 태그가 조회율을 측정할 수 있는 노출이 100회 발생했다는 의미입니다. 만약 이 100회의 노출수 중 단지 10회만 조회 가능한 것으로 측정되었다면 사이트의 Active View 조회율은 10%가 됩니다. = 구글애드센스
필자는 웹페이지 로딩 속도 보다 현저히 느린 이 애드센스 로딩 속도를 개선하기 위해 여러 방법을 모색해 봤지만 웹페이지 내 스크립트(Script) 요소들을 최적화 외 뾰족한 방법이 없었다. 애드센스 서버의 반응 속도가 느린 이상 웹페이지가 최적화가 아무리 잘 이루어진다 할 지라도 필자가 원하는 결과를 얻을 수 없다. 여기서 말하는 결과란 최소한 컨테츠와 광고가 동시에 노출 되거나 광고가 좀 더 일직 떠줘 웹페이지를 이용하는 이용자가 광고도 표시되기 전에 컨텐츠로 이동하기 위해 스크롤(Scroll)을 휙~ 내려버리는 경우를 방지하는 것이다. 이것은 필자 뿐 아니라 애드센스를 운영하는 모든 웹마스터들의 바람이기도 하다.
애드센스 서버의 반응속도가 느려서 발생하는 위와 같은 문제를 해결하는 방법은 나의 웹사이트의 웹페이지(컨텐츠)를 애드센스 반응속도 만큼 지연 시켜 컨텐츠와 동시에 광고가 게시하는 것이다. 이는 각각의 서버반응 속도가 달라 발생하는 낮은 조회 가능 Active view수치를 개선 할 수 있다는 것이고 이것은 곧 애드센스 수익 상승 효과를 기대 할 수 있다. 그러나 빠른 반응속도를 자랑하는 나의 웹페이지를 임의로 지연 시킨다는 건 상식적으로 용납 할 수도 없을 뿐더러 이를 이용하는 이용자에게도 지연에 따른 대기 시간이 그만큼 늘어나 불편을 준다. 그리고 대형 포탈사에서 제공하는 블로그류의 경우 보안상의 이유로 서버단(server side)에 접근할 수 있는 권한이 없음으로 서버단(server side)에서 지연과 관련해 취할 수 있는 방법은 사실상 없다.
그렇다면 단 하나 내가 접근 가능한 웹페이지에 관련 스크립트를 구현해 웹페이지 로딩을 인위적으로 조절 함으로써 광고와 컨텐츠를 어느 정도 동기화 할 수 있다. 여기에는 웹페이지가 로딩될 시간 동안 표시해 줄 적절한 로딩 애니메이션(Animation) 사용이 중요하다. 이 로딩 애니메이션 사용은 웹페이지(광고포함)가 로딩 될 때까지 이를 이용하는 이용자에게 시선을 끌어 곧 페이지가 곧 로딩 된다는 기대감을 주며 지연 대기에 따른 시간도 짧게 느껴지게 만드는 효과가 있다.
사실 필자는 처음 이 스크립트를 도입에 있어 과연 효과가 있을지 반심반의 했다. 하지만 실제 테스트한 체감상의 느낌은 기대 이상이다. 이와 관련해 데이터가 쌓이면 정리해서 올릴 계획이다. 웹페이지 로딩중에 웹페이지 로딩중 이라고 알리는 스크립트는와 웹페이지가 완전히 로딩이 완료됨을 표시해 주는 스크립트 사용은 과거에도 많이 이용되었다. 필자는 그동안 웹페이지를 대기하는 사용자 입장에서 그만큼 늘어나는 대기 시간의 불편을 그리 탐탐치 않게 생각했고 이런 이유로 관련 스크립트 도입을 고려해 본 적은 없다. 나의 웹페이지가 로딩완료 될때까지 사용자를 대기를 시킬 이유는 하나도 없다. 다만 컨텐츠의 집중도를 높일 이유로 이러한 스크립트를 사용해 왔다면 전혀 이해 안 가는 부분은 않으나 이 스크립트의 성격은 다르다. 바로 애드센스 광고와 웹페이지로딩을 어느 정도 동기화 하는데 목적이 있고 조회 가능 Active view수치를 향상 시켜 줄 것을 기대한다.
웹페이지의 <body>가 시작하는 부분에 다음과 같이 추가 한다.
<body>
<!--로딩 대기-->
<div id="loadOverwrapper">
<div class="loader"></div>
</div></boby>앞에 다음과 같은 자바스크립트(JAVA Script)를 삽입한다.
<!--로딩 대기-->
<script>
function rmLoadOverwapper(){
document.querySelector("#loadOverwrapper").style.display="none";
}
try {
document.querySelector("iframe[onload*='google']").onload=function(){
rmLoadOverwapper();
}
setTimeout(function(){
rmLoadOverwapper();
}, 2500);
}
catch(err) {
setTimeout(function(){
rmLoadOverwapper();
}, 2500);
}
</script>
</body>
이 스크립트를 핵심은 google이라는 문제열을 가지는 iframe태그를 체크한다. 즉, 구글 에드센스광고 코드는 google이라는 문구를 포함한 iframe형태로 웹페이지에 로딩 됨으로 첫 번째 애드센스 광고가 로딩을 시도하면 인위적으로 막아 놓은 웹페이지를 표시한다.
그리고 CSS로 구현되는 간단한 애니매이션을 CSS페이지에 추가 한다.
/* 로딩 사이클 애니매이션 */
.loader {
margin: 5% auto;
height: 100px;
width: 100px;
border: 6px solid #fff;
border-right-color: #c30;
border-top-color: #c30;
border-radius: 100%;
-webkit-animation: spin 800ms infinite linear;
animation: spin 800ms infinite linear;
}
@-webkit-keyframes "spin" {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes "spin" {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}저장 후 페이지를 테스트 한다. 표시된 숫자는 얼마나 지연 시킬지 최대(maximum) 대기 시간이다. 2500(ms)는 2.5초를 뜻한다. 저는 2.5초를 쓰고 있으나 자신의 웹페이지에 대충 첫 번째 애드센스 광고가 언제쯤 표시되는지 평균값을 넣어 주면 비소로 광고와 페이지가 동시에 표시되거나(광고가 2.5초보다 빠르게 표시될 경우 그 만큼의 로딩 시간은 짧아짐) 최대 2.5초 대기 후 광고가 로드되지 않더라도 바로 웹페이지를 표시한다. 즉, 애드센스 광고 게시가 2.5초 보다 느리다면 대기를 멈추고 강제로 페이지를 표시한다. 웹페이지를 이용하는 이용자의 대기 시간을 최소화해 이에 따른 불편을 줄이고 애드센스 광고 게시율도 동시에 높이려면 자신의 웹사이트 환경에 맞는 적절한 시간 조절이 매우 중요하다.
참고로 위에 사용된 애니매이션은 CSS로 구현 했지만 페이지에서 바로 gif등의 애니메이션 이미지 파일을 직접 읽어와 이를 대체할 수도 있다.
스크립트 구현에 참고한 페이지
https://nubiz.tistory.com/670 - 상단 광고의 active view 수치를 높이는 로딩화면과 그 효과
참고한 애니메이션 효과
http://story.pxd.co.kr/922 - [인터랙션] CSS를 이용한 로딩 애니메이션, 이상 입니다.
댓글