애드센스 광고 본문 상단 두 개 간단하게 넣는 방법

본문 상단의 광고가 클릭률이 제일 높고 수입도 제일 많습니다.

그래서 광고를 관리한다면 상단 광고를 제일 먼저 챙겨봐야 합니다.

광고 하나가 좋은지 두 개가 좋은지, 하나짜리라도 화면 100%를 만들 건지에 따라 달라질 수도 있습니다.

이전에 광고 두 개를 넣고 두 달간 테스트를 한 적이 있는데

재미있는 결과가 있습니다.

먼저 광고 두 개가 설정된 캡처 화면부터 보여드리겠습니다.

광고 두 개가 노출은 되었는데 크기를 336px로 정하다 보니 본문 크기와는 조금 차이가 납니다.

화면에 맞추기 위해서는 조금씩 키워서 맞추는 방법밖에 없겠습니다.

이 화면은 기존의 소스에서 약간 생각을 더한 것입니다.

view plaincopy to clipboardprint?

1. <style>    
2.   
3. .adbox2 ins{ width:336px; height: 280px; }    
4.   
5. @media(min-width: 1024px) { .adbox2 ins{ width: 300px; height: 250px; } }    
6.   
7. @media(min-width: 1200px) { .adbox2 ins{ width: 336px; height: 280px; } }    
8.   
9. </style>    
10.   
11.     
12.   
13. <div class="adbox2">  
14.   
15. <table style="padding-right:5px; padding-left:5px;">  
16.   
17. <tr>  
18.   
19.     <td style="text-align: left; padding-left:0px; padding-right:5px; padding-bottom:5px;">  
20.   
21.   
22.   
23. <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>   
24.   
25. <ins class="adsbygoogle "  
26.   
27.      style="display:block"  
28.   
29.      data-ad-client="ca-pub-개인 광고 코드"  
30.   
31.      data-ad-slot="개인 광고 코드"  
32.   
33.      data-ad-format="auto"  
34.   
35.      data-full-width-responsive="false"></ins>  
36.   
37. <script>  
38.   
39.      (adsbygoogle = window.adsbygoogle || []).push({});  
40.   
41. </script>  
42.   
43.   
44.   
45.     </td>  
46.   
47.     <td style="text-align: right; padding-left:5px; padding-right:0px; padding-bottom:5px;">  
48.   
49.       
50.   
51. <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>   
52.   
53. <ins class="adsbygoogle "  
54.   
55.      style="display:block"  
56.   
57.      data-ad-client="ca-pub-개인 광고 코드"  
58.   
59.      data-ad-slot="개인 광고 코드"  
60.   
61.      data-ad-format="auto"  
62.   
63.      data-full-width-responsive="false"></ins>  
64.   
65. <script>  
66.   
67.      (adsbygoogle = window.adsbygoogle || []).push({});  
68.   
69. </script>  
70.   
71.      </td>  
72.   
73. </tr>  
74.   
75. </table>  
76.   
77. </div>  

<style> .adbox2 ins{ width:336px; height: 280px; } @media(min-width: 1024px) { .adbox2 ins{ width: 300px; height: 250px; } } @media(min-width: 1200px) { .adbox2 ins{ width: 336px; height: 280px; } } </style> <div class="adbox2"> <table style="padding-right:5px; padding-left:5px;"> <tr> <td style="text-align: left; padding-left:0px; padding-right:5px; padding-bottom:5px;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle " style="display:block" data-ad-client="ca-pub-개인 광고 코드" data-ad-slot="개인 광고 코드" data-ad-format="auto" data-full-width-responsive="false"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </td> <td style="text-align: right; padding-left:5px; padding-right:0px; padding-bottom:5px;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle " style="display:block" data-ad-client="ca-pub-개인 광고 코드" data-ad-slot="개인 광고 코드" data-ad-format="auto" data-full-width-responsive="false"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </td> </tr> </table> </div>

미리 말씀드리지만 약간의 생각을 더한 코드나

다음에 보여드리는 심플한 코드나 웹 표준에 맞는지는 모릅니다.

노출은 잘됩니다.

여백은 padding값으로 조절합니다.

이번에는 또 다른 코드를 보여드리겠습니다.

위의 약간 생각하고 만든 코드보다는 광고가 화면에 꽉 차는 느낌을 받습니다.

광고 두 개를 노출하는 데 생각할 필요 없습니다.

정말 간단한 코드입니다.

view plaincopy to clipboardprint?

1. <table cellpadding="0" cellspacing="0" width="100%">  
2.   
3. <tr>  
4.   
5. <td width="50%">  
6.   
7. 애드센스 코드 삽입  
8.   
9. </td>  
10.   
11.   
12.   
13. <td width="50%">  
14.   
15. 애드센스 코드 삽입  
16.   
17. </td>  
18.   
19. </tr>  
20.   
21. </table>  

<table cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="50%"> 애드센스 코드 삽입 </td> <td width="50%"> 애드센스 코드 삽입 </td> </tr> </table>

효과 만점입니다.

스킨 편집 html에서

본문 상단의 광고가 클릭률이 제일 높고 수입도 제일 많습니다.

