정보/블로그 운영팁

구글 애드센스 광고 효과 향상을 위한 로딩 화면 만들기

아미넴 2021. 10. 10.
반응형

티스토리 본문 상단 광고는 거의 국룰처럼 되었습니다. 실제로 제 블로그에서도 여기서 가장 광고 수익이 많이 나고 있습니다. 따라서 방문자 분들에게는 조금 죄송하지만 광고가 뜰 시간을 충분히 벌어주기 위해 로딩 화면을 통해 약간의 대기 시간을 얻어 보겠습니다.

 

사실 제 블로그에는 적용하지 않을 생각이었는데 요청하신 분이 계셔서 만들어 보았다가 만든 김에 적용을 하였습니다. 모든 스킨에 공통적으로 적용할 수 있다고 생각하지만 혹시 안 되시는 분 계시면 댓글 남겨 주세요.

 

광고 효율이 좋은 본문 상단 광고 2개와 비슷한 형태로 본문 하단에도 넣으면 어떨하는 생각에 작성한 포스팅도 있으니 참고 바랍니다.

 

티스토리 본문 하단에 구글 애드센스 광고 넣기

 

티스토리 본문 하단에 구글 애드센스 광고 넣기

블로그를 운영하다보니 가장 효율이 좋은 광고 위치는 상단의 사각 광고 2개였습니다. 그런데 일부 방문자들이 상단 광고를 완전히 불러 오기도 전에 스크롤을 내려서 광고를 보지 못하는 경우

sangminem.tistory.com

 

목차

     

    이미지 업로드하기

    먼저 사용할 이미지를 업로드 해야 합니다. 샘플 이미지를 하나 제공해 드리겠습니다. 파일명은 loading.gif가 기본인데 원하는 이름으로 바꾸려면 코드도 손을 봐야하므로 그대로 사용하시는 걸 권장합니다.

    스킨 편집 > html 편집 > 파일업로드 에서 업로드 하시면 됩니다.

    loading.gif
    0.03MB

     

    로딩 화면 코드 위치 확인하기

    스킨 편집 > html 편집 > html 탭으로 이동하여 head 태그가 끝나고 body 태그가 시작되는 바로 다음 위치에 코드를 작성해 보겠습니다. <body로 검색하시면 쉽게 찾을 수 있습니다.

     

    코드 작성하기

    적용하기 쉽게 html, 자바스크립트, css 코드를 한 군데 모두 작성해 보겠습니다. 화면이 모두 로드되기 전에 띄워줘야 하므로 맨 위쪽에 넣었고 페이지가 전부 로드되었다는 것이 감지되면 로딩 화면을 감추기 위한 코드도 자바스크립트로 작성을 하였습니다. 광고를 위해 500ms의 여유 시간을 더 두었는데 답답하다 싶으면 이 부분은 더 작은 값으로 바꾸셔도 됩니다.

    <!-- 블로그 로딩 코드 start -->
    <style type="text/css">
    #waiting {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: fixed;
        display: flex;
        background: white;
        z-index: 999;
        opacity: 0.9;
    }
    #waiting > img {
        display: flex;
        width: fit-content;
        height: fit-content;
        margin: auto;
    }
    </style>
    <div id="waiting">
    	<img src="./images/loading.gif">
    </div>
    <script type="text/javascript">
        $(window).on('load', function() {
            setTimeout(function(){
                $("#waiting").fadeOut();
            }, 500);
        });
    </script>
    <!-- 블로그 로딩 코드 end -->

     

    결과 확인하기

    화면 중간에 로딩 스피너 이미지가 보였다가 사라지게 됩니다.

     

    움짤로도 확인해 보겠습니다. 다음과 같이 화면이 뜰 때까지 기다렸다가 사라지는 것을 알 수 있습니다.

     

    유용하게 사용하시기 바랍니다.

    반응형
    그리드형(광고전용)

    댓글8

    • 제이온 (J.ON) 2021.10.10 11:23 신고

      잘 적용했습니다 감사합니다 ㅎㅎ
      답글

    • 애드센스 승인 요청을 해두었는데 요즘 애드센스 유저가 포화 상태라서 그런지 전에는 탈락이든 승낙이든 하루 이틀만에 결과 메일을 보내주더니 이제는 무조건 한달 걸린다네요...;;;
      승인 신청이 통과하게 되면 총알처럼 적용시켜보겠습니다. -0-
      답글

    • 블라블라조 2022.02.15 17:55 신고

      와!!너무 좋은 글들이 많아요!!방금 로딩하는거 제 블로그에 적용 해봤어요
      너무 감사합니다!!
      안 그래도 ㅜㅜ애드센스에 로딩 되는 부분에 오류가 많다고해서 어쩌나 했는데..!!
      이 아이콘이 유용하게 작용할 것 같아요!!

      답글

    • 현재 에미냄 최신버전 적용한 상태입니다.
      https://openlove.tistory.com/2

      로딩화면이 잘 나오고 있네요. 감사합니다.
      한가지 질문할께요~
      현재는 로딩화면이 나올때 배경색이 약간 흐릿하게 되면서 마우스스크롤이나 다른작업을 할수가 없게 해놓았는데요

      로딩화면 나올때도 배경이 흐리지 않고 마우스스크롤이나 다른작업이 가능하게 바꿀려면 어떻게 해야할까요?

      기다릴 사람은 기다리고 마음급한사람은 로딩화면 나올지라도 다른 작업을 할수있도록 하고 싶습니다.


      답글

      • 아미넴 2022.03.13 18:30 신고

        적용되어 있는 css 중 다음 부분을 제거하시구요.
        #wrapper {
        overflow: hidden !important;
        height: calc(100vh + 1px) !important;
        }

        #wrapper.loaded {
        overflow: unset !important;
        height: unset !important;
        }

        자바스크립트 코드 중 $('#wrapper').off 구문과 $('#wrapper').on 구문을 제거하시면 될 듯 싶습니다.

    • 감사해요~ 해결했습니다 ^^
      답글

    💲 추천 글