티스토리 블로그 본문 광고 및 광고 크기 변경 방법 소개!

블로그는 자기 자신의 기록과 생각을 남기는 소중한 공간입니다. 글이 누적될 수록 블로그에 대한 애착도 커지고, 다른 사람들과 소통하는 소중한 통로가 되기도 합니다. 

 이런 블로그 공간에 자신의 시간과 노력을 쏟아지는 만큼 이에 대한 보상으로 블로그로 돈을 벌 수 있다면 좋을 것 입니다. 그 방법은 체험담, 마케팅 지원 등의 방법이 있지만, 쉽게 사용하는 방법은 바로 광고 배치 입니다.

■ 개요: 주요 광고사 소개(CPC [Cost Per Click] 위주) 

 1. 애드센스 (Adsense) - 해외

  - 구글에서 운영하는 광고사입니다. 구글의 최대 수익이 바로 홍보입니다. ( 전체 구글 수익의 70%) 광고 크기도 다양하고, 웹페이지 내용과 연관된 광고를 보여주는 동기형 광고도 설정할 수 있습니다. 다양한 광고 유형을 제공하기 때문에 사용자도 자산의 의도에 따라서 다양하게 적용할 수 있고, 많은 수익도 올릴 수 있습니다. 

▲ Adsense 관리 화면 

 2. 스폰서애드 (Sponsor AD)

  - 국내 홍보사로 다양한 크기의 광고가 제공되고 광고 관리 및 실적관리를 쉽게 할 수 있습니다. 클릭단 당가도 애드센스에 비해 높습니다. 

▲ 스폰서앤드 관리 화면 

.

 3. 클릭몬 (ClickMon)

 - 제휴마케팅 전문가로 홍보하는 클릭몬은 스폰서애드와 비슷하지만, 대형 쇼핑몰 링크를 통한 수익창출 기능도 제공됩니다. 홍보사가 한국이나 보니 한국인에게 맞는 광고가 많이 제공되어 수익에 큰 도움이 됩니다. 

▲ 클릭몬 관리 화면 

.

■ 목차 : 블로그에 광고 배치 및 스크립트 소개 

 0. 현재 블로그내 광고 배치 현황 소개

 1. 본문 위에 사격형 광고 2개 배치(PC) 및 작은 사격형 광고 배치(모바일) 방법.

 2. 본문에 광고 삽입 하고 쉽게 편집하는 방법(2개 이상 배치: PC 및 모바일 동시적용)

   - PC 와 모바일에따라 광고 크기가 변하는 반응형 광고 및 본문 내용과 일치하는 동기형 광고 설정 방법.

 3. 본문 하단에 카테고리 글목록과 광고 동시에 

.

0. 현재 블로그내 광고 배치 현황 소개

 - 저는 광고를 약간 공격적으로 삽입해 보고 있습니다. PC에서는 총 5개를 넣었는데 애드센스는 웹페이지당 최대 3개의 광고를 삽입할 수 있습니다. 그래서 3개를 삽입하고 스폰스애드와 클릭몬을 하나씩 넣어 보았습니다. 광고는 상단에 정사각형 (336 x 280) 2개를 나란히 배열하는 것이 제일 효과가 제일 좋다는 것이 알려져 있고, 광고 효과가 제일 높은 본문내에 광고 삽입을 2개 (300x250 , 728x90) 하였습니다. 

 여러가지 분석 결과 본문에 광고를 삽입하는 것이 제일 광고 효과가 높고, 상단에는 본문 오른쪽에 광고 한개를 넣는 것보다 위에 두개 넣는 것이 좋다고 생각합니다. 왼쪽 본문내용, 오른쪽에 광고를 넣는 것은 효과는 좋지만, 독자가 글을 읽기가 불편하기 때문입니다. 

▲ PC 광고 배치 현황

 - 모바일에서는 총 4개의 광고를 넣었습니다. 구글에서는 애드센스 광고가 모바일 첫페이지 전체에 보여지고 본문 내용이 보이지 않을 경우 정책 위반으로 경고를 줍니다. 경고가 누적될 경우, 더 이상 광고를 사용할 수 없게되는 최악의 일이 일어 납니다. 애드센스가 광고 단가는 국내홍보사보다 낮지만, 본문 동기형 광고를 제공해 클릭률이 높아 수익에 많은 도움이 됩니다. 

 상단에는 애드센스 작은 정사각형(200x200) 를 넣고, 중간에는 PC와 동일하게 중간 사각형 (300x250) 2개를 넣었습니다. 나중에 소개하겠지만, 본문에 넣은 첫번째광고는 PC와 모바일 모두 300x250 크기가 노출되고, 두번째 광고는 PC에서는 728x90, 모바일에서는 300x250 로 노출 되도록 작성하였습니다. 세부 스크립튼 하단 내용을 참고하십시요. 

▲ 모바일 광고 배치 현황

