티스토리 클릭몬, 스폰서애드 광고 넣기

티스토리로 블로그를 시작하는 이유 중 하나로 구글 애드센스가 있습니다. 네이버 블로그의 경우에는 국내 최대 검색엔진 네이버로 부터 오는 검색 편향성 같은 유리함에도 불구하고 구글 애드센스로 수익을 얻고 싶어서 티스토리로 시작하시는 분들이 있으신 걸로 알고 있습니다. 그런데 요새는 블로그의 레드오션이라 애드고시라 불릴 정도로 통과하기가 만만치 않습니다. 또 애드고시에 통과 하더라도, 불명의 이유로 정지되시는 분도 있어서 그런지 많은 분들이 다른 국내 광고 업체도 이용하기도 합니다.

저도 애드센스에 여러번 지원을 했지만 탈락의 고배를 마신 후에 여러 업체를 알아보았습니다.

클릭몬

(아이라이크)스폰서애드

링크프라이스

텐핑

데이블

등등 여러 업체가 있습니다. 여러 업체가 있지만 많은 분들이 선호하는 이유도 있을 것이고, 사람이 많이 몰리는 만큼 수비교적 철저한 정산과 좀 더 나은 수익성이 보장되는 것 같습니다. 이번 포스팅에서는 업체 별로 비교하는 시간이 아니므로, 티스토리 블로그에 "클릭몬"과 "스폰서애드" 광고를 삽입하는 방법을 다루겠습니다.

1. 가입하기

1-1. 클릭몬

클릭몬의 특징으로는 가입과 동시에 승인이 떨어진다는 것 입니다. 또 아무래도 광고 노출만 되어도 수익이 보장되는 CPM 수익을 제공합니다.

CPC Cost per Click : 광고를 클릭할 때 수익 발생

CPM Cost per Mile(thousand) : 광고를 노출할 때 수익 발생

CPS Cost per Sale : 광고를 통해 매출이 실제로 일어나면 수익 발생

클릭몬 사이트로 접속해서 매체사(블로그)로 가입합니다.

매체사 가입하기를 누른 후에 개인 가입하기로 들어갑니다.

개인 가입하기를 클릭하면, 위와 같은 가입 양식이 나오는데 아이디와 비밀번호같은 필수 항목은 반드시 입력하시고, 핸드폰 번호와 유선전화번호 모두 기입합니다. 사이트명은 본인의 블로그 제목같이 구분될 수 있는 이름을 임의로 입력하시고, 블로그 주소도 기입합니다. 사이트 카테고리는 블로그로 합니다. 그리고 그 다음 MonAD(CPC)를 신청합니다. 즉시 광고를 블로그에서 활용할 수 있도록 스크립트를 제공하고 바로 광고현황이나 수익현황을 알려주는 자료를 제공합니다. 아래의 은행계좌번호는 나중에 금액이 일정액(주로 1만원) 이상이 되는 순간 정산 받을 수 있으므로 반드시 기입하도록 합니다.

가입하신 후 로그인하면, 위와 같은 메뉴가 보이는데 "MonAD 배너관리" 아래의 "Web 배너"항목으로 이동합니다.

"Web 배너" 페이지로 넘어오시면 위와 같이 "타이틀 관리" 버튼을 누릅니다. 이 항목을 하지 않으면 종종 광고가 뜨지 않더라구요. 꼭 타이틀을 하나 생성해줍니다. 그냥 임의의 이름을 적으셔도 되고 "블로그명_광고위치_순번" 이런식으로 규칙성 있게 만드는 것도 괜찮습니다.

타이틀을 생성한 후 해당 타이틀을 선택하게 되면 아래와 같이 PC 광고용 스크립트를 종류별로 보여줍니다. 사이즈를 선택하고 아래의 스크립트를 메모장에 복사합니다.

1-2. 스폰서애드

스폰서 애드는 승인하는데 대략 하루정도 걸리는 것 같습니다. 다른 블로그도 운영하고 있는데, 그림 몇 개 올리고 글이 거의 없어서 그런지 승인 반려(취소)가 났네요. 일종의 수익성이나 적합성 같은 것을 따져서 승인해주는 것 같습니다.

역시 회원가입을 매체사의 개인회원으로 가입합니다.

개인정보 확인 과정 중의 하나로 이메일로 인증번호를 보내주고 유효한 이메일인지 확인하는 과정입니다.

별표로 표시된 필수사항은 빠짐없이 입력해줍니다. 사이트명은 역시 식별가능한 임의의 이름을 적어주시고 사이트 구분은 티스토리 유저시라면 당연히 블로그로 해줍니다. 카테고리는 여러가지 자신의 홈페이지에 어울리는 항목을 여러개 선택해줍니다. 주로 IT, 패션, 미용, 스포츠 등의 항목등을 선택하시면 됩니다. 일 방문자수는 확인할 길이 없으나 자신의 블로그 카운터를 보시면 대략 알 수 있습니다. 사이트 설명 또한 매체사 승인이 빠르게 이루어 질 수 있으려면 깔끔하고 정확하게 입력해주시면 됩니다. 마지막으로 수익금을 정산받기 위해서 계좌번호까지 입력해 줍니다.

