블로그를 운영하면서 광고 수익을 올리는 것은 이제 거의 필수가 되어버렸다. 필자는 구글 애드센스(Adsense)와 다음카카오(AdFit) 광고를 사용하고 있다. 반응형 Poster 스킨을 사용 중인데, AdFit 모바일웹과 PC버전은 지원이 되지만 반응형에서는 지원되지 않는다. 모바일웹 접속을 해제하고 모바일로 접속하면 PC버전 사이즈의 광고로 인해 가로 스크롤이 생기게 된다. 이번 포스팅에서는 반응형 Poster 스킨에서 어떻게 하면 AdFit 광고를 효율적으로 배치하는지에 대해 적어보도록 하겠다.
반응형 스킨에 AdFit 추가하기
기본적으로 티스토리에서는 모바일에서 접속하면 모바일웹 버전으로 전환해주는 기능을 제공한다.
하지만 모바일웹은 모바일 디스플레이에 맞게 별도로 만들어진 HTML 코드로 이루어져 있기 때문에, 반응형 스킨의 장점인 미디어 쿼리를 통해 디스플레이 크기에 따라 자유롭게 제어할 수가 없다. 반응형 스킨을 사용하고 있는데 반응형 제어를 할 수 없다면 그냥 일반 스킨을 사용하는 것과 큰 차이가 없다. 하나의 PC버전 HTML 코드로 사이즈에 따라 다양하게 조절 가능할 수 있어야 비로소 반응형 스킨을 제대로 활용할 수 있는 것이다.
반응형 스킨 활성화
첫 번째로 반응형 스킨을 사용할 수 있도록 모바일웹 자동 연결을 해제한다.
관리자 페이지 설정의 꾸미기 > 모바일 탭을 클릭한 뒤 아래 그림과 같이 "사용하지 않습니다." 변경 후 저장을 클릭한다.
이제부터는 Daum AdFit (모바일) 플러그인을 사용할 수 없다는 말이다. 다시 말하면 Daum AdFit (PC) 플러그인에서 제공하는 본문 상단, 본문 하단, 사이드바 3가지만 사용해서 PC와 모바일을 구현해야 한다. 심지어 반응형 Poster 스킨은 사이드바도 존재하지 않는다. 아래의 서비스 운영정책을 살펴보자.
Daum AdFit 규정을 보면 한 페이지 당 게시할 수 있는 광고는 3개를 초과할 수 없다. 그러면 PC버전 단위 광고 2개밖에 게시하지 못하는 것일까? 하는 의문이 든다. 하지만 반응형 스킨의 장점인 미디어 쿼리를 사용해서 스크립트에 조건을 걸어주면 가로 픽셀에 따라 서로 다른 광고를 부여할 수 있다. 그러니까 PC버전 단위 광고 2개, 모바일 단위 광고 2개를 아래와 같이 상단과 하단에 분기하여 처리하게 되면 최대 4개의 단위 광고를 노출할 수 있게 된다.
스크립트를 자세하게 들여다보면 조건문에서 현재 가로 사이즈를 체크하고, document.write() 안에 HTML 코드를 적어서 날려주고 있다. 하지만 필자는 플러그인을 사용하지 않고 스킨 편집을 통해 원하는 위치에 직접 광고를 삽입할 것이다.
참고로 플러그인을 사용할 예정이라면 굳이 <div> </div> 코드로 HTML 구문을 감쌀 필요는 없다. 스크립트에서 제어할 때 해당 코드의 id, class 정보를 찾아서 style 변경이 필요할 경우에는 위와 같이 한번 감싸도 좋다.
(data-ad-unit = "", data-ad-width = "", data-ad-height = "" 항목은 각자 발행한 광고 코드를 활용하길 바란다.)
다음카카오(AdFit) 광고 최적화
구글 애드센스(Adsense)와는 다르게 다음카카오(AdFit) 광고수익은 노출만으로도 적립금이 쌓이게 된다. (클릭하면 더 좋다.) 클릭수에 비례하는 애드센스와 노출빈도에 따른 수익구조를 가지는 애드핏을 적절히 활용하면 효과를 극대화할 수 있다. 일단 정책에 위반하지 않는 선에서 반응형 Layout 구조를 아래와 같이 가져가려고 한다.
점선으로 표기된 상단, 하단은 본문 안에 삽입될 내용이고, 실선으로 표기된 광고는 프레임 바깥쪽이다. 다시 말하면 페이지 당 3개의 광고가 노출되지만, 사이즈에 따라 광고의 위치가 변하고 프레임 바깥쪽에 있는 광고는 블로그에 머무는 동안 계속 노출되고 있다는 것이다. 다음카카오(AdFit) 노출량을 극대화하고 본문의 가독성을 떨어뜨리지 않기 위해서는 다음과 같은 작업을 한다.
필자는 위의 반응형 Layout 구현을 위한 광고단위 8개를 발급하였다. 공통 설정의 빈도에 최소 30초를 부여하면 30초마다 노출하는 광고가 변경된다. 프레임 바깥쪽에서 30초마다 계속 변경되는 것이다.
관리자 페이지에서 다음카카오(AdFit) PC버전과 모바일웹 플러그인은 모두 해제하도록 하고, 꾸미기 > 스킨 편집 > html 편집으로 들어간다.
1) 사이드바 추가
먼저 AdFit(PC) 좌측과 우측에 160x600 사이드바 광고를 2개 준비한다.
편집창에서 Ctrl + F 검색으로 id="content" 항목을 찾는다. 위치는 </header> 헤더가 끝나고 컨텐츠가 시작되는 지점 바로 아래에다가 div id="adfit_left", div id="adfit_right" 라고 명명하고 HTML 코드를 삽입하였다. 광고 코드는 꼭 본인이 발급한 코드를 사용하도록 하고, 2개의 div 구문을 제어할 스크립트를 바로 아래에 이어서 적도록 하겠다.
일반적으로 <script>~</script> 구문은 HTML 구문이 브라우저 위에 모두 실행되고 그 다음 실행된다.
사이드바를 2개 추가하였지만, 스크립트로 제어하지 않으면 Layout 화면에서 깨질것이다. 이를 조정하기 위해 window_size 값을 받아와서 반응형 Poster 스킨에 맞게 적절한 left, right 여백을 지정하여 스타일에 적용시켜준다.
아래의 스크립트 내용은 간단하다. 현재 Window Size 값을 받아와서 변수에 저장하고, 왼쪽과 오른쪽 여백으로 활용할 값을 미리 지정해둔다. 그리고 화면 크기가 1235px 이상이면 애드핏 좌측과 우측의 div 활성화를 시켜준 뒤 여백을 통해 스킨의 양 옆으로 배치시킨다. 사이드바는 모바일 화면에서는 사용하기 어렵기 때문에 1235px 이하에서는 비활성화 처리를 해준다.
아래의 window.onresize 함수가 존재하는데, 이것은 브라우저의 크기가 1px 이라도 변경되면 자동으로 실행되는 함수이다. 단순 조건문으로 스크립트 처리만 하였다면 최초 1회에만 실행되고 끝났을 것이다. 이처럼 마우스로 드래그하여 브라우저의 사이즈를 줄였을 때에도 실시간으로 화면에서 반응해야 하기 때문에 똑같은 코드를 onresize 함수 안에다가도 구현해준다. (회색으로 주석 처리한 코드는 반응형 Layout 구성을 완료하면 풀어줄 예정이다.)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<!-- AdFit(PC) 좌측/우측 160x600 -->
<div id="adfit_left" style="width: 160px; height: 600px; margin-top: 20px; margin-left: 10px; float: right; position: absolute; display:none">
<ins class="kakao_ad_area" style="display:none;"
data-ad-unit = "★"
data-ad-width = "160"
data-ad-height = "600"></ins>
<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
</div>
<div id="adfit_right" style="width: 160px; height: 600px; margin-top: 20px; margin-right: 10px; float: right; position: absolute; display:none">
<ins class="kakao_ad_area" style="display:none;"
data-ad-unit = "★"
data-ad-width = "160"
data-ad-height = "600"></ins>
<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
</div>
<script>
var window_size=window.getWindowCleintWidth();
var margin_right = ((window_size-850)/2-8.5-170)/2+"px";
var margin_left = (window_size-850)/2+870+"px"
if(window_size>1235){
document.getElementById("adfit_right").style.display="block";
document.getElementById("adfit_right").style.margin="50px 0 0 "+margin_left;
document.getElementById("adfit_left").style.display="block";
document.getElementById("adfit_left").style.margin="50px 0 0 "+margin_right;
}else{
document.getElementById("adfit_right").style.display="none";
document.getElementById("adfit_left").style.display="none";
}
window.onresize = function() {
window_size=window.getWindowCleintWidth();
margin_right = ((window_size-850)/2-8.5-170)/2+"px";
margin_left = (window_size-850)/2+870+"px"
if(window_size>1235){
/* Adfit Top(PC, Mobile) 비활성화 */
//if(document.getElementById("adfit_big")){
//document.getElementById("adfit_big").style.display="none";
//}
//if(document.getElementById("adfit_small")){
//document.getElementById("adfit_small").style.display="none";
//}
//if(document.getElementById("adfit_big2")){
//document.getElementById("adfit_big2").style.display="none";
//}
//if(document.getElementById("adfit_small2")){
//document.getElementById("adfit_small2").style.display="none";
//}
document.getElementById("adfit_right").style.display="block";
document.getElementById("adfit_right").style.margin="50px 0 0 "+margin_left;
document.getElementById("adfit_left").style.display="block";
document.getElementById("adfit_left").style.margin="50px 0 0 "+margin_right;
}else{
/* Adfit Top(PC, Mobile) 활성화 */
//if(window_size>768){
// if(document.getElementById("adfit_big")){
// document.getElementById("adfit_big").style.display="block";
// }
// if(document.getElementById("adfit_small")){
// document.getElementById("adfit_small").style.display="none";
// }
// if(document.getElementById("adfit_big2")){
// document.getElementById("adfit_big2").style.display="block";
// }
// if(document.getElementById("adfit_small2")){
// document.getElementById("adfit_small2").style.display="none";
// }
//}
//if(window_size<=767){
// if(document.getElementById("adfit_big")){
// document.getElementById("adfit_big").style.display="none";
// }
// if(document.getElementById("adfit_small")){
// document.getElementById("adfit_small").style.display="block";
// }
// if(document.getElementById("adfit_big2")){
// document.getElementById("adfit_big2").style.display="none";
// }
// if(document.getElementById("adfit_small2")){
// document.getElementById("adfit_small2").style.display="block";
// }
//}
document.getElementById("adfit_right").style.display="none";
document.getElementById("adfit_left").style.display="none";
}
}
</script>
|
cs |
2) 상단, 하단 추가
그리고 AdFit(PC) 728x90 AdFit(모바일) 320x100 상단과 AdFit(PC) 728x90 AdFit(모바일) 320x50 하단 광고를 4개 준비한다. 1235px 이하에서는 다시 0px~767px 모바일과 768px~1234px 태블릿으로 나눌 예정이다. 이때 약간의 예외처리가 들어가는데 조심해야 한다.
편집창에서 Ctrl + F 검색으로 <s_tag_label> 항목을 찾는다. 위치는 "article_rep_desc" 본문 내용 치환자의 위와 아래 영역에다가 추가할 것이다. 본문 내용 치환자 태그는 총 3개가 존재하는데, 우리는 태그가 표시되는 상단에 광고단위 하단(adfit_big2, adfit_small2)을 추가하고 본문이 시작되는 상단에 광고단위 상단(adfit_big, adfit_small)을 추가하고자 한다. 광고 코드는 꼭 본인이 발급한 코드를 사용하도록 하고, 4개의 div 구문을 제어할 스크립트를 바로 아래에 이어서 적도록 하겠다.
아래의 스크립트는 "article_rep_desc" [본문 내용 치환자]의 위와 아래에 각각 따로 추가해줘야 한다.
필자는 div id="adfit_big", div id="adfit_small" 본문 상단을 명명하고, div id="adfit_big2", div id="adfit_small2" 본문 하단을 명명하여 HTML 코드를 삽입하였다.
스크립트 구조는 단순하나 본문에 최초로 1회 Load 됨과 동시에 화면 사이즈를 체크해 비활성화 처리를 해주어야 한다.
첫 번째로 추가했던 사이드바 좌측/우측 코드를 기억하는가? 해당 코드의 id는 adfit_left, adfit_right 였다. 이 조건은 1235px 이상에서 나타나는 사이드바이므로, 스크립트 내에서 사이드바 왼쪽이든 오른쪽이든 활성화(block) 되어있는지 체크하고 활성화 되었다면 본문 상단과 하단은 나타나지 않아야 정책에 위반되지 않고 본문에서 깔끔하게 사라진다. 만약 최초의 페이지가 1234px 이하(사이드바가 없다)라면, 앞에서 사용한 미디어 쿼리로 모바일인지 태블릿인지 767px 기준으로 체크하여 AdFit(PC) 광고를 비활성화 하거나, AdFit(모바일) 광고를 비활성화 해주면 된다.
아까 사용했던 window.onresize 함수에서 회색으로 주석(//)처리 했던 코드를 해제해주면 브라우저 사이즈를 늘였다 줄였다 했을 때에도, 자유롭게 광고의 크기와 위치가 변할 것이다.
|
1
2
3
4
5
|
<script>
/* Adfit Top(PC, Mobile) 최초1회 Load */
document.write( '<div id="adfit_big" class="adfit_big" style="margin: 0px 0px; text-align: center;"><ins class="kakao_ad_area" style="display:none;" data-ad-unit = "DAN-t89ld18k32gm" data-ad-width = "728" data-ad-height = "90"></ins> <script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async><\/script></div>' );
document.write( '<div id="adfit_small" class="adfit_small" style="margin: 0px 0px; text-align: center;"><ins class="kakao_ad_area" style="display:none;" data-ad-unit = "DAN-t4a099luv0he" data-ad-width = "320" data-ad-height = "100"></ins> <script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async><\/script></div>' );
</script>
|
cs |
[본문 내용 치환자]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script>
/* Adfit Bottom(PC, Mobile) 최초1회 Load */
document.write( '<div id="adfit_big2" class="adfit_big2" style="margin: 0px 0px; text-align: center;"><ins class="kakao_ad_area" style="display:none;" data-ad-unit = "DAN-sksc2g02vrza" data-ad-width = "728" data-ad-height = "90"></ins> <script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async><\/script></div>' );
document.write( '<div id="adfit_small2" class="adfit_small2" style="margin: 0px 0px; text-align: center;"><ins class="kakao_ad_area" style="display:none;" data-ad-unit = "DAN-t81aw6n81qns" data-ad-width = "320" data-ad-height = "50"></ins> <script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async><\/script></div>' );
/* Adfit Top, Bottom(PC, Mobile) 비활성화 */
if (document.getElementById("adfit_left").style.display == "block" ||
document.getElementById("adfit_right").style.display == "block"){
document.getElementById("adfit_big").style.display="none";
document.getElementById("adfit_small").style.display="none";
document.getElementById("adfit_big2").style.display="none";
document.getElementById("adfit_small2").style.display="none";
} else if ( window.matchMedia( '( min-width: 768px )' ).matches == true ){
document.getElementById("adfit_small").style.display="none";
document.getElementById("adfit_small2").style.display="none";
} else if ( window.matchMedia( '( max-width: 767px )' ).matches == true ){
document.getElementById("adfit_big").style.display="none";
document.getElementById("adfit_big2").style.display="none";
}
</script>
|
cs |
3) 바닥 추가
마지막으로 AdFit(PC) 728x90 바닥과 AdFit(모바일) 320x50 바닥 광고를 2개 준비한다.
편집창에서 Ctrl + F 검색으로 id="footer" 항목을 찾는다. 위치는 <footer> 영역의 바로 위에다가 div class="adfit" align="center" 가운데 정렬으로 명명하고 HTML 코드를 삽입하였다. 광고 코드는 꼭 본인이 발급한 코드를 사용하도록 하고, 1개의 div 구문을 제어할 스크립트를 바로 아래에 이어서 적도록 하겠다.
바닥 광고는 크게 어려움이 없다. 767px 기준으로 프레임 바깥쪽에 실시간으로 떠있기 때문에 PC버전이든 모바일이든 확인해보니 크게 이상하지 않아서 onresize 함수로 특별히 제어하지 않았다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!-- footer Adfit (728*90 || 320*50) -->
<div class="adfit" align="center" style="margin: 0px 0px; text-align: center;">
<script>
if ( window.matchMedia( '( min-width: 768px )' ).matches == true ) {
document.write( '<ins class="kakao_ad_area" style="display:none;" data-ad-unit = "★" data-ad-width = "728" data-ad-height = "90"></ins> <script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async><\/script>');
}
if ( window.matchMedia( '( max-width: 767px )' ).matches == true ) {
document.write( '<ins class="kakao_ad_area" style="display:none;" data-ad-unit = "★" data-ad-width = "320" data-ad-height = "50"></ins> <script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async><\/script>');
}
</script>
</div>
|
cs |
필자는 footer Adfit (728*90 || 320*50) 코드 바로 밑에 728*90 애드센스를 더 추가했는데도 크게 이상하지 않았다.
마무리
스킨 편집이 자유로운 티스토리라고 하더라도 약간의 HTML/CSS/Javascript 지식이 필요합니다.
최대한 쉽게 따라올 수 있도록 작성하였는데, 혹시라도 이해하기 어려운 부분이 있다면 댓글을 남겨주세요.
도움이 될 수 있는 답변을 달아드리겠습니다.
도움이 되셨다면, 좋아요 및 구독 버튼을 눌러주세요. 초보 블로거의 큰 힘이 됩니다.
'취미생활 > 일상, 라이프' 카테고리의 다른 글
| [블로그] 티스토리에 쿠팡 파트너스 설정하기 (0) | 2021.02.23 |
|---|---|
| [찜질방] 광교 중흥 어뮤즈 스파 후기 (0) | 2019.12.31 |
| 국민참여재판 배심원 참석 후기 (0) | 2019.12.10 |
| 자동차 시동 안걸림 문제 (0) | 2019.12.08 |
| 지문으로 아이의 타고난 기질과 다중 지능을 알아보자 (0) | 2019.12.08 |
