본문 하단 다른글 보기 좌측에 애드센스 넣는 법

본문 하단 좌측 애드센스 삽입

  벌써 세번째네요. 애드센스 관련 질문이 많아 이번에 정리하고 가려고 아예 작정하고 세번째 포스팅을 합니다. 이번에는 많은 분들이 물어보시는 다른글 더보기 좌측에 광고를 삽입하는 방법인데요, 이것이야말로 JS를 사용하지 않으면 답이 없습니다. CSS를 쓰거나 기타 반응형 광고단위를 사용하신다 하더라도, 티스토리에서 애드센스 광고를 넣을 수 있는 방법은 [$$_article_rep_desc_$$]의 상단이나 하단에 넣는 것이기 때문이죠. 본문 사이에 일반적인 방법으로 광고를 삽입하는 것은 자바스크립트를 제외하면 불가능합니다. 그래서 특히 이 부분에 대해 궁금해하시는 분들이 많은 것 같습니다. 일단 시작하기 전에, 이 방법은 Bootstrap 기반 스킨에서만 유효합니다. class에 col-md-6속성을 사용하기 때문인데요, 물론 조금 손을 보시면 일반 스킨에서도 사용가능하실 것 같습니다만 제가 일일히 커스텀할수는 없어서.. 바로 적용하는 것은 Bootstrap기반 스킨을 사용하셔야만 가능합니다. 

  이것이 문제의 광고배치인데요, 티스토리 소스를 많이 보신 분들이면 아시겠지만 [$$_article_rep_desc_$$]라는 것이 본문부터 시작해서 통째로 다른글 더보기까지 한꺼번에 출력이 되는 부분이라서, 그 사이에 광고를 넣기가 참으로 애매합니다. 이 부분에 광고를 배치하기 위해서는 Javascript로 강제삽입을 해야합니다. 역시 이전 강의를 한번 참고해보시는게 다음 코드 이해에 도움이 되실 것입니다.

2014/04/19 - [반응형 티스토리/Tistory] - 반응형 애드센스 안쓰고 원하는 애드센스 노출시키기

  서론이 길었으나 코드를 그냥 알려드리기만 하면 작동방식을 모르고서는 커스텀하기 쉽지 않으실 것이라 판단해서 그런 것이니 잡설이 좀 길어도 양해 부탁드립니다. 일단 아래 코드를 [$$_article_rep_desc_$$] 하단에 넣으시면 됩니다.

	
<script>
	if(window.getWindowCleintWidth()>=768){
		var adTmp = '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px;margin:auto" data-ad-client="" data-ad-slot=""></ins>';
		document.getElementsByClassName('another_category')[0].className+=" col-md-6";
		document.getElementsByClassName('another_category')[0].style.clear="none";
		document.getElementsByClassName('another_category')[0].outerHTML='<div style="margin:0 auto;"><div class="col-md-6" style="margin-top:20px; padding:0; text-align:center;">'+adTmp+'</div>'+document.getElementsByClassName('another_category')[0].outerHTML+'<div class="clearfix"></div></div>';
		(adsbygoogle = window.adsbygoogle || []).push({});
	}
</script>
	

  동작원리는 알고보면 간단합니다. 다른글 보기라는 티스토리 요소의 Class가 another_category임을 이용하는 것이죠. 이것(another_category class)을 Javascript로 찾은 후 이 앞부분에 adTmp라는 변수에 들어있는 코드(광고)를 삽입하는 것입니다. 구조 자체는 저번 코드와 비슷해서, window.getWindowCleintWidth()함수도 볼 수 있습니다. 이것이 클라이언트 창 크기를 감지하여 특정 창 크기에서만 광고를 넣게 됩니다. 제가 세팅해놓은 값은 모바일과 PC를 구분짓는 값인 768px입니다. 즉, 해당 코드를 적용하시면 해당 블로그에 접속하는 방문자의 브라우저 창 크기가 768px 이상이여야 광고가 출력되게 됩니다. (반응형 스킨에 맞추어 제작한 것이고, 그대로 모바일에 출력되면 광고 크기 문제 등이 발생하기 때문에 안뜨도록 하였습니다)

  오히려 코드가 복잡해서 설명드릴 것이 더 없는 것 같네요. 적용하기 위해 수정할 점은 아래와 같습니다.

수정하셔야 할 부분

1. var adTmp 우측에 본인의 광고 코드를 넣으시면 됩니다. 

  광고코드 중 <script async 부터 </ins>까지 넣으시면 됩니다.

2. </script>는 <\/script>로 바꿔서 넣으세요!

  이 부분을 지키지 않으시면 스크립트 에러로 제대로 광고가 출력되지 않습니다.