가입하고 로그인하시면 역시 위와 같은 페이지가 나오는데, "광고관리" 항목으로 들어오셔서 오른쪽 위의 "광고 생성하기" 버튼을 클릭합니다.

사이트 선택에서는 가입할 때 입력했던 사이트 이름이 나타나는데 꼭 선택해주셔야 합니다. 디바이스는 PC용 광고인지 모바일용 광고인지 따로 선택하게 합니다. 아마도 사이즈 별로 다른 광고 혹은 다른 이미지 크기가 나타나는 것 같습니다. 주로 블로그에서는 요새 정사각형의 박스형 광고보다 가로배너가 낫다고 합니다. 왜냐하면 박스형 배너는 블로그의 미관을 안 좋게 만들고, 따로 심혈을 기울여서 작성하지 않는 한 주변과 어우러지지 않는다고 합니다. 이런 이질감은 블로그 컨텐츠에도 집중하기 어렵게 만들어 가치있는 정보 전달이 이루어 지지 않습니다. 불쾌한 경험을 하게 된다면 광고 클릭에도 이어지지 않겠죠. 그래서 가로 배너를 많이 추천합니다.

성인광고는 심각할 정도로 야하거나 불건전한 내용은 포함하지 않는다고는 하지만, 그래도 화면 정중앙보다 오른쪽이나 아래같은 외곽에 배치하는 것이 블로그의 신뢰도를 잃지 않는 배치라고 생각합니다.

2. 스크립트

위와 같이 스크립트를 얻었는데, 또 이런 광고사에서 제공하는 방법 중에는, PC와 모바일로 서로 다른 스크립트를 제공하지만, 그 스크립트를 하나로 합칠 수도 있습니다. 둘 다 같은 스크립트를 제공하는데 방법은 아래와 같습니다.

<script type="text/javascript">

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone|Opera Mini|IEMobile|Mobile/i.test(navigator.userAgent)) {

(function(){document.writeln('모바일스크립트소스');})();

} else {

(function(){document.writeln('PC스크립트소스');})();

}

</script>

빨간색 글씨란에 발급 받으신 스크립트 소스 삽입 후, 소스 가장 마지막 부분인 </script> 이 부분 슬래시 앞에 '+'를 추가 삽입 하셔야 합니다. 예시) </script>   →  <'+'/script>

저 같은 경우에는 모바일용 스크립트가 다음과 같습니다.

<script type="text/javascript">

(function(cl,i,c,k,m,o,n){m=cl.location.protocol+c;o=cl.referrer;m+='&mon_rf='+encodeURIComponent(o);

n='<'+i+' type="text/javascript" src="'+m+'"></'+i+'>';cl.writeln(n);

})(document,'script','//mtab.clickmon.co.kr/pop/wp_m_320_100_js.php?PopAd=CM_M_1003067%7C%5E%7CCM_A_1041029%7C%5E%7CAdver_M_1003115');

</script>

그리고 저의 PC용 광고 스크립트는 다음과 같습니다.

<script type="text/javascript">

(function(cl,i,c,k,m,o,n){m=cl.location.protocol+c;o=cl.referrer;m+='&mon_rf='+encodeURIComponent(o);

n='<'+i+' type="text/javascript" src="'+m+'"></'+i+'>';cl.writeln(n);

})(document,'script','//tab2.clickmon.co.kr/pop/wp_ad_728_js.php?PopAd=CM_M_1003067%7C%5E%7CCM_A_1041029%7C%5E%7CAdver_M_1003115&rt_ad_id_code=RTA_105617');

</script>

이제 두 스크립트를 이용해서 반응형 스크립트로 재조합 해봅니다.

<script type="text/javascript" >

if (/android|webos|iphone|ipad|ipod|blackberry|windows phone/i.test(navigator.userAgent))