그래서 광고를 관리한다면 상단 광고를 제일 먼저 챙겨봐야 합니다.

광고 하나가 좋은지 두 개가 좋은지, 하나짜리라도 화면 100%를 만들 건지에 따라 달라질 수도 있습니다.

이전에 광고 두 개를 넣고 두 달간 테스트를 한 적이 있는데

재미있는 결과가 있습니다.

먼저 광고 두 개가 설정된 캡처 화면부터 보여드리겠습니다.

광고 두 개가 노출은 되었는데 크기를 336px로 정하다 보니 본문 크기와는 조금 차이가 납니다.

화면에 맞추기 위해서는 조금씩 키워서 맞추는 방법밖에 없겠습니다.

이 화면은 기존의 소스에서 약간 생각을 더한 것입니다.

view plaincopy to clipboardprint?

1. <style>    
2.   
3. .adbox2 ins{ width:336px; height: 280px; }    
4.   
5. @media(min-width: 1024px) { .adbox2 ins{ width: 300px; height: 250px; } }    
6.   
7. @media(min-width: 1200px) { .adbox2 ins{ width: 336px; height: 280px; } }    
8.   
9. </style>    
10.   
11.     
12.   
13. <div class="adbox2">  
14.   
15. <table style="padding-right:5px; padding-left:5px;">  
16.   
17. <tr>  
18.   
19.     <td style="text-align: left; padding-left:0px; padding-right:5px; padding-bottom:5px;">  
20.   
21.   
22.   
23. <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>   
24.   
25. <ins class="adsbygoogle "  
26.   
27.      style="display:block"  
28.   
29.      data-ad-client="ca-pub-개인 광고 코드"  
30.   
31.      data-ad-slot="개인 광고 코드"  
32.   
33.      data-ad-format="auto"  
34.   
35.      data-full-width-responsive="false"></ins>  
36.   
37. <script>  
38.   
39.      (adsbygoogle = window.adsbygoogle || []).push({});  
40.   
41. </script>  
42.   
43.   
44.   
45.     </td>  
46.   
47.     <td style="text-align: right; padding-left:5px; padding-right:0px; padding-bottom:5px;">  
48.   
49.       
50.   
51. <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>   
52.   
53. <ins class="adsbygoogle "  
54.   
55.      style="display:block"  
56.   
57.      data-ad-client="ca-pub-개인 광고 코드"  
58.   
59.      data-ad-slot="개인 광고 코드"  
60.   
61.      data-ad-format="auto"  
62.   
63.      data-full-width-responsive="false"></ins>  
64.   
65. <script>  
66.   
67.      (adsbygoogle = window.adsbygoogle || []).push({});  
68.   
69. </script>  
70.   
71.      </td>  
72.   
73. </tr>  
74.   
75. </table>  
76.   
77. </div>  

<style> .adbox2 ins{ width:336px; height: 280px; } @media(min-width: 1024px) { .adbox2 ins{ width: 300px; height: 250px; } } @media(min-width: 1200px) { .adbox2 ins{ width: 336px; height: 280px; } } </style> <div class="adbox2"> <table style="padding-right:5px; padding-left:5px;"> <tr> <td style="text-align: left; padding-left:0px; padding-right:5px; padding-bottom:5px;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle " style="display:block" data-ad-client="ca-pub-개인 광고 코드" data-ad-slot="개인 광고 코드" data-ad-format="auto" data-full-width-responsive="false"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </td> <td style="text-align: right; padding-left:5px; padding-right:0px; padding-bottom:5px;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle " style="display:block" data-ad-client="ca-pub-개인 광고 코드" data-ad-slot="개인 광고 코드" data-ad-format="auto" data-full-width-responsive="false"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </td> </tr> </table> </div>

미리 말씀드리지만 약간의 생각을 더한 코드나

다음에 보여드리는 심플한 코드나 웹 표준에 맞는지는 모릅니다.

노출은 잘됩니다.

여백은 padding값으로 조절합니다.

이번에는 또 다른 코드를 보여드리겠습니다.

위의 약간 생각하고 만든 코드보다는 광고가 화면에 꽉 차는 느낌을 받습니다.

광고 두 개를 노출하는 데 생각할 필요 없습니다.

정말 간단한 코드입니다.

view plaincopy to clipboardprint?

1. <table cellpadding="0" cellspacing="0" width="100%">  
2.   
3. <tr>  
4.   
5. <td width="50%">  
6.   
7. 애드센스 코드 삽입  
8.   
9. </td>  
10.   
11.   
12.   
13. <td width="50%">  
14.   
15. 애드센스 코드 삽입  
16.   
17. </td>  
18.   
19. </tr>  
20.   
21. </table>  

<table cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="50%"> 애드센스 코드 삽입 </td> <td width="50%"> 애드센스 코드 삽입 </td> </tr> </table>

효과 만점입니다.

스킨 편집 html에서 을 찾습니다.

위에 넣으면은 본문 상단, 아래에 코드를 넣으면 본문 하단에 광고가 노출됩니다.

이 코드를 보통은 스킨 편집에 넣으라고 합니다.

왜 그래야 하는지 생각해 보셨나요.

