티스토리 수익 기능 적용 후 상단 광고 2개 삽입하는 방법

수익 기능을 적용하기 전에는 애드센스 플러그인을 통해 자유롭게 상단과 하단 광고를 설정할 수 있었지만 적용 후에는 광고 크기나 배치를 마음대로 설정하지 못하기 때문에 조금 불편한 부분이 있습니다.

특히 저는 상단 광고 2개를 사용했었는데, 수익 기능을 적용하니 고정적으로 1개가 출력되는 부분이 상당히 마음에 들지 않았습니다. 그래서 수익 기능에서 애드센스를 비활성화 한 후 티스토리의 상단/하단 광고를 수동으로 삽입하여 기존처럼 본문 상단 광고 2개, 모바일에서 보면 1개로 노출되는 코드를 사용하고 있습니다.

<!-- 상단 광고 2개 모바일 1개 -->
<div style="text-align: center; margin-bottom: 15px;">
<style>
.adsbygoogle.post-top-first {display:block}
.adsbygoogle.post-top-second {display:none}
@media (min-width: 768px) {
.adsbygoogle.post-top-first {display:inline-block;min-width:336px;max-width:336px;width:100%;height:280px;}
.adsbygoogle.post-top-second {display:inline-block;margin-left:20px;min-width:336px;max-width:336px;width:100%;height:280px;}
}
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle post-top-first"
     data-ad-client="■"
     data-ad-slot="★"
     data-ad-format="rectangle"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<ins class="adsbygoogle post-top-second"
     data-ad-client="■"
     data-ad-slot="★"
     data-ad-format="rectangle"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- 상단 광고 2개 모바일 1개 -->
애드센스 상단 PC 2개, 모바일 1개.txt
0.00MB

사용 방법은 간단합니다. 위의 코드가 적혀있는 코드 txt 파일을 다운받으신 후 코드를 수정하시면 되는데요. ■칸에는 ca-pub-번호를 동일하게 입력해주시면 되고 ★에는 상단에 들어갈 디스플레이 광고 코드 2개를 각각 다르게 넣어주시면 됩니다.

수정이 완료되었다면 티스토리-스킨편집-HTML 영역에서 [##_article_rep_desc_##]를 검색하신 후 해당 코드 바로 위에 붙여넣어주시면 됩니다. [##_article_rep_desc_##]바로 위에 코드를 삽입했다면 본문 상단 광고, 아래에 삽입하면 본문 하단 광고로 적용됩니다.

여기서 참고하셔야 할 부분은 [##_article_rep_desc_##]를 검색했을 때 스킨마다 2개 혹은 3개가 검색이 될텐데, 코드를 넣고 적용해보신 후 광고가 노출되는지 노출되지 않는지로 확인해보시면 됩니다. 프라치노 스킨을 기준으로는 2번째 있는 코드에 적용하시면 됩니다.

현재 저는 수동으로 삽입한 하단 광고를 일치하는 콘텐츠 광고로 적용했는데, 꼭 여기서 코드를 넣지 않아도 됩니다. 애드센스 플러그인은 사라졌지만 아직 살아있는 텐핑 플러그인을 이용해서 본문 하단에 애드센스 광고 코드를 삽입하는 방법도 있으니 참고해보시길 바랍니다.