기존 텍스트큐브 1.8x 버전때도 그랬지만 이번에 업그레이드한 1.9 베타6 버전에서도 아이폰이나 안드로이드폰을 위한 모바일 페이지는 jquery 모바일을 이용해 노출되고 있다.

jquery mobile에서는 기본적으로 페이지 이동시 ajax를 이용하여 미려한 트렌지션 효과를 보여주고 있는데 모바일 홈페이지에서는 이 때문에 애드센스가 제대로 동작이 되질 않는다.
구체적으로 보면 처음 검색엔진을 통해 접근시에는 광고가 노출되나 다른 글을 보기 위해 링크를 클릭하면 광고가 노출되지 않는 현상이 발생하는데 원인은 바로 위에서 언급한 ajax 페이지 로딩 기능 때문이다.

애드센스 사용자라면 익히 알고 있겠지만 하나의 페이지에 노출 될 수 있는 애드센스 광고수에는 제한이 있다.
하지만 jquery mobile 처럼 다른 페이지로 이동시 ajax로 컨텐츠가 로딩되어 버리면 애드센스에서는 로딩 될 때마다 광고 노출이 계속 누적되어 버리는 것으로 판단하는 것이다.:
그러니 당연히 광고노출이 되질 않지..

해결 방법은 간단하다.

<script>
$(document).bind("mobileinit", function(){
  $.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

위에 보이는 것처럼 jquery mobile 소스가 포함된 항목 바로 전에 위에 굵게 표시한 소스를 삽입해주면 된다.
이후에는 ajax로 페이지 컨텐츠 로딩이 아닌 일반 방식으로 페이지 이동이 가능해진다.(관련내용 참고 – http://jquerymobile.com/demos/1.0rc3/docs/api/globalconfig.html)

꼭 나 처럼 텍스트큐브를 이용하지 않는 사용자라도
jquery mobile과 애드센스를 함께 모바일 홈페이지에 적용시킬 분이라면 참고하시길.

————————-

헌데…
내 경우 위에서 언급한 내용은 큰 문제가 아니었다.

아주 웃긴 경우인데..ㅋ
이번에 업글한 텍스트큐브 모바일 스킨에 애드센스를 달고 아이폰을 포함한 IOS 환경에서 보면 모든게 잘 나온다.
그런데 이걸 안드로이드에서 보면 애드센스를 포함한 페이지 내용이 전혀 보이질 않는다(완전한 백지 페이지).

혹시 user agent 문제인가 하여 크롬 개발자 환경에서 ios, andorid를 번갈아 테스트하니 역시 android user agent 일 경우에 같은 문제가 발생했다.
참고로 android user agent 셋팅후 개발자 모드에서 랜더링된 소스를 보면 아래와 같았다.

jquery mobile이 적용된 텍스트큐브 모바일 페이지를 android user agent로 셋팅해 놓으면 크롬 개발자 모드에서는 일케 보인다. 이러니 브라우저에선 허옇게 아무것도 안나오지ㅋ
jquery mobile이 적용된 텍스트큐브 모바일 페이지를 android user agent로 셋팅해 놓으면 크롬 개발자 모드에서는 일케 보인다. 이러니 브라우저에선 허옇게 아무것도 안나오지ㅋ

google_protectAndRun이라…
그간 애드센스를 운영하면서 한번도 실시간 html소스를 뜯어보지는 않았지만 살펴보니 저 함수는 정상적인 애드센스 광고 노출시에도 호출되더라.

뭐 그건 그렇고 쨌든 이런 저런 삽질 끝에 원인을 파악해봤는데
결론적으론 이 역시 jquery mobile과의 충돌이었다.
동일 소스의 같은 페이지에서 jquery.mobile.js를 제거하니 정상적으로 애드센스가 노출됐다.

혹시 몰라 기존 텍스트큐브 1.9 베타6에서 사용된 jquery mobile 1.0.1 버전에서 1.3으로 갈아타봤으나 증상은 마찬가지.
일단은 문제 발생의 원인은 파악했으니 해결방법만 찾으면 된다.

또 다시 삽질은 시작된다.
(하….. 이거 말고도 이번 업글에서 삽질 죽게 했는데…ㅠㅠ)

이 글의 관련글

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *