티스토리 블로그 본문 중간에 구글 애드센스 광고 자동으로 삽입하기

Photo by Joshua Earle on Unsplash

블로그 글 본문에 삽입된 애드센스 광고

글의 전체 맥락을 해치지 않는다면 블로그 글 본문에 구글 애드센스 광고를 삽입해도 무방하다고 생각하는 편입니다. 글의 길이가 충분히 길고 제공하는 콘텐츠의 내용이 풍부하다면 본문 중간에 삽입된 광고는 블로그 운영자와 방문자 모두에게 도움이 될 거라 생각합니다. 

 

본문 중간에 삽입된 구글 애드센스 광고

애드센스 광고 삽입 방법

블로그 글 본문에 애드센스 광고를 삽입하는 방법은 여러가지가 있습니다. 1) 티스토리 구글 애드센스 플러그인을 활용하는 방법도 있고, 2) 서식이나 외부 콘텐츠를 이용해서 직접 광고 코드를 본문 내에 삽입하는 방법도 있습니다. 두 가지 방법 모두 맘에 안 드는 부분이 있습니다.

 

티스토리 애드센스 플러그인은 광고형태를 셋 중 하나를 골라야 한다.

구글 애드센스 플러그인의 경우 광고 삽입 위치를 내 마음대로 선택하는 것이 불가능 합니다. 광고 재게 위치를 본문 상단이나 하단 외에는 지정할 수가 없게 되어 있습니다. 대신 본문 수정이 불필요하다는 장점이 있긴 합니다.

 

본문 작성 시 직접 광고 코드를 삽입하는 경우의 문제점은 블로그 본문과 광고코드가 페이지 내에 정적으로 삽입이 된다는 문제가 있습니다. 향후 광고 코드를 수정하거나 제거하려면 본문에 삽입된 모든 코드를 한 땀 한 땀 찾아서 제거하거나 수정하는 수고를 해야 합니다.

Javascript 를 이용한 애드센스 광고 자동 삽입

티스토리 블로그는 순수 Javascript 나 jQuery 와 같은 외부 라이브러리 사용이 허용되어 있습니다. Javascript 를 이용하면 본문 내에 애드센스 광고를 자동으로 삽입하는 작업을 손쉽게 외부에서 처리 가능합니다. 본문의 구조를 분석해서 글의 단락마다 또는 글의 중간 지점 등 원하는 곳에 자동으로 광고를 삽입하는 코드 작성이 가능합니다.

 

티스토리는 Javascript 나 jQuery 사용이 가능하다.

Javascript 를 이용한 광고 삽입의 또 하나의 장점은 나만의 로직 적용이 가능하다는 것입니다. 본문의 내용이 길지 않은 경우는 광고를 삽입하지 않거나 본문의 중간 지점에만 하나의 광고를 사용하거나 글의 상단 1/3 지점과 하단 1/3 지점에 두 개의 광고를 게재한다거나 하는 자신만의 로직 적용이 가능합니다.

스킨 편집 창에서 javascript 를 삽입

애드센스 광고 삽입코드 등록을 위해 블로그 관리자 페이지에서 스킨 편집 화면으로 이동합니다. HTML 탭을 선택 후 페이지 하단으로 스크롤하여 </body> 태그 바로 위에 아래 코드를 삽입합니다.

<!--구글 애드센스 본문 광고 삽입 -->
<div id="google-ad-body" style="display:none">
	<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<ins class="adsbygoogle"
			 style="display:block;"
			 data-ad-client="ca-pub-6536748512xxxxxx"
			 data-ad-slot="394098xxxx"
			 data-ad-format="horizontal"
			 data-full-width-responsive="false"></ins>
</div>
<script>
	/* 본문 광고 삽입 */
	var centerPos = $("div.entry-content > div > h3").length / 2;
	if(centerPos > 0) {
		centerPos = Math.ceil(centerPos);
		$('#google-ad-body').show();
		$("div.entry-content > div > h3").eq(centerPos).before($('#google-ad-body'));
		(adsbygoogle = window.adsbygoogle || []).push({});
	} else {
		$('#google-ad-body').remove();
	}
</script>

 

위 코드에 적용된 아이디어는 다음과 같습니다.

• 광고 게재용 숨겨진 DIV 엘리먼트를 미리 생성, 위치는 페이지 최하단
• 본문에 사용된 h3 태그의 수를 카운트 (본문 단락을 나누는 기준)
• h3 태그의 수를 절반으로 나누어 광고 삽입 위치로 지정
• 광고 게재용 DIV를 본문 중간의 h3 태그 상단으로 이동시켜 광고 게재

광고 게재용 DIV 생성

애드센스 사이트에서 광고 단위 생성 후 광고단위 코드를 복사하여 수정하시면 됩니다. 광고가 출력될 DIV 엘리먼트를 display:none 속성을 주어 보이지 않도록 생성합니다.

<!--구글 애드센스 본문 광고 삽입 -->
<div id="google-ad-body" style="display:none">
	<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<ins class="adsbygoogle"
			 style="display:block;"
			 data-ad-client="ca-pub-653674851283xxxx"
			 data-ad-slot="394098xxxx"
			 data-ad-format="horizontal"
			 data-full-width-responsive="false"></ins>
</div>		

본문의 중간 위치를 탐색

본문 콘텐츠의 중간위치를 알아내기 위해서 본문에 사용된 <h3> 태그의 수를 카운트했습니다. 저는 본문 작성 시 <h3> 태그를 사용하여 소제목으로 단락을 구분하고 있습니다. 소제목을 사용하지 않거나 <h3> 태그를 사용하시지 않는 경우에는 글 본문의 <p> 태그의 수를 세거나 본문에 삽입된 이미지의 수를 센다거나 하는 방법으로 변경 가능합니다.

/* 방법1 : 본문의 소제목의 수를 카운트 */
var centerPos = $("div.entry-content > div > h3").length / 2;
    
    
/* 방법2 : <p> 태그의 수를 카운트 */
var centerPos = $("div.entry-content > div > p").length / 2;
    
    
/* 방법3 : <img> 태그의 수를 카운트 */
var centerPos = $("div.entry-content figure > span > img").length / 2;
    

애드센스 DIV를 본문 중간으로 이동시킨 후 광고 출력

본문의 중간 위치를 찾았으므로 광고 DIV를 해당 위치로 이동시켜서 광고를 출력시키는 코드를 실행합니다.

// 광고 DIV 를 보이게 만들고
$('#google-ad-body').show();

// 광고 DIV 를 중간 위치로 이동
$("div.entry-content > div > h3").eq(centerPos).before($('#google-ad-body'));

// 애드센스 광고 출력
(adsbygoogle = window.adsbygoogle || []).push({});

글 보기 화면이 아닌 경우는 광고 DIV 제거

블로그 홈 화면이나 목록 화면인 경우에는 본문 삽입용 광고는 불필요합니다. 본문 삽입용 광고 DIV를 제거합니다.

// 본문 삽입용 광고 DIV 제거
$('#google-ad-body').remove();