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

 

 

 

AND