티스토리 댓글에 애드센스 광고 자동 삽입하는 방법

블로그를 운영하면서 가장 중요한 목표 중 하나는 바로 수익화입니다. 특히, 티스토리처럼 자유도가 높은 플랫폼에서는 직접 스크립트를 삽입하여 수익을 극대화할 수 있는 다양한 방법을 시도해볼 수 있습니다.오늘은 티스토리 블로그를 기준으로, 댓글란에 자동으로 애드센스 광고를 삽입하는 방법을 소개하고자 합니다.이 방법을 적용하면, 방문자가 댓글을 읽을 때 자연스럽게 광고를 보게 되어 클릭률(CTR)과 수익 향상에 큰 도움이 될 수 있습니다.

자바스크립트란 무엇인가?

웹사이트를 만들 때 가장 기본이 되는 기술은 크게 세 가지입니다. 바로 HTML, CSS, 그리고 JavaScript입니다. 이 중 자바스크립트는 웹페이지에 동적인 기능을 추가해주는 프로그래밍 언어입니다.

  • HTML은 웹페이지의 구조를 만들고,

  • CSS는 **웹페이지의 꾸미기 디자인을 담당하고,

  • JavaScript는 웹페이지의 동작을 제어합니다.

예를 들어, 버튼을 클릭하면 창이 열리거나, 스크롤할 때 애니메이션이 나오거나, 폼을 제출할 때 오류를 체크하는 기능 모두 자바스크립트로 구현할 수 있습니다.

자바스크립트와 자바(Java)의 차이점은?

이름이 비슷해서 혼동할 수 있지만, JavaScript와 Java는 완전히 다른 언어입니다.

  • Java는 주로 대규모 서버 프로그램, 앱 개발에 사용되고,

  • JavaScript는 웹 브라우저 안에서 동작하는 가벼운 언어입니다.

따라서 티스토리 블로그, 워드프레스 등 웹사이트 작업을 할 때 사용하는 건 JavaScript입니다.

왜 티스토리 댓글란에 애드센스 광고를 넣어야 할까?

블로그 수익을 높이려면 다양한 위치에 광고를 배치하는 것이 중요합니다. 특히, 댓글란은 방문자들이 글을 읽고 나서 머무르는 공간이기 때문에, 광고를 자연스럽게 삽입하면 클릭률을 높이고 수익을 극대화할 수 있습니다. 하지만 매번 수동으로 댓글 사이에 광고를 넣을 수는 없습니다. 이럴 때 필요한 것이 바로 자바스크립트를 이용한 자동 광고 삽입입니다.

티스토리 댓글란에 자동으로 애드센스 광고를 삽입하는 자바스크립트 코드

아래는 댓글 목록 중 3개마다 한 번씩 광고를 삽입하는 코드입니다.

<script>
document.addEventListener("DOMContentLoaded", function () {
  insertAdsInReplies();

  function insertAdsInReplies() {
    const commentItems = document.querySelectorAll('li.tt-item-reply.rp_general');
    const adSlotIds = ['1234567890', '9876543210', '1122334455']; // 자신의 광고 슬롯 ID 입력
    let adIndex = 0;
    let adCount = 0;

    commentItems.forEach((item, index) => {
      if ((index + 1) % 3 === 0 && adIndex < adSlotIds.length) {
        const nextEl = item.nextElementSibling;
        if (!(nextEl && nextEl.classList.contains('reply-ad-unit'))) {
          const wrapper = document.createElement('li');
          wrapper.className = 'reply-ad-unit';
          wrapper.style.cssText = 'list-style: none; margin: 25px 0; min-height: 90px; text-align: center;';

          const ins = document.createElement('ins');
          ins.className = 'adsbygoogle';
          ins.style.cssText = 'display: block; width: 100%; min-height: 100px;';
          ins.setAttribute('data-ad-client', 'ca-pub-자신의-애드센스아이디'); // 자신의 ca-pub 입력
          ins.setAttribute('data-ad-slot', adSlotIds[adIndex]);
          ins.setAttribute('data-ad-format', 'auto');
          ins.setAttribute('data-full-width-responsive', 'true');

          wrapper.appendChild(ins);
          item.insertAdjacentElement('afterend', wrapper);

          adIndex++;
          adCount++;
        }
      }
    });

    if (window.adsbygoogle) {
      document.querySelectorAll('.reply-ad-unit ins.adsbygoogle').forEach(el => {
        try {
          (adsbygoogle = window.adsbygoogle || []).push({});
        } catch (e) {}
      });
    }

    if (adCount === 0 && commentItems.length >= 3) {
      setTimeout(() => {
        insertAdsInReplies();
      }, 1000);
    }
  }

  const observeComments = () => {
    const observer = new MutationObserver(() => {
      insertAdsInReplies();
    });
    const commentContainer = document.querySelector('.tt-comment-cont');
    if (commentContainer) {
      observer.observe(commentContainer, { childList: true, subtree: true });
    }
  };

  observeComments();
});
</script>

이 코드가 하는 역할 요약

  • 댓글 목록 중 3개마다 광고 삽입

  • 댓글이 새로 추가되거나 수정될 때도 자동으로 광고 삽입

  • 애드센스 광고가 정상적으로 노출되도록 로딩 처리

코드를 적용하는 방법 (티스토리 기준)

  1. 애드센스 광고 단위 만들기

    • 구글 애드센스에 접속하여 원하는 광고 단위를 생성합니다.

    • 광고 단위 생성 시 광고 클라이언트 ID (ca-pub-xxxxxxxxxxxx)와 광고 슬롯 ID를 복사합니다.

  2. 위 자바스크립트 코드 수정

    • data-ad-client 부분에 본인의 광고 클라이언트 ID를 입력합니다.

    • adSlotIds 배열 안에 생성한 광고 슬롯 ID들을 각각 입력합니다.

  3. 티스토리 블로그에 삽입

    • 티스토리 관리자 → 스킨 편집 → HTML 편집 메뉴로 이동합니다.

    • </body> 태그 바로 위에 위 코드를 삽입합니다.

  4. 적용 후 테스트

    • 블로그 게시글에 댓글을 달아본 후, 3개마다 광고가 자연스럽게 들어가는지 확인합니다.

추가 팁: 검색 최적화를 위한 광고 삽입 전략

  • 댓글이 활발한 포스트에만 이 스크립트를 적용하면 페이지 로딩 속도를 관리할 수 있습니다.

  • 광고는 너무 과도하게 삽입하면 구글 정책에 위반될 수 있으니, 3~5개 댓글당 1개 정도가 적당합니다.

  • PC와 모바일 모두 반응형 광고 설정을 활성화해야 수익 극대화가 가능합니다.

이렇게 자바스크립트를 이용해 댓글란에 자동으로 애드센스 광고를 삽입하면, 별도의 수작업 없이도 블로그 수익을 높일 수 있습니다. 단, 광고 삽입 위치는 자연스럽고 방문자 경험을 해치지 않게 조정하는 것이 중요합니다.
지금 바로 나만의 애드센스 코드를 넣어 티스토리 블로그 수익을 최적화해보세요!