{(function(){document.writeln('

<script type="text/javascript">

(function(cl,i,c,k,m,o,n){m=cl.location.protocol+c;o=cl.referrer;m+='&mon_rf='+encodeURIComponent(o);

n='<'+i+' type="text/javascript" src="'+m+'"></'+i+'>';cl.writeln(n);

})(document,'script','//mtab.clickmon.co.kr/pop/wp_m_320_100_js.php?PopAd=CM_M_1003067%7C%5E%7CCM_A_1041029%7C%5E%7CAdver_M_1003115');

<'+'/script>

 ');})();}

else{(function(){document.writeln(' 

<script type="text/javascript">

(function(cl,i,c,k,m,o,n){m=cl.location.protocol+c;o=cl.referrer;m+='&mon_rf='+encodeURIComponent(o);

n='<'+i+' type="text/javascript" src="'+m+'"></'+i+'>';cl.writeln(n);

})(document,'script','//tab2.clickmon.co.kr/pop/wp_ad_728_js.php?PopAd=CM_M_1003067%7C%5E%7CCM_A_1041029%7C%5E%7CAdver_M_1003115&rt_ad_id_code=RTA_105617');

<'+'/script>

 ');})();}

</script>

이렇게 됩니다. 저기 PC용 광고와 모바일용 광고 끝에 '+' 이 작은 따옴표까지 이걸 꼭 마지막에 붙여주시는 것 잊지 마세요.

그런데 제가 볼 땐 지금 티스토리에서는 모바일 광고를 구글 애드센스와 다음 애드핏만 제공하는 것 같습니다. 따로 모바일 스킨을 제공하지 않으면서, 모바일에서는 모든 PC 광고가 보이지 않습니다. 굳이 플러그인에서 광고를 넣으려면 티스토리에서 제공하는 구글, 다음, 텐핑 등 일부 사이트만 나와 있습니다. 개선해야 되는 부분인지 일부러 제공하지 않는 것인지 아직 잘 모르겠습니다. 반응형 스크립트만 이런지 아니면 티스토리 정책상 모바일 광고를 안 좋아하는 건지는 알아봐야 겠습니다.

3. 광고 삽입하기

3-1. 직접 본문에 삽입

이제 받은 스크립트를 티스토리 블로그 본문에 삽입해야 되는데요. 구글 애드센스 같은 경우에는 자체 플러그인이 있어서, 적용하기가 비교적 쉬운데 클릭몬이나 스폰서애드 같은 다른 광고회사의 스크립트의 경우에는 직접 삽입해야 합니다.

관리페이지에서 왼쪽 "꾸미기" 아래의 "스킨변경" 탭을 누르시면 오른쪽에 "스킨편집" 항목이 나타납니다. 클릭해주세요.

스킨 편집 페이지에서 우측 상단에 보시면 "HTML 편집" 버튼이 있습니다. 기존의 HTML/CSS 편집 버튼과 동일한데 이렇게 안에 숨어있네요. 단, 여기서 수정하게 되는 HTML 변경내용은 스킨을 바꾸시게 되면 다시 바꿔주셔야 하니, 원하는 스킨을 정하지 못하셨다면 먼저 스킨을 정하시고 시작하시는 게 좋습니다.

가운데 변수가 포스팅 내용 항목입니다. 저 앞 뒤로 광고를 붙여주시면 내용 위아래로 광고가 나타납니다. CTRL + F 를 누르신 후 "article_rep_desc" 로 검색하시면 됩니다. 만약에 항목이 두 개가 나오면 아래 항목이 중요한 항목입니다. 근처에 TAG, 댓글, 댓글펼치기가 보여야 합니다.

이제 저는 클릭몬 웹 광고를 위 아래로 삽입했습니다. 가로로 긴 광고를 삽입했는데, 그냥 삽입하니까 왼쪽으로 치우쳐져서 나타나서 저는 <div align=center> 코드를 덧붙여서 가운데로 정렬까지 해줬습니다. 나중에 수정하다가 어디다 광고를 붙였는지 알기 쉽게 하기 위해서 <!-- 와 --> 를 이용한 주석까지 달아줬습니다. 이렇게 되면 PC용 광고 삽입 끝. 저장하고 티스토리 블로그에 가서 확인해 봅니다.

3-2. 배너로 삽입

티스토리에서 외부 광고를 싣기 위해서는 플러그인을 이용해야 한다. 기본적으로 구글 애드센스와 다음 애드핏은 전용 플러그인이 따로 있으니, 서비스를 이용하면 된다. 하지만 다른 광고들은 불편하지만 다른 방법을 사용하면 됩니다. 관리 페이지에서 "플러그인" 항목으로 들어가서 "배너 출력"을 사용합니다. 사이드 바에 배너를 출력할 수 있는데, 보통 사이드 바에는 방문자 수, 태그, 최근 포스팅, 최근 댓글 등이 있는데 그 사이에 광고를 띄울 수 있습니다.

사이드바를 클릭하면 위와 같이 뜨는데 "HTML 배너출력"이 새로 추가된 것을 보실 수 있습니다. 저기서 + 를 누르시면 "HTML 배너출력"이 하나 오른쪽에 추가됩니다. 거기서 편집 버튼을 누릅니다.

위와같이 새 창이 하나뜨고, 간단히 지을 수 있는 이름을 넣는 칸과 스크립트를 넣을 수 있는 칸이 나타납니다. 확인->변경사항 저장 잊지마세요

빨간색으로 된 부분을 드래그 하면 새롭게 추가된 광고를 밑으로 내릴 수 있습니다. 저는 다른 사이드바를 쓰지 않고 필요하다고 생각하는 방문자 카운터와, 최근 포스팅, 태그 클라우드만 켜놓고 나머지를 광고로 채웠습니다. 광고의 크기에 따라 배치를 미리 염두에 두시고 위치를 아래위로 조정하시면 됩니다. 큰 광고는 마지막에 두시는 것이 좋으며 스크립트에

스크립트 앞뒤로<div align=center><br>스크립트</div> 해 주시면 좋습니다.

마지막으로 플러그인과 사이드바를 이용한 광고 삽입이었습니다. 위는 광고가 최종적으로 뜬 사진입니다. 아무래도 구조를 생각해서 배치를 하면 좀 더 많은 광고를 밀착해서 나타낼 수 있을 것 같습니다. 하지만 일단 제일 하고 싶은 것은 구글 애드센스 승인입니다.