티스토리 뷰
구글 애드센스(google adsense) 광고는 한 페이지 당 광고 갯수 제한이 있습니다.
- 콘텐츠용 애드센스 단위 최대 3개
- 링크 단위 최대 3개
- 검색창 최대 2개
콘텐츠용 애드센스 단위 광고 적용 방법은 전에 올렸던 글인 아래 링크에서 확인해 보세요.
2016/03/21 - [IT/블로그,티스토리] - 티스토리 반응형 스킨에 구글 애드센스(google adsense) 반응형 배너 적용 방법
클릭률을 높이려면 많은 광고가 있어야 겠지만, 그럴경우 클릭당 광고료가 떨어질 수 있으니 주의하셔야 합니다.
여러 경우를 테스트해보고 어떤것이 최적화인지 테스트를 충분히 해보세요.
우선 컨텐츠용 애드센스는 지난 글에서 다루었으니, 이번 글에서는 링크 단위 애드센스를 추가해 보겠습니다.
지금까지 글을 많이 올렸는데, 글 중간에 링크 단위 애드센스를 넣자고 모든 글을 수정하는것은 거의 불가능하죠.
그래서 글 수정없이 모든 글에 링크 단위 애드센스를 넣는 방법을 알려드리겠습니다.
1. 구글 애드센스에서 http://www.google.com/adsense/ 아래처럼 [+새 광고 단위]를 클릭해서 광고 크기를 [링크 광고]로 선택하고 [반응형 링크]로 선택해서 새 광고 단위를 생성합니다.
2. 같은 방법으로 링크 반응형 링크 광고 3개를 생성합니다.
</body> 태그 바로 위에 아래 코드를 삽입합니다. 주석을 잘 보시고 애드센스에서 [코드 가져오기]해서 수정하고 붙여넣으세요.
<div id="adsenselink1" style="display:none;"> <!-- 애드센스 [링크 반응형1] 코드를 복사해서 여기부터 --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 링크 반응형1 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="link"></ins> <!-- 여기까지 [링크 반응형1] 코드를 붙여넣으시되, <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> 위 코드는 빼고 넣으세요. --> </div> <div id="adsenselink2" style="display:none;"> <!-- 애드센스 [링크 반응형2] 코드를 복사해서 여기부터 --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 링크 반응형2 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="link"></ins> <!-- 여기까지 [링크 반응형2] 코드를 붙여넣으시되, <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> 위 코드는 빼고 넣으세요. --> </div> <div id="adsenselink3" style="display:none;"> <!-- 애드센스 [링크 반응형3] 코드를 복사해서 여기부터 --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 링크 반응형3 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="link"></ins> <!-- 여기까지 [링크 반응형3] 코드를 붙여넣으시되, <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> 위 코드는 빼고 넣으세요. --> </div> <script type="text/javascript"> $(function(){ var numimg = parseInt($(".imageblock").length,10); var ibwidth = 200; if(numimg>0){ if(numimg==1){ $("#adsenselink2").remove(); $("#adsenselink3").remove(); }else if(numimg==2){ $("#adsenselink3").remove(); } if(numimg>0){ ibwidth = $(".imageblock:first").css("width"); if(parseInt(ibwidth) < 728){ $("#adsenselink1").css({"display":"block","min-height":"18px","width":"200px"}); }else{ $("#adsenselink1").css({"display":"block","min-height":"18px","width":"728px"}); } $(".imageblock:first").append($("#adsenselink1")); (adsbygoogle = window.adsbygoogle || []).push({}); } if(numimg>1){ ibwidth = $(".imageblock:eq(1)").css("width"); if(parseInt(ibwidth) < 728){ $("#adsenselink2").css({"display":"block","min-height":"18px","width":"200px"}); }else{ $("#adsenselink2").css({"display":"block","min-height":"18px","width":"728px"}); } $(".imageblock:eq(1)").append($("#adsenselink2")); (adsbygoogle = window.adsbygoogle || []).push({}); } if(numimg>2){ ibwidth = $(".imageblock:last").css("width"); if(parseInt(ibwidth) < 728){ $("#adsenselink3").css({"display":"block","min-height":"18px","width":"200px"}); }else{ $("#adsenselink3").css({"display":"block","min-height":"18px","width":"728px"}); } $(".imageblock:last").append($("#adsenselink3")); (adsbygoogle = window.adsbygoogle || []).push({}); } }else{ $("#adsenselink1").remove(); $("#adsenselink2").remove(); $("#adsenselink3").remove(); } }); </script>
위 스크립트는 본문 내용중에 첫번째 이미지, 두번째 이미지, 마지막 이미지 밑에 링크 광고가 자동으로 삽입됩니다.
아래와 같이 이미지밑에 링크광고가 추가됩니다.
만약에 한개의 광고만 넣고 싶다고 하시면, 아래와 같이 하시면 됩니다.
<div id="adsenselink1" style="display:none;"> <!-- 애드센스 [링크 반응형1] 코드를 복사해서 여기부터 --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 링크 반응형1 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="link"></ins> <!-- 여기까지 [링크 반응형1] 코드를 붙여넣으시되, <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> 위 코드는 빼고 넣으세요. --> </div> <script type="text/javascript"> $(function(){ var numimg = parseInt($(".imageblock").length,10); var ibwidth = 200; if(numimg>0){ ibwidth = $(".imageblock:first").css("width"); // [링크 반응형1]를 첫번째 이미지 아래에 넣고 싶으면 .imageblock:first // [링크 반응형1]를 마지막 이미지 아래에 넣고 싶으면 .imageblock:last if(parseInt(ibwidth) < 728){ $("#adsenselink1").css({"display":"block","min-height":"18px","width":"200px"}); }else{ $("#adsenselink1").css({"display":"block","min-height":"18px","width":"728px"}); } $(".imageblock:first").append($("#adsenselink1")); // [링크 반응형1]를 첫번째 이미지 아래에 넣고 싶으면 .imageblock:first // [링크 반응형1]를 마지막 이미지 아래에 넣고 싶으면 .imageblock:last (adsbygoogle = window.adsbygoogle || []).push({}); }else{ $("#adsenselink1").remove(); } }); </script>
2 개의 광고를 넣고 싶으면 아래와 같이 추가하세요.
<div id="adsenselink1" style="display:none;"> <!-- 애드센스 [링크 반응형1] 코드를 복사해서 여기부터 --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 링크 반응형1 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="link"></ins> <!-- 여기까지 [링크 반응형1] 코드를 붙여넣으시되, <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> 위 코드는 빼고 넣으세요. --> </div> <div id="adsenselink2" style="display:none;"> <!-- 애드센스 [링크 반응형2] 코드를 복사해서 여기부터 --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 링크 반응형2 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="link"></ins> <!-- 여기까지 [링크 반응형2] 코드를 붙여넣으시되, <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> 위 코드는 빼고 넣으세요. --> </div> <script type="text/javascript"> $(function(){ var numimg = parseInt($(".imageblock").length,10); var ibwidth = 200; if(numimg>0){ if(numimg==1){ $("#adsenselink2").remove(); } if(numimg>0){ ibwidth = $(".imageblock:first").css("width"); if(parseInt(ibwidth) < 728){ $("#adsenselink1").css({"display":"block","min-height":"18px","width":"200px"}); }else{ $("#adsenselink1").css({"display":"block","min-height":"18px","width":"728px"}); } $(".imageblock:first").append($("#adsenselink1")); (adsbygoogle = window.adsbygoogle || []).push({}); } if(numimg>1){ ibwidth = $(".imageblock:eq(1)").css("width"); // [링크 반응형2]를 두번째 이미지 아래에 넣고 싶으면 .imageblock:eq(1) // [링크 반응형2]를 마지막 이미지 아래에 넣고 싶으면 .imageblock:last if(parseInt(ibwidth) < 728){ $("#adsenselink2").css({"display":"block","min-height":"18px","width":"200px"}); }else{ $("#adsenselink2").css({"display":"block","min-height":"18px","width":"728px"}); } $(".imageblock:eq(1)").append($("#adsenselink2")); // [링크 반응형2]를 두번째 이미지 아래에 넣고 싶으면 .imageblock:eq(1) // [링크 반응형2]를 마지막 이미지 아래에 넣고 싶으면 .imageblock:last (adsbygoogle = window.adsbygoogle || []).push({}); } }else{ $("#adsenselink1").remove(); $("#adsenselink2").remove(); } }); </script>
이 스크립트를 응용하면 전에 글 올렸던 것처럼 글 중간에 <div> 태그를 넣어서 추가 안하고 이렇게 이미지 밑에 컨텐츠용 배너 광고 삽입도 가능합니다.
그렇게 하면 글 수정없이 글 중간에 배너 추가가 가능하겠죠? ^^
혹시 안되시거나, 문의 사항이 있으시면 댓글 남겨주세요 ^^
공감은 글 올리는데 큰 힘이 됩니다. 힘든일이 아니니 공감 한번씩 눌러주세요 ^^
수정 2016.04.11)
링크형 광고가 728px 이상에서는 728px로 노출되고, 그 이하에서는 200px로 동작되기 때문에 스크립트를 전면 수정하였습니다.
또한, 첫번째 imageblock이 이미지가 아닌 파일업로드이거나 이미지가 컨텐츠 영역의 100% 크기가 아닌 작은 이미지일 경우에 링크광고가 이미지보다 더 넓게 나타나서 이미지 크기에 맞게 링크광고를 보여지게 수정했습니다.
티스토리 반응형 스킨#1, #2 스킨에서도 동작을 확인하였으며, 혹시 다른 스킨에서 문제가 있으시면 댓글달아주세요.
문제점을 찾게 해주신 낭만을 꿈꾸는( http://quistis99.tistory.com/ ) 님께 감사드립니다.
'IT > 블로그,티스토리' 카테고리의 다른 글
티스토리 반응형 웹스킨 #1 하단 copyright 수정 (12) | 2016.05.02 |
---|---|
티스토리 반응형 웹스킨 #1 본문 폭 수정 가이드 (4) | 2016.04.28 |
티스토리 반응형 웹스킨 #1 카테고리 메뉴 바 수정 가이드 (10) | 2016.04.25 |
카테고리의 다른 글 목록에 이전, 다음 버튼(페이징) 만들기 (2) | 2016.04.23 |
유튜브 동영상 반응형 웹에 삽입하는 방법 (13) | 2016.04.18 |
티스토리 블로그 모든 본문 중간에 글 수정없이 구글 애드센스 반응형 링크 광고 달기 (50) | 2016.04.03 |
티스토리 최신글(최근에 올라온 글) 본문에 추가하기 (27) | 2016.04.02 |
티스토리 반응형 스킨에 PC버전 보기, 모바일버전 보기 버튼 만들기 (4) | 2016.03.24 |
티스토리 블로그에 탑(Top) 버튼 넣는 방법 (15) | 2016.03.23 |
티스토리 반응형 스킨에 구글 애드센스(google adsense) 반응형 배너 적용 방법 (50) | 2016.03.21 |
티스토리(Tistory) 블로그 원본 사진 이미지 보기 (10) | 2016.03.14 |
- 이전 댓글 더보기
-
토마토..
반응형 링크광고가 폭이 728px 이하에서는 200px로 동작하더라구요..
200px은 세로 링크광고라서 그렇게 보일거에요.
반응형이 싫다면 반응형이 아닌 일반 가로로 긴 광고로 넣어야 할거 같아요. 2016.04.19 23:42 신고 -
토마토..
"width":"200px"
"width":"728px"
이 부분을 모두 찾아서 삽입하려는 링크형 광고의 width값으로 넣으세요.
그리고 저 코드 뒤에 가운데 정렬하려면 하나를 더 추가해야하는데..
만약에 삽입하려는 링크형 광고 width가 160이라면
"width":"160px","margin":"0 auto"
이렇게 하면됩니다.
2016.04.21 12:37 신고 -
토마토..
시샘별님의 IE8이 문제가 있는것 같은데요.
제가 IE8로 봤을때는 전혀 문제가 없는데요.. 2016.04.21 12:38 신고 -
토마토..
소스보기는 어떻게든지 노출이 될 수 밖에 없습니다.
어렵게 숨기려고 해도 어떻게든 찾아낼수 있습니다.
뭐 js파일로 빼낼수도 있지만, js파일도 노출이 되니까요; 2016.06.09 03:23 신고 - 토마토.. 조금 응용을 하셔야 하는데, 이미지 아래에 자동으로 입력하기 보다 컨텐츠 배너는 위치를 지정해서 넣는것이 좋을듯 합니다. http://sometimes-n.tistory.com/15 이글을 참고하시는게 좋습니다. 2016.06.09 03:21 신고
- 토마토.. 위 소스 그대로 복사해서 붙여넣으시고, 본인의 광고 코드로 수정하시면 됩니다. 2016.06.09 03:19 신고
-
토마토..
제가 님 블로그 확인해보니까, 첫번째, 마지막 링크광고가 들어가고 중간링크광고가 빠진경우도 있네요.
링크광고와 반응형이나 일반 배너가 서로 인접할 경우에 간혹 노출이 안될수도 있습니다.
배너와 링크광고가 겹치지 않도록 배치해 주셔야 합니다.
2016.06.09 03:18 신고 -
토마토..
네. 이미지 사이즈가 728사이즈 이하면 세로 배너가 출력됩니다.
감사합니다. 즐거운 주말 되세요 ^^ 2016.06.18 07:58 신고 - 바닐라라테 안녕하세요. 좋은정보 정말 감사합니다. 잘 이용하고 있는데요. 이미지에 한줄 띄어가지고 나오게 하는 방법은 없을까요? 너무 이미지에 딱~붙어서 나오다보니 한줄정도 떨어졌으면 좋겠다고 생각해서요~. 2016.06.26 20:40 신고
- 스마트뉴스 전 왜 안 나오는지 모르겠어요. ㅠㅠ 2016.07.19 16:15 신고
-
알지오™
좋은 정보 감사드립니다. 스크립트 위치에 따라 동작을 하고 안하고 해서 조금 애먹긴 했는데, 잘 됩니다. 근데 궁금한게 있는데 이런 좋은 스크립트를 만드시고,
본 블로그에는 적용하지 않으시는 이유가 있는지 여쭤봐도 될까요? 저도 구글 애드센스 승인 받은지 몇 일 안돼서요. 어렵게 승인 받은지라.. 궁금합니다. 2016.09.28 18:16 신고 -
미뉘(Min222)
안녕하세요 좋은 정보 감사합니다. 여쭤볼게 있는데
혹시 링크를 가운데로 정렬도 가능한가요? 2016.12.06 12:21 신고 -
Dara-Yo
안녕하세요. 본문 중간에 링크주소를 넣고 싶어서 검색하다가 우선 처음에 올려주신 첫번째 두번째 세번째 이미지 아래에 광고가 들어가는 것으로 광고를 다운 받아 티스토리 관리에 가서 /body 코드 바로 위에 복사를 해서 넣었습니다. 그러면 이미지가 하나일 경우에는 첫번째 코드가, 두개의 이미지일 때는 두번째까지 코드가 자동으로 적용되어서 각각 순서대로 이미지 아래에 광고가 들어가는건가요?
어떤 포스팅은 이미지를 1개로 한 것들이 있어서요.
코드를 넣었긴 했는데, 아직 티스토리 본문에는 반응이 안된거 같긴 한데 궁금해서요. 애드센스 승인난지 일주일도 안된상태라 모르는게 많습니다. 도움 부탁드립니다. 2017.01.16 01:04 신고 - 아뾰오옹 감사합니다.!!!!! 덕분에 쉽게 광고를 삽입할 수 있게 되었습니다. 좋은하루되세요!!! 2019.11.19 00:01 신고
- Total
- 908,970
- Today
- 21
- Yesterday
- 309
- 티스토리 스킨
- 티스토리
- 세차
- 티스토리 반응형 스킨
- 타이어 광택제 비교
- 블로그
- 퓨리스 A34 왁스
- 타이어 광택제
- 셀프세차
- 해운대
- 자동차 디테일링
- 데피니티브 율리시스
- 티스토리 새 반응형 웹스킨 #1
- 디테일링
- 포스타 upp
- 타이어 드레싱
- 퓨리스 타이어 광택제
- 퓨리스 A34
- TDG 블루베리 휠클리너
- 티스토리 반응형 스킨 #1