카테고리별 다른 애드센스 광고 넣기 [자바스크립트]

이번에는 티스토리 블로그를 이용하시면서 애드센스 광고로 수입을 내시는분들을 위한 꿀팁입니다. 바로 자바스크립틑를 이용해서 상황에 맞게 최적의 광고를 게제하는 방법에 대해 알아보도록 하겠습니다. 사실 저도 자바스크립트를 잘 사용하지는 못하지만 검색하고 여러 시행착오를 격어서 현재 실제 사용하는 방법이니 여러분들도 참고하시면 좋을듯합니다. 기본적으로 적재적소에 광고를 삽입할줄 안다는 전제하에 설명하도록 하겠습니다. 기본적으로 광고삽입하는 방법은 검색하시면 다 나오니 생략합니다.

 

 

 

 

 

 

1. 알아두면 좋은 팁 - 생략해도 되는 광고코드

 

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-****************"
     crossorigin="anonymous"></script>
<!-- 본문상단광고 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-****************"
     data-ad-slot="**********"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

기본적인 광고 코드는 위와 같습니다. 

 

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-****************"
     crossorigin="anonymous"></script>

 

여기서 중요한것은 상단에 위와같은 코드가 있습니다. 이 코드는 딱 1번만 사용하시면 됩니다. 광고를 4번 사용해야 한다면 처음 광고에만 넣으면 됩니다. 이후에는 생략하셔도 되는 코드입니다. 넣어도 상관은 없지만 시간이 딜레이되는 단점이 있기 때문에 생략하시는 것이 좋습니다.

 

 

 

2. 모바일과 pc 에서 다른 광고 넣기

 

 

● 준비물

광고코드 중에 아래와 같은 코드 부분이 있습니다.

 

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-****************"
     data-ad-slot="**********"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

 

이것을 아래와 같이 수정해 놓습니다.

 

<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-****************" data-ad-slot="**********"
     data-ad-format="auto" data-full-width-responsive="true"></ins>

 

"엔터" 와 "공백"을 지워주면 위와같은 코드가 완성됩니다.

 

위와같은 광고코드가 2개 준비되어 있으면 됩니다.

 

자 준비물이 준비되었다는 가정하에 이제 광고를 넣는 방법에 대해 알려드리도록 하겠습니다.

 

먼저 광고를 삽입할곳에 

 

<div id="ad_1" style="width:100%;text-align:center;"></div>

 

요런 html 을 삽입합니다. (id 값이 "ad_1" 이라는점을 기억하세요)

 

그다음 티스토리 html 편집창에서  </body> 바로 위에 아래 코드를 삽입하신후

아까 준비해 두라고한 <ins ~~~~</ins> 코드를  제가 넣어둔 코드와 바꿔치기 하시면 됩니다.

 

상단이 pc 광고이고 하단이 모바일 광고가 됩니다.

해석하면 화면넓이가 789 이상이면 상단에 넣어둔 광고를 송출하고 그렇지 않으면 하단에 넣어둔 광고를 송출하라는 의미가 되겠습니다

 

<script>
if(window.getWindowCleintWidth()>=789){	
$("#ad_1").append('<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-****" data-ad-slot="****" data-ad-format="auto"  data-full-width-responsive="true"></ins>');
} else {
$("#ad_1").append('<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-****" data-ad-slot="****" data-ad-format="auto" data-full-width-responsive="true"></ins>');	
}
(adsbygoogle = window.adsbygoogle || []).push({});	
</script>

 

 

 

 

3. 본문하단광고 카테고리별 다른 광고 송출하기

 

 

이번에는 조금 응용해서 본문하단에 카테고리별 다른 광고를 송출해보도록 하겠습니다.

 

 

만약  어플소개,정보나라,건강나라 라는 세가지 카테고리가 있다고 가정해보겠습니다. 

 

<script>
var CN = $(".category").eq('0').text().trim();	
if (CN == "어플소개") {
		$('.container_postbtn').before( $( '<div style="text-align:center;margin:80px 0 10px 0;"><ins class="adsbygoogle"  style="display:block"  data-ad-client="ca-pub-****"  data-ad-slot="****"  data-ad-format="auto"  data-full-width-responsive="true"></ins></div>' ) );	
} else  if (CN == "건강나라") {
		$('.container_postbtn').before( $( '<div style="text-align:center;margin:80px 0 10px 0;"><ins class="adsbygoogle"  style="display:block"  data-ad-client="ca-pub-****"  data-ad-slot="****"  data-ad-format="auto"  data-full-width-responsive="true"></ins></div>' ) );		
} else {
		$('.container_postbtn').before( $( '<div style="text-align:center;margin:80px 0 10px 0;"><ins class="adsbygoogle"  style="display:block"  data-ad-client="ca-pub-****"  data-ad-slot="****"  data-ad-format="auto"  data-full-width-responsive="true"></ins></div>' ) );	 
     }		
(adsbygoogle = window.adsbygoogle || []).push({});	
</script>

 

 

