티스토리 본문 중간에 자동으로 애드센스 광고 넣기

티스토리를 사용하면서 본문 중간에 애드센스를 넣는 것은 너무나도 번거로운 일이었다. 글을 수정하면 열심히 삽입했던 광고가 사라지기도 하고, 또 글만을 적는 것이 아니라 매번 어디에 넣을지를 고민하는 일은 글을 적는 시간을 늘리는데 한몫을 했다.

 

그래서 어떻게 하면 자동으로 광고를 넣을 수 있을지 고민을 했다. JQuery를 사용했으며, 초안을 짜기까지 다음의 블로그 글을 참고하여, 보다 효율적으로 작성하였다. ( 참고 : https://jjisso.tistory.com/242 )

 

현재 사용하고 있는 스킨은 [반응형 #1]이며, 해당 스킨을 그대로 사용하고 있는 경우에는 아래의 코드를 그냥 복사해서 사용해도 된다.

1. 코드 컨셉

다음의 스크립트는 다음과 같이 동작한다.

 

1. 본문에 나오는 원하는 HTML Tag의 개수를 파악 한다. (e.g. :  div, p, h3, h2 등등)

2. 해당 Tag가 1개 이상 존재하면 Tag의 앞부분에다가 애드센스를 자동으로 삽입하겠다

 

해당 코드들은 모두 </body>의 바로 위 부분에 붙여넣으면 된다. 왜냐하면 본문이 불러와지고 난 뒤에 가장 마지막에 실행이 되면 되기 때문이다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<script>
<!-- 태그의 개수를 확인합니다. -->
var num_h3 = $('.skin_view .area_view h3').length;

<!-- 태그가 1개 이상인 경우 실행합니다. -->
if(num_h3>0){
  for (var i = 1; i <= num_h3 ; i++) {
  	<!-- 저는 3개를 다른 것으로 넣고 싶어서 i % 3 을 사용했습니다. -->
    if(i % 3 == 1){
        $("h3").eq(i).before('<br><center><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="########" data-ad-slot="########"></ins></center>');
    }
    else if(i % 3 == 2){
        $("h3").eq(i).before('<br><center><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="########" data-ad-slot="########"></ins></center>');
    }
    else if(i % 3 == 0){
        $("h3").eq(i).before('<br><center><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="########" data-ad-slot="########"></ins></center>');
    }						
  }
}
</script>

<script>
	$('.adsbygoogle').each(function(){(adsbygoogle = window.adsbygoogle || []).push({});});
</script>

 

코드를 볼 줄 안다면 해당 코드만 보고서도 어떻게 진행해야 하는지를 알 수 있을 것이다. 만약 아니라면 다음을 같이 보자.

2. 실제 삽입해 보기 - 태그 개수 구하기

var num_h3 = $('.skin_view .area_view h3').length;

num_h3 변수는 태그의 개수가 몇 개인지 확인하기 위해 설정한 변수이다. 오른쪽에 있는 $() 형태의 함수를 통해서 어떤 위치에 있는 무슨 Tag를 볼지를 지정해준다. length는 개수를 의미한다.

 

위에서 언급한 $()는 JQuery에서 사용되는 함수로 특정 개체에 접근할 때 사용한다. 어떤 위치에 있는지 접근할 때에는 Id나 Class를 사용하는데, 각각 '#id_이름'  , '.class_이름' 과 같이 써서 사용하게 된다. Tag는 그냥 쓰면 된다.

Id    : $('#id_name') 
class : $( '.skin_view')
tag   : $( 'h3')  ,  $('div')

 

여러 개를 뛰어서 쓸 경우에는 1개씩 구조의 안으로 들어가겠다는 의미이다. 즉, $('.skin_view .area_view h3')의 의미는 skin_view라는 class밑에 있는 area_view라는 class의 아래에 있는 h3태그를 보겠다는 의미이다.

 

티스토리 기본 스킨

예시를 보자. 본문이 나오는 article_rep_desc 부분을 찾아서 해당 부분을 잘라온 것이다. 실제 각자의 티스토리에 적용시키고자 할 때에도 해당하는 부분을 찾을 필요가 있다. 왜냐하면 각자가 적용한 스킨에 따라 구조가 다를 수 있기 때문이다.

 

본문은 div class="area_view"로 둘러싸여 있다. 즉, 본문보다 1단계 위라는 의미가 된다. 그리고 area_view는 div class="skin_view"로 둘러싸여 있다. 위에서 사용한 코드의 의미는 해당하는 구조를 파악해서 가장 바깥 부분부터 차근차근 적어 나간 것이다.

 

개발자도구를 통해서 본 태그의 모습

다음으로는 태그 부분이다. 본문에서 나는 목차를 티스토리 편집기의 <제목2>로 설정하여 글을 적고 있다. 때문에 해당 부분의 CSS와 HTML을 보면 위와 같이 h3 태그를 가졌다고 나오게 된다. 나는 광고를 각각의 목차 앞에 넣고 싶기 때문에 h3를 택해서 진행하기로 했다.

 

해당 부분은 P 태그로 하는 방법도 있고, br 태그, h4 태그 등 다양하게 쓸 수 있다.

3. 실제 삽입해 보기 - if 구문

if 구문은 단순하다. 만약 num_h3 개수가 1개 이상이면 ( 1개, 2개, ..... ) if 구문 밑에 나오는 것들을 실행하겠다는 의미다. 나는 3개의 다른 애드센스를 넣어보고자 했기에 3개의 또 다른 if 구문을 넣었다. 만약 1개로만 하고 싶다면 따로 고쳐도 되고, 아니면 3개 부분에 들어가있는 광고 스크립트를 모두 동일한 것으로 바꾸면 된다.

$("h3").eq(i).before('광고스크립트');

광고 스크립트는 위의 인용문구에 있는 '광고 스크립트' 부분에 있다. 각자의 광고 코드에서 <ins> 블라블라 </ins>에 해당 부분으로 바꿔서 넣어주면 된다.

 

만약 본인이 사용할 때, h3 태그 말고 다른 태그를 사용했다면, $("h3")를 다르게 바꿔주면 된다. 예를들면 $(".area_view p") 이런 식으로 바꾸는 것도 가능하다.

 

또한 before를 바꾸는 것도 가능한데, 현재는 목차의 앞부분에 넣도록 되어있다. 이것을 다른 것으로 바꿀 수 있는데, 가능한 것들은 다음과 같다.

 

prepend : <h3>  [광고] 제목</h3>
append : <h3> 제목 [광고] </h3>
after     : <h3> 제목</h3>  [광고]
before  :  [광고] <h3> 제목</h3>

이렇게 나오게 되니 원하는데로 바꿔서 사용하면 될 것 같다.

4. 실제 삽입해 보기 - 자동으로 광고 개수 만큼 스크립트를 실행하기

마지막 $(.adsbygoogle) 구문은 해당하는 class를 가진 친구들의 경우, 해당 function을 실행하겠다는 것인데, 매번 광고를 넣을 때마다 같이 넣어주어야 했던 script 부분을 제거할 수 있게 만들어 주는 아주 유용한 친구이다. 해당 부분은 다른 분의 블로그를 첨부한다. ( https://blog.readiz.com/222 )

비동기 애드센스 최적화 삽입

 

 

이것으로 자동 삽입 방법과 관련된 포스팅을 마친다. 이제 너무 편하고 적절하게 광고가 자동으로 들어가서 기분이 좋다. 이 외에도 다른 부분들의 애드센스들을 최적화 해서 삽입해 봐야겠다.