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

구글 애드센스(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) 블로그 원본 사진 이미지 보기  (11)	2016.03.14