정보/블로그 운영팁

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

아미넴 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 -->

     

    결과 확인하기

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

     

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

     

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

    반응형

    댓글

    💲 추천 글