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

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

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

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

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

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

목차

이미지 업로드하기

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

loading.gif 0.03MB

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

head 태그가 끝나고 body 태그가 시작되는 바로 다음 위치에 코드를 작성해 보겠습니다.

코드 작성하기

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

#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; } $(window).on('load', function() { setTimeout(function(){ $("#waiting").fadeOut(); }, 500); });

결과 확인하기

다음과 같이 화면이 뜰 때까지 기다렸다가 사라지는 것을 확인할 수 있습니다.

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

728x90

from http://sangminem.tistory.com/624 by ccl(A) rewrite - 2021-10-10 12:01:27