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

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

 

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

 

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

 

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

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

 

목차

 

이미지 업로드하기

먼저 사용할 이미지를 업로드 해야 합니다. 샘플 이미지를 하나 제공해 드리겠습니다. 파일명은 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 -->

 

결과 확인하기

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

 

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

 

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