상단 광고의 active view 수치를 높이는 로딩화면과 그 효과

    iTIPs/광고 2016. 10. 25. 08:00

    블로그의 대부분은 본문상단에 애드센스 광고를 표시하고있습니다.


    제 블로그만 그런지는 모르겠지만 본문 상단 광고의 active view수치는 30%대에 머물고 있습니다.


    active view수치는 광고가 사용자 화면에 1초이상 표시되는 비율을 뜻합니다.


    본문 상단 광고는 로딩되기도 전에 사용자들이 스크롤을 내리기 때문에 상단광고의 active view 수치가 낮을 수 밖에 없는 것 같습니다.


    active-view 수치가 수익률과 직접적인 관계를 갖는 것은 아니지만, active view수치가 높다는 말은 방문자들이 광고를 볼 확률이 높다는 말이므로 높은 수치를 가진 광고가 더 많은 클릭을 유도할 수 있다는 점을 유추할 수 있습니다.


    본문 상단광고의 액티브 뷰 수치가 낮은 이유가 광고보다 먼저 로딩된 본문을 읽기 위해 스크롤을 내리기 때문이므로 본문 상단광고의 액티브 뷰 수치를 높이려면 1)광고가 더 빨리 로딩되게 하거나 2)본문을 늦게 로딩하는 2가지 방법이 있을 수 있습니다.


    광고 로딩 속도 자체는 더이상 빠르게하기 쉽지 않으므로, 본문을 늦게 로딩하는 방법을 알아보겠습니다.


    로딩화면 만들기

    실제로 본문을 늦게 로딩하면 구글 검색순위에서 사이트 속도가 느린것으로 평가될 수 있으므로


    본문 상단 광고가 로딩될 때 까지 본문을 가릴 수 있는 로딩화면을 만들어보겠습니다.


    페이지 전체를 가리는 로딩화면이

    첫번째 광고가 로딩되면 없어지거나, 특정 시간 후에는 광고가 로딩되지 않았더라도 없어지는 방식입니다. 



    1. 다음을 <body>바로 아랫줄에 붙여넣습니다.

    <div id="loadOverwrapper"><div class="loader"></div></div>


    2. 다음을 </body>바로 윗줄에 붙여넣습니다.

    <script>

    function rmLoadOverwapper(){

    document.querySelector("#loadOverwrapper").style.display="none";

    }

    try {

    document.querySelector("iframe[onload*='google']").onload=function(){

    rmLoadOverwapper();

    }

    setTimeout(function(){

    rmLoadOverwapper();

    }, 2000);

    }

    catch(err) {

    setTimeout(function(){

    rmLoadOverwapper();

    }, 2000);

    }

    </script>

    빨간색 2000은 만일 에러가 발생하더라도 2000ms(2초)후에는 로딩화면이 사라지게하는 부분입니다.

    숫자를 높일수록 광고가 로딩될 때까지 기다리게되고, 낮추면 광고가 로딩되지 않더라도 로딩화면을 더 빨리 없앱니다.


    3.css 맨밑에 다음을 추가합니다.

     #loadOverwrapper {

        position: fixed;

        top: 0;

        bottom: 0;

        left: 0;

        right: 0;

        background: #fff;

        z-index: 9999;

        text-align: center;

        padding: 20%;

    }


    4. 스킨이 Material T mark5, mark5.2가 아닌경우 CSS에 다음도 추가합니다.


    .

    로딩화면 효과

    아직 적용한지 일주일도 되지 않았지만, 어느정도 실적이 확인되어 올립니다.



    위 그래프는 본문 상단광고의 active view(보라색)와 RPM(초록색)입니다.

    로딩화면 적용시점은 10월 18일입니다.


    보라색 그래프를 확인해보면 확실히 액티브뷰가 로딩화면 적용 이후부터 소폭상승한점을 확인할 수 있습니다.(약 34% -> 41%)

    로딩화면을 제거하는 시간에 따라 Active view수치는 훨씬 높이 올릴 수도있겠지만, 긴 로딩화면을 기다리는것은 오히려 사용자경험을 해쳐 이탈률을 높일 수도 있습니다.(아직까지 눈에 띄는 이탈률 증가는 보이지 않았습니다.)


    RPM수치의 경우 워낙 날마다 편차가 커서 아직은 수치변동을 확인할 수가 없습니다. 


    로딩화면이 단지 기계적으로 Active view수치만 올린것인지, 실제 수익률 상승에 도움이 될지는 아직 미지수입니다. 눈에띌만한 결과가 있다면 다시 포스팅해보도록 하겠습니다.

    저작자표시비영리동일조건
    'iTIPs/광고' 관련 글 more
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon Byulvely
      2016.12.09 10:28 신고

      잘참고하고 갑니다. 블로그에 서공적으로 적용했어요

    • BlogIcon dyeworks
      2017.03.01 01:07 신고

      도움이 되었습니다 감사합니다.
      블로그에 따라 다르지만 주인장님은 과거와 비교해서 기본세팅인 2초 정도로 액티브뷰 수치를 체감하셨나요?

      • BlogIcon 뭐하라
        2017.03.01 01:10 신고

        액티브뷰는 확실히 오릅니다 rpm은 워낙 블로그 침체기라 비교를 못하고있습니다

    • BlogIcon _EIA
      2017.05.24 14:03 신고

      상단광고는 따로 빼서 동기식으로 빨리 로딩시키는 데도 광고 액티브뷰가 낮아서 로딩이미지를 적용해 보려고 하던차에 많은 도움 됐습니다. 정말 감사합니다.

      그런데 로딩이미지 소스는 어디서 가져오는 게 아닌가 보네요. 신기하네요.

      모바일용 브라우져에서는 이미지가 보여지는 않지만 일단 지연 되는 것으로 만족 합니다.
      특별히 이미지를 더 가져오는 게 아닌 거 같아서 더 좋네요.

      • BlogIcon 뭐하라
        2017.05.24 18:23 신고

        도움이 됐다니 다행이네요
        로딩이미지는 CSS로만 구성됩니다!
        잘 안보이신다면 4번항목을 적용하셨는지 확인해보세요~

    • BlogIcon 일상매니저
      2017.06.21 23:57 신고

      적용이 잘되네요! 잘 사용하겠습니다. 감사합니다~^^

    • BlogIcon Joshua88
      2017.06.25 19:32 신고

      감사합니다. 성공적으로 적용 되었고, 저도 액티브뷰가 올랐으면 좋겠어요!

    • BlogIcon OCer
      2018.01.31 09:04 신고

      무료 배포해주신 스킨 감사하게 잘쓰고 있습니다. 질문이 있는데요. 가장 최신 버전인 + 버전에 적용하려면 어떻게 해야 하는지요?

    • BlogIcon OCer
      2018.01.31 09:12 신고

      빠른 답변 감사합니다. 그런데 아무리 찾아봐도 <body> 가 보이질 않아서요 어디다 넣어야 할지요?!

      • BlogIcon 뭐하라
        2018.01.31 09:13 신고

        <body ~~
        뒤에뭐가붙어있어도 아랫줄에넣으시면됩니다!


    • 2018.01.31 09:16

      비밀댓글입니다

    • BlogIcon 열심히 공부하자
      2018.02.16 15:34 신고

      PC에서는 적용이 잘 되는데, 모바일에서는 이미지도 보이지 않고, 지연도 안되는것 같은데 모바일에서도 지연하려면 어떻게 해야 하나요?

    • 갓블레스유
      2018.03.20 20:22

      http://hackerc.tistory.com/1119 여기 블로그처럼 애드센스 위에다가 로딩 화면 만들려면 어떡해야 할까요?

      • BlogIcon 뭐하라
        2018.03.20 21:55 신고

        시간이되면 강좌로 써보겠습니다. 요즘 너무 바빠서요 ㅠㅠ

    • BlogIcon ￡KOREASM￠
      2020.09.22 14:07 신고

      저는 희안한게 이거 적용하고 나면 상단에 뜨던 앵커 광고가 하단에 가는 이유가 무었때문일까요

티스토리툴바