아마 티스토리에서 애드센스 광고 지침서를 읽어보신 분은 안 계실 겁니다.

누군가가 스킨 편집을 분석해 보니 그 자리더라 하는 것인데

그냥 플러그인 애드센스 반응형에 넣으면 됩니다.

위 화면도 플러그인으로 넣은 것인데 잘 나오죠.

그리고 광고 두 개를 배치한 코드를 플러그인으로 넣으면

더 좋은 점이 있습니다.

화면이 축소되었을 때 광고가 다른 자리를 침범하는 것이 아닌 가로 스크롤 바가 나옵니다.

스크롤 바가 나오는 것은 이 한 가지 상황에서만 해당하네요.

저도 처음 봤습니다.

스킨 편집으로 광고를 넣었을 때나 한 개짜리 광고를 플로그인으로 넣었을 때는 가로 스크롤 바가 나오지 않습니다.

더 재미있는 것은 광고가 두 개 나오다가 광고 하나가 두 개 자리를 차지할 때도 있네요.

랜덤으로 두 개 광고가 나왔다가 하나가 나왔다가 하는데 재미있습니다.

테스트해 볼 가치가 있는 코드네요.

위 코드 중

data-full-width-responsive="false"

false로 설정하면 모바일에서 꽉 찬 광고가 아닌 여백이 있고 박스 선이 생기는 이쁜 광고가 노출됩니다.

본문 상단 광고 두 개 배치는 많은 분이 사용하지만, 애드센스 정책에서 허용 여부는 알 수 없다고 하니 참고하세요.

그리고 이전 테스트한 내용으로는

광고 두 개를 배치하면 왼쪽 광고가 8~90% 클릭을 독점합니다.

그래서 두 개의 광고를 따로 만들어서 실적관리를 하는 것이 좋습니다.

하나의 광고로 좌우 두 개로 배치하더라도 같은 내용의 광고가 나올 때도 있지만 보통은 다르게 나옵니다.

같은 광고로 양쪽으로 배치하는 것이나 두 개의 광고를 배치하는 것은 광고내용과는 상관없습니다.

2020/03/31 - [애드센스] - 애드센스 광고 적용하는 방법과 광고를 다르게 만드는 방법

2020/03/15 - [애드센스] - 애드센스 광고 해상도에 따라 다르게 만드는 방법

2020/02/03 - [애드센스] - 애드센스 광고 효율적인 형태는 어떤 것일까요

반응형

을 찾습니다.

위에 넣으면은 본문 상단, 아래에 코드를 넣으면 본문 하단에 광고가 노출됩니다.

이 코드를 보통은 스킨 편집에 넣으라고 합니다.

왜 그래야 하는지 생각해 보셨나요.

아마 티스토리에서 애드센스 광고 지침서를 읽어보신 분은 안 계실 겁니다.

누군가가 스킨 편집을 분석해 보니 그 자리더라 하는 것인데

그냥 플러그인 애드센스 반응형에 넣으면 됩니다.

위 화면도 플러그인으로 넣은 것인데 잘 나오죠.

그리고 광고 두 개를 배치한 코드를 플러그인으로 넣으면

더 좋은 점이 있습니다.

화면이 축소되었을 때 광고가 다른 자리를 침범하는 것이 아닌 가로 스크롤 바가 나옵니다.

스크롤 바가 나오는 것은 이 한 가지 상황에서만 해당하네요.

저도 처음 봤습니다.

스킨 편집으로 광고를 넣었을 때나 한 개짜리 광고를 플로그인으로 넣었을 때는 가로 스크롤 바가 나오지 않습니다.

더 재미있는 것은 광고가 두 개 나오다가 광고 하나가 두 개 자리를 차지할 때도 있네요.

랜덤으로 두 개 광고가 나왔다가 하나가 나왔다가 하는데 재미있습니다.

테스트해 볼 가치가 있는 코드네요.

위 코드 중

data-full-width-responsive="false"

false로 설정하면 모바일에서 꽉 찬 광고가 아닌 여백이 있고 박스 선이 생기는 이쁜 광고가 노출됩니다.

본문 상단 광고 두 개 배치는 많은 분이 사용하지만, 애드센스 정책에서 허용 여부는 알 수 없다고 하니 참고하세요.

그리고 이전 테스트한 내용으로는

광고 두 개를 배치하면 왼쪽 광고가 8~90% 클릭을 독점합니다.

그래서 두 개의 광고를 따로 만들어서 실적관리를 하는 것이 좋습니다.

하나의 광고로 좌우 두 개로 배치하더라도 같은 내용의 광고가 나올 때도 있지만 보통은 다르게 나옵니다.

같은 광고로 양쪽으로 배치하는 것이나 두 개의 광고를 배치하는 것은 광고내용과는 상관없습니다.

2020/03/31 - [애드센스] - 애드센스 광고 적용하는 방법과 광고를 다르게 만드는 방법

2020/03/15 - [애드센스] - 애드센스 광고 해상도에 따라 다르게 만드는 방법

2020/02/03 - [애드센스] - 애드센스 광고 효율적인 형태는 어떤 것일까요