티스토리 뷰

구글 애드센스(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/ ) 님께 감사드립니다.


댓글
  • 이전 댓글 더보기
  • 비밀댓글입니다 2016.04.19 16:21
  • 토마토.. 시샘별님 블로그는 말씀처럼 IE8에서만 아예 안나오네요. 그 이후버전에서는 정상적으로 나오고요..
    </head>를 찾아서 <body id="tt-body-page"> 바로 앞에 넣으세요.

    </head>
    <body id="tt-body-page">

    이런식으로요.. 이게 원인이 아닐지도 모르지만, 최근글보이는 스크립트가 </head>전에 있어야 합니다.

    그리고 최근글 보이는 스크립트가 저번 오류처럼 줄바꿈이 안되어 있어요. 이게 원인일수도 있겠어요.
    2016.04.20 00:02 신고
  • 시샘별 답변 감사합니다.
    일단 수정해 놨고, 낼 IE8인 컴터로 확인해 볼게요~^^
    2016.04.20 00:26 신고
  • 토마토.. 그래도 안보이네요..
    찾은거 같아요..
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    이 부분 아래에
    <!--<![endif]-->
    이거 넣어주세요..
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!--<![endif]-->

    이렇게요.
    2016.04.20 00:43 신고
  • 시샘별 그 부분 찾아가보니 비어있네요.ㅎㅎ
    가르쳐주신 대로 잘 넣었어요.
    제가 지금은 볼 수 없는 상황인데, 직접 봐주시고... 정말 고맙습니다.(*´∇`*)
    2016.04.20 00:50 신고
  • 비밀댓글입니다 2016.04.19 22:00
  • 토마토.. 반응형 링크광고가 폭이 728px 이하에서는 200px로 동작하더라구요..
    200px은 세로 링크광고라서 그렇게 보일거에요.
    반응형이 싫다면 반응형이 아닌 일반 가로로 긴 광고로 넣어야 할거 같아요.
    2016.04.19 23:42 신고
  • 비밀댓글입니다 2016.04.20 13:35
  • 토마토.. "width":"200px"
    "width":"728px"
    이 부분을 모두 찾아서 삽입하려는 링크형 광고의 width값으로 넣으세요.
    그리고 저 코드 뒤에 가운데 정렬하려면 하나를 더 추가해야하는데..
    만약에 삽입하려는 링크형 광고 width가 160이라면
    "width":"160px","margin":"0 auto"
    이렇게 하면됩니다.
    2016.04.21 12:37 신고
  • 비밀댓글입니다 2016.04.20 18:23
  • 토마토.. 시샘별님의 IE8이 문제가 있는것 같은데요.
    제가 IE8로 봤을때는 전혀 문제가 없는데요..
    2016.04.21 12:38 신고
  • 비밀댓글입니다 2016.04.21 17:52
  • 비밀댓글입니다 2016.05.14 20:56
  • 토마토.. 소스보기는 어떻게든지 노출이 될 수 밖에 없습니다.
    어렵게 숨기려고 해도 어떻게든 찾아낼수 있습니다.
    뭐 js파일로 빼낼수도 있지만, js파일도 노출이 되니까요;
    2016.06.09 03:23 신고
  • 비밀댓글입니다 2016.05.22 23:40
  • 토마토.. 조금 응용을 하셔야 하는데, 이미지 아래에 자동으로 입력하기 보다 컨텐츠 배너는 위치를 지정해서 넣는것이 좋을듯 합니다. http://sometimes-n.tistory.com/15 이글을 참고하시는게 좋습니다. 2016.06.09 03:21 신고
  • 비밀댓글입니다 2016.06.08 12:19
  • 토마토.. 위 소스 그대로 복사해서 붙여넣으시고, 본인의 광고 코드로 수정하시면 됩니다. 2016.06.09 03:19 신고
  • 비밀댓글입니다 2016.06.08 23:41
  • 토마토.. 제가 님 블로그 확인해보니까, 첫번째, 마지막 링크광고가 들어가고 중간링크광고가 빠진경우도 있네요.
    링크광고와 반응형이나 일반 배너가 서로 인접할 경우에 간혹 노출이 안될수도 있습니다.
    배너와 링크광고가 겹치지 않도록 배치해 주셔야 합니다.
    2016.06.09 03:18 신고
  • 비밀댓글입니다 2016.06.17 14:09
  • 토마토.. 네. 이미지 사이즈가 728사이즈 이하면 세로 배너가 출력됩니다.
    감사합니다. 즐거운 주말 되세요 ^^
    2016.06.18 07:58 신고
  • 바닐라라테 안녕하세요. 좋은정보 정말 감사합니다. 잘 이용하고 있는데요. 이미지에 한줄 띄어가지고 나오게 하는 방법은 없을까요? 너무 이미지에 딱~붙어서 나오다보니 한줄정도 떨어졌으면 좋겠다고 생각해서요~. 2016.06.26 20:40 신고
  • 스마트뉴스 전 왜 안 나오는지 모르겠어요. ㅠㅠ 2016.07.19 16:15 신고
  • 비밀댓글입니다 2016.07.28 17:58
  • 비밀댓글입니다 2016.09.21 12:31
  • 알지오™ 좋은 정보 감사드립니다. 스크립트 위치에 따라 동작을 하고 안하고 해서 조금 애먹긴 했는데, 잘 됩니다. 근데 궁금한게 있는데 이런 좋은 스크립트를 만드시고,
    본 블로그에는 적용하지 않으시는 이유가 있는지 여쭤봐도 될까요? 저도 구글 애드센스 승인 받은지 몇 일 안돼서요. 어렵게 승인 받은지라.. 궁금합니다.
    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 신고
  • 비밀댓글입니다 2020.02.29 15:09
  • 비밀댓글입니다 2020.03.10 13:44
댓글쓰기 폼
공지사항
Total
830,290
Today
27
Yesterday
449
링크
«   2020/08   »
            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          
글 보관함