티스토리 블로그 본문 중간에 자동 애드센스 광고 코드 넣기 (북클럽)

본문 중간에 광고가 나옵니다. 자동 광고, 스크립트 수동 코드, HTML 스킨 편집  방법을 사용할 수 있습니다.  여러 가지 방법 중에 HTML 편집으로 광고 코드를 적용하는 것이 매우 효과적입니다. 본문을 수정하지 않고 원하는 위치에 한 번에 광고를 넣을 수 있습니다. 

목차

 

---

티스토리 본문 중간에 자동 애드센스 광고 코드 넣기

 

티스토리 본문 중간에 자동 애드센스 광고 코드 넣기

 

 

 

본문에 영향을 주지 않고, HTML 스킨 편집을 이용해 원하는 위치에 광고 코드를 적용 할 수 있습니다. 매우 효과적인 방법입니다. 

 

 

 

 

---

 

구글 애드 센스 광고 본문에 넣는 3가지 방법

본문에 광고를 넣기 위해서는 자동 광고, 서식을 이용한 수동 광고, HTML을 이용한 코드 적용 방법이 있습니다. 

 

(1) 자동광고 방법은 본문에서 원하는 위치에 광고가 나오지 않는 문제점이 있습니다. 

(2) 수동광고 방법은 본문에 코드를 원하는 위치에 넣어야 하지만, 매번 원하는 위치마다 모두 넣어야 하는 번거로움과 본문이 수정되면 간혹 광고 코드가 사라져 최종적으로 광고가 나오지 않는 문제점이 있습니다. 

 

티스토리 블로그 구글 애드센스 자동 광고 설정 방법

티스토리 블로그 구글 애드센스 수동광고 설정 방법

 

따라서 HTML 스킨 편집을 이용하면 원하는 위치, 매번 넣는 불편함을 없애고 한 번에 광고를 넣을 수 있습니다. 

 

 

---

 

HTML 편집에서 Javascript 를 이용한 애드센스 광고 자동 삽입 (북클럽 스킨)

애드센스 광고 삽입코드 등록을 위해 블로그 관리자 페이지에서 스킨 편집 화면으로 이동합니다.  꾸미기> 스킨 편집을 클릭합니다. 

HTML 탭을 선택 후 페이지 하단으로 스크롤하여 </body> 태그 바로 위에 아래 코드를 삽입합니다.

 

 

 

 

---

 

코드 분석

 

코드는 다음과 같습니다. Javascript 를 이용한 광고 삽입의 또 하나의 장점은 나만의 로직 적용이 가능하다는 것입니다.

 

<!--구글 애드센스 본문 광고 삽입 -->
<script>
    var numTag = $("div.entry-content > div > h3").length;
    if (numTag > 0) {
        for (var i = 0; i < numTag; i++) {
            if (i % 2 == 0) {
                $("div.entry-content > div > h3").eq(i).before('<br><center><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6990171738322481" data-ad-slot="4490617960" data-ad-format="auto" data-full-width-responsive="true"></ins></center><br>');
            } 
        }
    }
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
    $(window).on('load', function() {
        $(".adsbygoogle").each(function() {
            (adsbygoogle = window.adsbygoogle || []).push({});
        });
    });
</script>
<!--구글 애드센스 본문 광고 삽입 끝-->

 

1. H3 태그개수 찾기 

원하는 HTML Tag의 개수를 파악합니다. (예: div, h2, h3, 이미지 등)

 

다음은 본문에서 H3의 제목 태그의 개수를 찾습니다. 

var numTag = $("div.entry-content > div > h3").length;

 

참고로 다음과 같이 서식을 이용해 h3 제목을 만들어서 글 쓰기를 할 수 있습니다. 

티스토리 블로그 서식 등록 및 글쓰기 꿀팁

 

 

 

2. 해당 Tag 가 1개라도 존재하면 광고 넣기

 

예를 들어 H3 제목이 4개가 있다면. eq(0),. eq(1),. eq(2),. eq(3)으로 표시됩니다. 광고를 너무 많이 표시하게 되면 애드센스 정책에 위반될 수 있기 때문에 제목의 전체 개수에서 짝수에 해당하는 광고만 표시하다록 적용했습니다. 

if(i%2 ==0) 은 짝수만 광고를 표시한다는 의미입니다. 

 if (numTag > 0) {
        for (var i = 0; i < numTag; i++) {
            if (i % 2 == 0) {
                $("div.entry-content > div > h3").eq(i).before('<br><center><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6990171738322481" data-ad-slot="4490617960" data-ad-format="auto" data-full-width-responsive="true"></ins></center><br>');
            } 
        }
    }

광고를 넣는 코드는 다음과 같습니다. 광고 스크립트에서 data-ad-client, data-ad-slot을 수정해야 합니다. 

        $("h3"). eq(i). before('광고 스크립트');  

 

 

참고로, h3 제목 이전에 광고를 표시하기 위해 before를 사용합니다. 

prepend : <h3>  [광고] 제목 </h3>
append : <h3> 제목 [광고] </h3>
after     : <h3> 제목</h3>  [광고]
before  :  [광고] <h3> 제목</h3>

 

 

 

3. 광고 출력

애드센스 광고를 실행합니다. 

<script>
    $(window).on('load', function() {
        $(".adsbygoogle").each(function() {
            (adsbygoogle = window.adsbygoogle || []).push({});
        });
    });
</script>

 

 

---

 

마무리

HTML 자바스크립을 이용해 광고를 넣는 방법은 매우 효과적입니다. 자동 광고 또는 본문에 직접 광고 코드를 넣는 방법은 장점보다 단점이 더 많은 것 같습니다. 

따라서 HTML 편집을 이용해 광고 코드를 넣는 것을 추천드립니다. 본문 수정 없이도 원하는 위치에 광고를 자동으로 넣을 수 있습니다. 

 

 

 

참고로 사용하는 스킨에 따라 코드가 달라질 수 있습니다.