예전부터 검색용 애드센스를 설치 해보려다가 지금 스킨에는 타이틀 가운데 큰 검색창이 떡하니 버티고 있어서 필요성도 못느끼고 설정방법도 이것저것 복잡해보여서 미뤄오다가 검색용 애드센스를 활용할일이 갑자기 생겨서 직접 설치해보면서 느낀점을 포스팅해봤습니다.
■ 검색용 애드센스 수익원리
검색용 애드센스는 검색만 하면 수익이 올라가는 방식이 아니라 검색결과의 상,하단에 딸려나오는 구글애드센스 광고로 수익이 나오는 원리입니다. 그래서 검색용 애드센스를 설정하실때는 풍부한 검색결과가 나올수 있도록 다양한 사이트들을 등록시켜놓는것이 유리합니다.
■ 검색결과, 본문내 vs 새창열기
검색결과를 본문내에 나오게 하거나 , 새창열기로 나오게 선택을 할수 있습니다. 대부분의 이웃분들은 새창으로 검색결과를 나오게 설정을 해두셨는데, 개인으로는 새창열기를 하면 광고창이 뜨는 느낌이라 잘 안보게 되는것 같아서 본문내 검색으로 설정을 하는것이 좋을것 같아서 본문내 검색으로 설치하는 방법으로 포스팅했습니다.
■ 검색용 애드센스 코드 생성하는 방법(본문내 검색기준)
- 본문폭 : 683px - 사이드바크기 : 200px
- 구글애드센스 > 애드센스설정 > 검색용 애드센스를 눌러줍니다.
- 검색 유형 선택
1. 풍부한 검색결과를 위해서 모든웹이 좋을수도 있지만 좀더 정확하고 원하는 검색결과를 나오도록 하기위해 선택한 웹으로 자주 이용하는 포탈사이트들 위주로 등록했습니다.
2. www.daum.net 이면 *.daum.net 전체를 지정할수 있습니다.
3. 자신의 블로그 주제에 맞게 키워드를 적어 주시면 됩니다.
4. 한국어, 유니코드(UTF-8), 한국으로 지정해주시면 됩니다.
5. 새 처널추가후 원하는 채널을 입력하고 확인을 누르면 채널설정이 완료 됩니다.
- 검색창 옵션 선택
1. 원하는 디자인을 선택하시면 됩니다 ( 개인적으로 첫번째가 제일 무난한것 같습니다.) 2. 200px기준으로 21자를 해주시면됩니다. 3. 계속을 누르면 검색결과 스타일로 넘어갑니다.
- 검색결과 스타일
1. 내 사이트에서 검색결과 열기 2. 자신의 블로그 주소/search 를 입력해줍니다. 예) http://nextgoal.tistory.com/search 3. 일단은 800을 입력해줍니다. (683을 입력해도795이상을 입력하라고 나옵니다.)
- 광고위치와 디자인 변경
1. 683은 폭이 좁아서 오른쪽보다는 맨위와 맨아래가 제일 좋은것 같습니다. 2. 원하는 디자인으로 꾸며주고 3. 계속을 누르면 됩니다.
- 사이드바에 설치하는 방법
1. 검색창 코드 붙여 넣는 방법
- 검색창 코드를 복사합니다.
- 블로그 관리 > 스킨 > 사이드바설정을 이동합니다.
1. HTML 배너출력을 오른쪽으로 드래그 해줍니다. 2. 편집을 누르면 새창이 뜹니다. 3. 원하는 이름과 4. 코드를 복사하고 5. 확인을 누르시면 됩니다.
2. 검새결과 코드 붙여 넣는 방법
1. 검색결과코드를 복사해줍니다. 2. 1번의 복사내용중 800이라는 숫자를 683(자신의 본문폭)으로 수정해주고 생선된 코드를 html/css편집 </s_list> 아래에 복사해줍니다.
■ 완성된 모습
■ 후기
블로그에서 검색창 활용을 잘 하지 않으시면 구글애드센스 검색창으로 대체를 해서 수익과 검색 둘다를 노려보는것도 좋은것 같습니다.
3. 자신이 식별할 수 있는 이름을 적당히 입력하고, 광고 크기는 자신의 블로그 본문 너비에 맞게 설정하면 된다. 보통 1개를 배치하려면 336x280 정도를 권장하고, 2개를 나란히 배치하려면 300x250 을 권장합니다. 스타일은 여러가지 만져보고 자신이 마음에 드는 스타일로 설정하면 됩니다. 마지막으로 저장과 동시에 코드를 생성합니다.
4. 생성된 광고 코드를 복사합니다.
티스토리에 배치하기
1. 티스토리 관리자모드에서 [HTML/CSS 편집] - [HTML/CSS] 에서 단축키 ctrl+f 로 article_rep_desc 를 검색합니다. 검색한 키워드를 기준으로 위에 광고 코드를 삽입하면 본문 상단, 아래에 삽입하면 본문 하단에 배치됩니다. 나란히 상단에 배치하기 위해서는 article_rep_desc 키워드 위에 광고 코드를 삽입하는데, 연속으로 두 개의 광고를 삽입하면 됩니다.
블로그를 운영한지 벌써 4년차네요. 처음에는 진짜 아무것도 모르고 시작했는데 이제는 좀 어떻게 운영해야 할지 감이 오는 것 같습니다. 물론 고수분들에 비하면 아직 멀었습니다.
티스토리 블로그 (http://bonik.me) 만 놓고 봤을 때 일일방문자 수는 1000명내외입니다. 페이지뷰에 따른 노출수는 2000내외입니다.
물론 블로그 + 애드센스 해보신 분들은 아시겠지만 수익은 생각보다 많지 않습니다. 거기다가 또 제 블로그는 실용음악 블로그이다 보니 음악과 관련된 적절한 광고도 거의 없는 편입니다.
요즘에 블로그 초반보다 애드센스의 CTR (페이지뷰 당 클릭율) 과 단가가 너무 낮아져서 이번에 실험을 좀 해봤습니다. 아직 실험 초기이지만 확실히 전보다 CTR과 단가가 올라갔습니다.
인터넷에 돌아다니는 내용을 보면 블로그 본문 상단에 300 250 짜리 두개의 광고를 넣는 것으로 설명되어 있는 글이 상당히 많습니다. 저도 그동안 이렇게 광고를 했었는데 이번에 두개의 300 250짜리 광고를 빼버렸습니다.
<원래 레이아웃>
300 250 광고2
300 250 광고1
블로그 본문 (넓이 약 730px (700+여백))
468 60 하단 광고
300 250 짜리 광고를 빼버린 이유가 있습니다. 1. 상단 광고가 2개씩 나오기 때문에 광고가 상당히 많은 것 같은 인상을 줍니다. 2. 한 페이지에 총 3개의 광고가 나오는데 광고가 많을 수록 총 노출수가 많지만 그만큼 입찰 경쟁도 내려가다 보니 단가는 내려가는 것 같습니다. 3. 300 250 두개면 가로 길이가 600인데 여백이 어느정도 생기게 됩니다.
<새롭게 바꾼 레이아웃>
728 90 상단 광고
블로그 본문 (넓이 약 730px (700+여백))
728 90 하단 광고
이런 형태로 새롭게 광고를 바꿨습니다. 똑같은 클릭이 일어난다고 하더라도 광고가 줄어들다 보니 CTR이 올라가는 건 당연한거겠죠. 그런데 이 CTR이 높은 쪽이 훨씬 유리한 것 같습니다. 관련 자료를 빡세게 찾아 보지는 않았습니다만 아무래도 블로그의 품질같은 것을 측정하거나 광고 효율성을 따지기 위해서는 광고주들이 광고를 하고자 하는 사이트의 CTR을 따져볼 수 밖에 없습니다.
광고주 입장에서 생각해 볼 때 클릭당 광고비가 드는 경우도 있고 노출당 광고비가 드는 경우도 있을 겁니다. 하지만 똑같은 광고라도 CTR이 높은 사이트에 광고를 내고자 하는 것이 아무래도 당연하겠죠. 또 그렇게 광고를 내고자 하는 광고주들이 많아야 사이트의 몸값이 올라가서 단가도 같이 오르게 됩니다.
처음에는 아예 하단 광고까지 빼버리려고 했는데 본문을 읽고 나서 클릭하는 경우가 많다보니 상단과 하단의 클릭률이 비슷하더군요. 그래서 그냥 두개 다 놔두기로 했습니다.
블로그 초기에 728 90짜리 광고를 넣지 못하고 468 60짜리 광고를 넣은 이유가 있는데 html css를 잘 다루지 못해서 여백문제를 해결하지 못했었습니다. 요새 사이트도 몇개 만들고 공부를 좀 하다보니 방법을 알게 되서 본문 영역에 여백없이 광고를 넣을 수가 있었습니다. z-index와 margin 음수값을 사용했더니 파이어폭스, IE, 크롬에서 잘 적용이 되네요.
적용하고 나서 조금 시간이 지났더니 CTR은 크게 올라갔고 단가도 서서히 올라갔습니다. 클릭수는 이전과 비슷하지만 총 수익은 조금 늘어난 것 같네요. 애드센스 보고서 항목 중 어디까지 공개할 수 있는지 찾아보기가 귀찮아서 구체적인 값들은 공개하지 않겠습니다.
지금 생각해보면 외국 커다란 사이트를 보면 애드센스 광고를 거의 한두개 정도만 쓰던데 한국의 블로그들은 유독 광고수가 많은 것 같습니다. 아무래도 조금 더 변수를 두고 실험을 해봐야 하겠지만 광고가 많다고 해서 수익이 많은게 아닌 건 확실한 것 같습니다. 다들 최적화를 해서 수익을 조금이라도 늘려보세요.
도움말에서 그런 부분은 찾아볼 수가 없었네요. 광고가 많은게 좋은 것이 아니라는 말은 다른 블로거 들도 하는 말이고 최적화 가이드에는 아래와 같은 말이 있습니다. 또 CPC 올리려면 CTR이 높은 광고를 첫번째 광고로 설정하는 게 좋다고 하네요. 최적의 개수가 3개인 사이트도 있고 1개나 2개인 사이트도 있을 것 같습니다.
적절한 수의 광고: 정책에서는 사이트 페이지당 3개의 광고 단위, 3개의 링크 단위 및 2개의 검색창이 허용되지만 페이지당 최대 한도까지 광고를 게재하면 페이지가 복잡해 보일 수 있습니다. 사용자는 원하는 내용을 찾을 수 없으면 정보가 있는 다른 사이트로 이동합니다.
애드센스 도움말에 보면 광고를 세 개 넣는 것이 단가가 더 높다고 나오니까 세 개를 다 넣는 경우가 많아요.
전에는 상단 두 개를 넣는 곳이 많아졌지만 요세는 상단 336x280 하나로 바뀌는 추세(?)더라고요. 현재 블로그 배치라면 상단 728x90 광고 아래 링크단위를 넣는 것도 괜찮을 듯 싶네요.
현재 기준에서는 위 코드를 매 게시글 마다 html모드를 통해 본문에 삽입해줘야지 모바일에 광고가 노출이 됩니다. 물론, 데스크탑에서도 위의 방법으로 등록한 광고가 노출됩니다-_-;;;;
# 애드센스에서 이 치명적인 단점을 해결하기 위한 지침으로 준 것이 1. 광고 코드를 서식으로 지정하여 글 작성시 불러오도록 하는 것 과 2. 상단 2개 중 1개를 미노출 시키고 모바일용을 노출처리하면 된다.....인데 서식으로 지정하는 것은 써먹겠지만 2번째 것은 제가 생각하기에 아닌거 같아서 그냥 넘겼습니다ㅋ(상단에 광고 1개만 노출시킨다면 충분히 적용하기 쉬울 것이니 아래 지침을 확인해주세요.)
결국 데스크탑에서 모바일용 광고가 노출되기 때문에 이대로 본인 블로그에 적용할 시 상단 2개 광고 영역 밑으로 모바일용 광고가 똑같은 크기로 넣어지게 되어 미관을 해치게 되고 더 나아가 하단에도 광고가 1개 있으므로 3개까지 노출이 가능하다는 구글 애드센스 정책에 위배되게 됩니다ㅠㅠ)
3. 모바일용 광고가 데스크탑에서 보이지 않도록 설정을 해보겠습니다. (스크립트 이용)
<script language="JavaScript" type="text/javascript"> document.getElementById("AdsenseM1").innerHTML = '<!-- 모바일 광고 1 -->'; document.getElementById("AdsenseM2").innerHTML = '<!-- 모바일 광고 2 -->'; </script>
위 소스를 skin.html 의 </body> 위쪽에 붙여 넣습니다.
# 위의 스크립트는 모바일 광고 2개를 사용할 수 있도록 설정된 스크립트입니다.
4. 모바일 광고 작성시 광고코드와 함께 데스크탑에서 노출을 막기 위한 아래 코드도 함께 적용합니다.
1. 티스토리 관리자모드에서 [HTML/CSS 편집] - [HTML/CSS] 탭으로 이동하고, 단축키 Ctrl + F 로 /body 를 검색합니다. 그 윗 부분에 다음 코드를 삽입합니다. "Ad1"는 변수 이름입니다. 아래에서 코드를 추가할 때 이 변수 부분이 일치해야 합니다.
<!-- 모바일용 광고가 PC에서 보이지 않도록 설정하는 소스--> <script language="JavaScript" type="text/javascript"> document.getElementById("Ad1").innerHTML = '<!-- 모바일 광고 1 -->'; </script> <!-- 모바일용 광고가 PC에서 보이지 않도록 설정하는 소스 -->
모바일 광고 달기
1. 모바일에 광고를 게시한다고 애드센스의 모바일용 광고를 사용하는 것이 아닙니다. 아래와 같이 콘텐츠 광고에서 광고 코드를 생성합니다. 원래 사용하던 컨텐츠 광고 코드를 사용해도 되지만, 모바일에선 얼마나 클릭하는지 알아 보기 위해서는 모바일 광고용으로 또 생성하는게 좋습니다. 콘텐츠 광고를 삽입할 때 사이즈는 꼴리는 대로 해도 되는데 보통 300 X 250 을 많이 사용 합니다. 물론 작은 사이즈 하는 사람도 많습니다.
※ 모바일 광고를 삽입하기 위해서는 포스팅 할 때 HTML 모드로 각각 삽입 해주어야 합니다. 예를 들어 블로그에 포스트가 100개가 있으면, 100개를 하나하나 다 수정 해주어야 모바일에서 100개 모두 광고가 보입니다.
2. 조금 더 쉽게 HTML 코드를 삽입하기 위해 서식을 하나 만듭니다. ★ 부분을 지우고 애드센스 광고 코드를 삽입하면 됩니다. id="Ad1" 부분은 PC 미노출 설명 때 언급했던 변수 부분입니다. 이 부분이 일치해야 PC에서 광고가 숨겨집니다.
티스토리는 다음에서 제공하는 블로그서비스입니다. 자유로운 스킨 편집으로 다들 다양한 형태로 블로그를 이용하여 즐기고 있습니다. 그런데 유독 모바일에서는 그러한 스킨 편집을 제공하지 않고 있습니다. 그래서 모바일에 광고를 넣기 위해서 본문에 광고를 강제로 넣고 표시하는 것을 하고 있지만 그런 방법은 데스크탑에서의 광고 배치를 자유롭게 하지 못 합니다.
그래서 역시 자바스크립트의 InnerHTML을 이용해서 티스토리 모바일에 광고를 넣는 방법을 시도해 보았지만, 크롬과 파이어폭에서는 정상적으로 동작하지만, 인터넷 익스플로러와 사파리에서는 정상 동작하지 않는 등 문제가 있어 결국 포기할 수 밖에 없었습니다. 그래서 새로운 코드로 고쳤습니다. 이번 코드는 티스토리 특유의 모바일 주소, [블로그 주소]/m라는 걸 착안해서 동작하는 코드입니다.
&lt;div style="[광고 상자에 적용할 스타일]"&gt; &lt;script type="text/javascript" src="[확인한 주소]/skin/images/AdsenseM.js"&gt;&lt;/script&gt;&lt;/div&gt;
광고를 div 태그로 묶으므로 그에 걸맞는 스타일을 적용하시면 됩니다. 예시로는 "width:300px; margin: auto;" 등이 있을 수 있습니다. 그 다음에는 이 코드를 광고를 적용할 곳에 붙여 넣습니다. 서식으로 만들어서 사용하여도 됩니다. 이것을 CSS 적용을 위한 스크립트와 통합하여 사용하여도 무방하고 따로 불러 쓰셔도 됩니다. 티스토리 모바일의 경우에는 "margin: auto;"를 넣어도 살짝 오른쪽으로 밀리므로 그걸 막기 위해서 "padding-right: 8px;"를 넣으면 맞습니다.
티스토리의 소셜웹 반응글! 자바스크립트로 꾸며본다 (0)자바스크립트로 다음 view 추천 버튼을 원하는 곳에 넣을 수 있다면? (0)자바스크립트로 티스토리 모바일에 광고 넣기 (49)티스토리 모바일에 스타일을 적용하여 꾸며보자 (4)InnerHTML을 이용하여 티스토리 모바일에 광고 넣기 (8)이글루스, 6년의 세월을 지나 SK 품에서 독립 (0)
티스토리 블로그 모바일페이지에도 광고를 띄웠다~Tracked from 珠申world2013/02/05 00:20몇 주전에 트친인 나무님의 블로그에서 본것을 조금 전. 시도 했습니다. 따라 했더니 됩니다. 우와~ 저는 자바스크립트 라던가.. css라던가... html 이라던가... ... 전혀 아는게 없는, 그냥 복붙을 ..
애드센스 이용 시 주의할 점 - Google AdsenseTracked from 해커 C 이야기2013/02/20 17:54애드센스 이용 시 주의할 점 - Google Adsense 요약 : 애드센스 주의사항 서비스 : 구글 애드센스 작성자 : 해커 C (hackerc.com) 주의 : 실제와 다른 내용이 포함될 수도 있습니다. 구글 애드센스는 많은..
티스토리 모바일에 광고 넣기Tracked from 기록2013/06/04 00:10블로그 스킨을 이용하여 애드센스를 넣게 되면 모바일 버전에서는 광고가 노출이 안된다. 또한, 로그 분석 스크립트도 블로그 스킨에 넣게 되면 모바일 버전으로 접속하는 경우는 통계에 잡..
말씀하신 방법으로 하면 페이지 내 3개의 광고 제한에 걸릴 수 있어서 이 방법을 쓰고 있습니다. 페이지를 보니 데스크탑에서 구글 광고를 1개만 노출하고 본문에 2개를 써서 출력에 문제가 없어 보이는 것 뿐입니다. 만약 데스크탑에 광고를 더 쓰기 시작하면 문제가 생길 겁니다.
그렇군요. 그렇다면 일단은 그대로 사용해야 겠습니다. 친절한 답변 감사드립니다. 새해 복 많이 받으세요.
안녕하세요? 정말 필요한 정보였는데 덕분에 큰 도움이 되었습니다. 한 가지 여쭤볼 것이 있는데, 현재 블로그에 데스크탑에서만 볼 수 있는 애드센스가 3개가 적용되어 있는 상황입니다. 여기에 기존의 애드센스는 수정하지 않고 본 포스팅의 방법으로 모바일 광고를 본문에 추가하였는데, 이렇게 될 경우 애드센스 규정에 어긋나지 않는 것인가요? 데스크탑에서는 광고가 3개만 보이고 모바일에서는 1개만 보이지만, 결국 하나의 웹사이트에서 총 4개의 광고를 보유하는 셈인데 이 부분이 조금 헷갈립니다. 혹시 이에 대해서 알고 계신점이 있다면 가르쳐주시면 감사하겠습니다.
그렇다면 스크립트를 모바일에서만 출력되는 것을 떼어버리고, 스크립트로 데스크탑/모바일 모두에 출력되도록 하고... 나중에 모바일 스킨이 적용되면 스크립트에서 광고 출력 기능을 제거해버리면 향후 본문을 다시 수정할 일이 없어질 겁니다... 저도 그래서 스크립트를 굳이 쓰는 겁니다.
뭘해도 모바일쪽으로는 광고 출력이 안되네요 ㅠㅠ 위에 설명하신대로 다 했는데 저는 모바일쪽에 광고가 노출이 되지않네요 ㅠㅠ 이곳저곳 돌아다니면서 여러방법을 써 봤는데 하나도 되는것이 없습니다 ㅠㅠ div스타일도 다 빼고 광고코드만 넣으면 PC상에서는 보여지지만 모바일에서는 안나오고...
휴대폰에서 사용하는 브라우저가 무엇입니까? 제 경우에는 그런 문제가 없습니다. 구글 광고가 모두 iframe으로 구성되어 이 경우 '새탭' 또는 '새창'으로 열리도록 되어있는데 쓰시는 브라우저에서 그걸 막고 있어서 발생하는 문제 같습니다.
사용하시는 웹 브라우저를 알려주세요.
안녕하세요. 말씀해 주신 방법으로 적용을 해 보니 모바일에서 광고가 노출이 잘 되더라구요. 너무 감사 드립니다!! 그런데 한가지 문제가 있었던게 모바일에서 노출되었던 광고의 링크 문제였습니다. 클릭해도 넘어가지 않는 경우가 많았구요. 텍스트 광고가 노출되어 해당 페이지로 넘어가더라도 광고크기만큼 아이프레임처럼 넘어갔던 페이지가 노출이 되더라구요. 구글의 문제인지 휴대폰의 문제인지... 다른 블로그들의 구글광고들도 그런 문제가 보이네요.
