티스토리 블로그 모든 본문 중간에 글 수정없이 구글 애드센스 반응형 링크 광고 달기

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