티스토리 본문 중간에 애드센스를 쉽게 삽입하는 방법

블로그 본문 중간에 들어오는 광고의 클릭률이 높다는 이야기는 전부터 익히 들어 왔으나, 아쉽게도 현재 티스토리의 구조상 스킨상에서 광고 위치를 고정적으로 지정할 수가 없다. 사이드 바다나 본문 상단, 하단에 애드센스를 넣는 것 처럼 포스팅만 하면 자동으로 광고가 적용되면 편할텐데, 현재로서는 글을 쓴 후에 수작업으로 본문 중간 중에서 광고를 넣고자 하는 위치에 직접 수동으로 입력하는 방법 밖에 없다. 이는 아래와 같이 글을 작성할 때 "html" 보기 옵션을 선택한 후에 본문 적당한 위치에 애드센스 광고 코드를 직접 삽입하는 방법이다.

위와 같이 한다. 그런데 매번 이렇게 광고를 수작업으로 입력하는 것은 번거롭고, 무엇보다도 나중에 광고를 변경하거나 삭제하고 싶을 때 일일이 포스팅마다 손을 대야 한다는 문제점이 있다. 이를 해결하기 위해서 JavaScript 를 이용해 보자.

일단 티스토리 스킨 skin.html 에 아래와 같이 코드를 넣는다. 이 코드는 아무곳에 넣어도 상관이 없는데 보통 </body> 위에 넣는 것을 권한다.

 <div id="abc">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 블로그 중간 광고 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-xxx"
     data-ad-slot="xxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<script>
document.getElementById('myblog').appendChild(document.getElementById('xyz'));
</script>

이제 블로그에 포스팅 할 때마다 html 상태에서 본문 중앙의 광고를 삽입하고 싶은 위치마다 <div id="myblog"></div> 를 입력하면 해당 위치에 광고가 나온다.

 

이 방법을 이용해서 손쉽게 본문 내 삽입 광고를 관리할 수 있으며 광고를 변경하거나 삭제하고 싶을 때는 skin.html 의 광고 코드만 변경하면 되므로 무척 편리하다.