1. 본문 위에 사격형 광고 2개 배치(PC) 및 작은 사격형 광고 배치(모바일) 방법.

 - 상단 광고를 넣는 위치는 HTML 파일 내부에 " _article_rep_desc_ "  상단에 넣으면 반영됩니다. PC에서는 광고 2개, 모바일에서는 광고 1개가 보이게 하는 방법은 총 2개의 방법이 있습니다. 첫번째는 창의 크기에 따라서 판단해서 Javascript 에서 광고를 재배치 방법과 두번째는 해당 인터넷를 하는 기기에 따라 광고를 재배치 하는 방법입니다.

 첫번째 방법은 readiz 블로그에 간단하게 소개되어 있기도 하고, CSS 와 조합해서 하는 방법이 있지만 약간의 단점이 있습니다. 제가 자바스크립트에서 대해서 잘은 모르지만, PC 에서 상단에 2개 광고를 각각 다른 홍보사를 이용해서 사용하는 경우 배치가 어렵습니다. 상단 2개 모두를 애드센스를 이용하는 것보다 다른 각각 다른 홍보사(애드센스 + 클릭몬)를 이용해 배치해야 효과가 더 좋다고 생각하게 때문입니다. 

 저는 2개의 광고와 본문의 내용을 반영한 동기형 광고를 넣기 위해서 두번째 방법인 기기를 판단하는 방법으로 적용했습니다. 

( 스크립트 다운  : https://github.com/chanyong/HTML-2/blob/master/Mobile.html ) 

 즉 사용자의 기기가 애플기기(아이폰,아이패드), 안드로이드계열 기기(삼성,모토로라,LG,소니 등), 블랙베리 등에 따라서 다르게 판단하는 것입니다. 물론 이것은 아이폰, 삼성, LG 의 시장 점유율이 90% 이상인 우리나라에 어울리는 스크립트도 제조사에 따라서 증가할 수 있습니다. 아래는 전체 스크립트 입니다. 

( 스크립트 다운 : https://github.com/chanyong/HTML-2/blob/master/UpperAd.html )

2. 본문에 광고 삽입 하고 쉽게 편집하는 방법(2개 이상 배치: PC 및 모바일 동시적용)

 - 본문에 광고를 삽입하는 방법도 두가지 입니다. 본문 중에 광고를 넣고 싶은 위치에 직접 광고 스크립트를 넣는 방법과 원하는 위치에 링크 개념의 "div id" 를 넣고 실제 스크립트는 html 파일 하단에 넣는 방법입니다. 당연히 두번째 방법이 모든 블로그 글들을 한번에 수정할수 있기 때문에 선호됩니다. 하지만 처음에 수정하는 과정에서 약간 시행착오가 필요하지만, 금방 따라하실 수 있습니다. 

 먼저 광고를 넣고 싶은 위치에 <div id="adhere"></div> 에를 넣습니다. 여기서 adhere 는 자신이 인식하기 쉬운 자신만의 ID 입니다. 그리고 HTML 파일 하단 </body> 위에 아래 내용을 넣어 줍니다. 

( 스크립트 다운 : https://github.com/chanyong/HTML-2/blob/master/Middle.html )

 상단은 애드센스에서 제공하는 동기식 광고 스크립트 내용이고, 하단은 위쪽 id 인 adhere 를 adsense 스크립트와 연결해주는 스크립트라고 보시면 됩니다. 이렇게 설정하면 나중에 광고 종류를 사용자가 편하게 바꿀 수 있습니다. 저는 PC 와 모바일 동일하게 300x 250 을 삽입하기 위해서 위 스크립트를 사용하였습니다. 물론 구글 애드센스에서 제공하는 반응형 광고를 이용할도 있지만, 모바일에서도 300x250 광고가 고정적으로 나오게 하고 싶어서 고정형을 사용하였습니다. 

 여기에 저는 본문 속 광고를 하나 더 넣어습니다. 1번 창의 크기에 따라 광고가 변하고, 2번 본문 내 광고 넣는 것을 조합한 것으로 스크립트는 어렵지 않습니다. 이 블로그 글이나 제 블로그 다른 글들의 스크립트를 한번 보시면 바로 따라 하실 수 있으실 것입니다. 이상 PC 와 모바일에따라 광고 크기가 변하는 반응형 광고 및 본문 내용과 일치하는 동기형 광고 설정 방법이었습니다. 

3. 본문 하단에 카테고리 글목록과 광고 동시에 노출하기 

 - 본문 하단의 광고 효과를 높이기 위해서 카테고리 글목록을 보는 과정에 광고 함께 보이기 위해서 스크립트를 약간 수정했습니다. 먼저,  ''  하단에 자신이 넣고 싶은 큰 정사각형 스크립트를 넣습니다. 그리고 CSS 파일 하단을 아래와 같이 수정합니다. 

▲  카테고리 글목록 폭 조정

 위 스크립트는 카테고리 글목록을 오른쪽으로 정렬하고 폭을 380px 로 고정하는 것입니다. 그렇게해서 왼쪽에 광고(300x250)를 넣을 수 있는 위치를 만드는 것입니다. 380px 은 제가 PC ,테블렛 및 모바일을 고려하여 정한 값이니 참고바랍니다. 

■ 맺으며

 광고는 그 위치, 크기, 본문동기형 여부에 따라 광고의 효과가 매우 크게 차이가 납니다. 또한 다매체 시대이기 때문에 아이폰 기기와 안드로이드 기기 들의 화면 해상도에 따라 어떻게 보여질지 고민을 해서 광고를 넣는 것도 중요합니다. 제가 소개한 방법이 최적화 방법은 아니며, 더 좋은 아이디어가 있을 수 있습니다. 혹, 다른 아이디어나 위 내용에 대해서 문의가 있으면 답글을 달아 주십시요. 함께 고민해 보겠습니다. ^^