스크립트로 티스토리 본문 애드센스 광고 자동 삽입

안녕하세요

오늘 작성할 포스팅은

 

스크립트를 이용한 티스토리 본문에 애드센스 광고 자동 작성에 관한 글입니다.

 

다들 서식을 이용한 수동 작성을 통한 광고 노출을 하실텐데요

 

보다 편리하게

애드센스 광고 삽입을 할 수 있는 방법을 알려드리도록 하겠습니다.

 

1. 애드센스

애드센스 > 광고>개요> 광고단위 기준 을 통한 광고생성 을 하게되면 붙여넣을 수 있는 코드가 생성이 되는데요

 

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4773226509652091"
     crossorigin="anonymous"></script>
     
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="본인 애드센스 아이디"
     data-ad-slot="5980491047"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

해당 소스코드가 나오실 겁니다.

 

해당 소스 코드를 이제 티스토리로 이동하여 붙여넣어 줘야하는데요

 

2. 티스토리

 

티스토리 관리 > 꾸미기> 스킨편집 으로 가셔서 

 

우측에 있는 html편집을눌러줍니다.

 

html편집을 눌러주게되면

이런식으로 코드 편집기가 나오는데

제가 미리 짜놓은 코드가 나오는데

 

결론부터 말씀드리자면 

</head> 바로 밑에 해당 코드를 입력 하시면됩니다.

 

자세히 알고 싶은분들을 위해서 

해당 코드별로 설명을 드리도록 하겠습니다.

 

3. html 코드편집

<!--구글 애드센스 본문 광고 삽입 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=애드센스아이디"
     crossorigin="anonymous"></script>

해당 스크립트가 있어야지만 구글 애드센스의 광고를 불러올수 있습니다.

 

<script>
	
	//콘텐츠가 모두 load되었을대 스크립트 실행
	$('#content').ready(function(){
		/* 본문 광고 삽입 */
		//#content > div.inner > div.entry-content > div > hr 의 갯수를 찾겠다
		var centerPos = $("#content > div.inner > div.entry-content > div > hr").length;
		
		//만약에 본문 hr태그를 가진 갯수가 0개보다 크다면
		if(centerPos > 0) {
			
			//그 hr태그 갯수만큼 반복을 하겠다.
			for (var i = 0; i < centerPos ; i++) {
				
				//저같은 경우에는 3의 배수의 경우에만 광고가 나오게 하기위해
				//3으로 나누었을대 0으로 딱떨어지는 경우에만 광고스크립트를 적용하였습니다.
				if(i%3 == 0){
					//해당 hr태그 전에 광고 html을 삽입
					$("#content > div.inner > div.entry-content > div > hr").eq(i).before('</br><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="본인애드센스아이디" data-ad-slot="7072374578"></ins>');	
					//해당 삽입된 광고 html js로 활성화
					(adsbygoogle = window.adsbygoogle || []).push({});
				}
				
			}
			
		}		
});
</script>

해당 코드별로 각각 주석을 달아놓았고요

저같은 경우 포스팅을 할때 각 제목에 hr코드가 달린 코드를 사용 하여 글을 작성합니다.

 

따라서 정리하자면

 

1. 콘텐츠 영역의 hr태그 갯수를 구함

2. 콘텐츠 영역의 hr태그 갯수만큼 반복

3. 콘텐츠 역역의 hr태그 3배수의 경우 애드센스 html 삽입

4. 해당 삽입 html 광고 활성화를 위한 window.adsbygoogle 스크립트 활성화

 

중요한 부분은 4번이 되겠네요

제가 삽입한 광고의 갯수만큼 저 스크립트를 실행해줘야지만

광고가 활성화 되서 나오게 됩니다.

 

감사합니다.