관리 메뉴

공부한것들을 정리하는 블로그 입니다.

구글 에드센스 반응형 링크 본문

잡담

구글 에드센스 반응형 링크

호 두 2017. 7. 30. 19:14
반응형


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


출처: http://sometimes-n.tistory.com/30 [종종 올리는 블로그]







구글 애드센스(google adsense) 광고는 한 페이지 당 광고 갯수 제한이 있습니다.


  • 콘텐츠용 애드센스 단위 최대 3개
  • 링크 단위 최대 3개
  • 검색창 최대 2개

콘텐츠용 애드센스 단위 광고 적용 방법은 전에 올렸던 글인 아래 링크에서 확인해 보세요.

2016/03/21 - [IT/블로그,티스토리] - 티스토리 반응형 스킨에 구글 애드센스(google adsense) 반응형 배너 적용 방법


클릭률을 높이려면 많은 광고가 있어야 겠지만, 그럴경우 클릭당 광고료가 떨어질 수 있으니 주의하셔야 합니다.


여러 경우를 테스트해보고 어떤것이 최적화인지 테스트를 충분히 해보세요.


우선 컨텐츠용 애드센스는 지난 글에서 다루었으니, 이번 글에서는 링크 단위 애드센스를 추가해 보겠습니다.


지금까지 글을 많이 올렸는데, 글 중간에 링크 단위 애드센스를 넣자고 모든 글을 수정하는것은 거의 불가능하죠.


그래서 글 수정없이 모든 글에 링크 단위 애드센스를 넣는 방법을 알려드리겠습니다.


1. 구글 애드센스에서 http://www.google.com/adsense/ 아래처럼 [+새 광고 단위]를 클릭해서 광고 크기를 [링크 광고]로 선택하고 [반응형 링크]로 선택해서 새 광고 단위를 생성합니다.


2. 같은 방법으로 링크 반응형 링크 광고 3개를 생성합니다.


</body> 태그 바로 위에 아래 코드를 삽입합니다. 주석을 잘 보시고 애드센스에서 [코드 가져오기]해서 수정하고 붙여넣으세요.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<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>

위 스크립트는 본문 내용중에 첫번째 이미지, 두번째 이미지, 마지막 이미지 밑에 링크 광고가 자동으로 삽입됩니다.


아래와 같이 이미지밑에 링크광고가 추가됩니다.



만약에 한개의 광고만 넣고 싶다고 하시면, 아래와 같이 하시면 됩니다.

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
32
33
34
35
36
37
<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 개의 광고를 넣고 싶으면 아래와 같이 추가하세요.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<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/ ) 님께 감사드립니다.



반응형
저작자표시

'잡담' 카테고리의 다른 글

내가 자주쓰는 이클립스 단축키  (2) 2017.07.30
폰 화면꺼짐 상태에서 유튜브 듣기  (0) 2017.07.30
어베스트 환불/자동갱신 취소 하기  (0) 2017.07.07
배열  (0) 2017.06.15
이클립스 : java web project 복습  (0) 2017.05.30
이클립스 : 기본 java project 복습  (0) 2017.05.30
비즈니스 로직(Business logic)  (0) 2017.05.19
컬럼과 필드는 같은 의미로 쓰인다  (0) 2017.05.16
'잡담' Related Articles more
Comments