위 코드를 복사해서 티스토리 html 편집창에서  </body> 바로 위에 위 코드를 삽입하신후

 <ins ~~~~</ins> 부분 세군데만 자신의 광고코드로 바꿔치기 하시면 됩니다. 

 

 

var CN = $(".category").eq('0').text().trim();

설명하면 class 값이 "category" 인 첫번째 텍스트를 공백없이 가져와서 CN 이라는 변수에 담습니다.

 

 

북클럽 스킨의 경우 모든 글 상단에 카테고리이름이 나오게 되어 있습니다. 위 이미지 참고하세요.

 

 

 

F12 개발자 모드에서 그곳을 확인해보면 class 값이 "category" 인것을 확인하실수가 있습니다.

 

만약 북클럽 스킨이라면 저와 동일한 방법으로 카테고리명을 가져올수가 있을것입니다. 하지만 스킨이 다르시다면 다르게 코딩을 하셔야 할것입니다.

 

그리고 본문 하단에 넣는 핵심포인트는 아래 소스 때문입니다.

 

$('.container_postbtn').before

 

해석하면 CLASS 값이 "container_postbtn" 인곳을 찾아서 그것 바로 앞에다가 광고를 넣으라는 뜻입니다.

북클럽 스킨의 경우 본문바로 하단에 공감버튼이 있습니다. 공감버튼의 CLASS 값이 "container_postbtn" 이기 때문에

다시 해석하면 공감버튼 바로 위에 광고를 넣으라는 의미 입니다. 

 

 

 

 

4. H2 테그가 첫번째 세번째.. 홀수일때만 광고송출하기

 

 

본문에 H2 테그(소제목)를 이용해서 포스팅을 하시는분들이 많으실겁니다. 바로 구글 검색노출을 위해서 구글 SEO에 맞추어서 포스팅을 하시는분에게는 좋은 꿀팁이 될것 같습니다. 아마 서식을 이용해서 포스팅 할때 마다 광고코드를 삽입하시는분들이 많으실텐데요. 더 쉽고 편하게 광고를 일괄적으로 삽입하는 방법이 있습니다. 

 

 

<script> 
var numTag = $(".entry-content h2").length; 
if (numTag > 0) { 
 for (var i = 0; i < numTag; i++) { 
  if (i % 2 == 0) { 	
$(".entry-content h2").eq(i).after($('<div style="text-align:center;margin:80px 0 10px 0;"><ins class="adsbygoogle"  style="display:block"  data-ad-client="ca-pub-****"  data-ad-slot="****"  data-ad-format="auto"  data-full-width-responsive="true"></ins></div>'));
(adsbygoogle = window.adsbygoogle || []).push({});	 
  } 
 } 
} 
</script>

 

위 코드를 복사해서 티스토리 html 편집창에서  </body> 바로 위에 위 코드를 삽입하신후

 <ins ~~~~</ins> 부분 한군데만 자신의 광고코드로 바꿔치기 하시면 됩니다. 

 

 

해석하면

var numTag = $(".entry-content h2").length; 

 

H2 테그를 찾아서 H2 테그가 사용된 갯수를 변수에 담습니다.

(북클럽스킨일 경우에만 작동합니다.) 

 

if (numTag > 0)

H2 테그의 갯수가 최소 1개 이상일때 이 스크립트는 작동이 됩니다.

 

for (var i = 0; i < numTag; i++) { 

자바스크립트의 반복문입니다. H2테그를 0부터 최대갯수까지 순차적으로 변수i에 넣어 실행시키는 반복문입니다.

 

if (i % 2 == 0)

변수i를 2로 나눈 나머지값이 0일 경우 즉 다른말로 하면 i가 짝수일경우

(하지만  H2 테그가 1개 있을경우 numTag 값은 0을 반환하고 2개이면 1을 반환하므로 실제적으로는 홀수일경우가 됩니다.)

 

$(".entry-content h2").eq(i).after

H2테그 바로 뒤에 광고를 송출하라는 의미 입니다.

 

 

이렇게 해서

 

모바일과 pc 에서 다른 광고 넣기

본문하단광고 카테고리별 다른 광고 송출하기

H2 테그가 첫번째 세번째.. 홀수일때만 광고송출하기

 

이렇게 세가지 방법에 대해 알려드렸습니다. 이 세가지를 확실하게 이해하게 되면 광고를 내 마음대로 필요한곳에 삽입하는데 아무런 어려움이 없을겁니다. 

 

북클럽 스킨을 기준으로 설명을 했지만 잘 이해를 하셨다면 응용해서 다른 스킨에 적용하는것은 그리 어렵지 않을것입니다.

 

광고는 카테로리별로 다르게 송출하는것이 광고단가를 높이는데 도움이 됩니다. 그리고 pc 보다는 모바일에서 단가가 더 높습니다. 따라서 하나의 블로그에 다양한 주제의 카테고리가 있다면 위 방법을 이용해서 카테고리별로 다른 광고를 송출하는것에 단가를 높이는 방법이 되겠습니다. 그럼 오늘 포스팅은 여기 까지 하도록 하겠습니다. 행복한 하루 되세요~ ^^