애드센스 광고 수익 극대화하기 3탄 목록 페이지에 자동 광고 노출방법

목록에 자동으로 노출되는 애드센스 코드 설정 방법

구글 애드센스를 통해 블로그 수익을 극대화하고 싶다면, 광고의 노출 위치와 빈도를 전략적으로 설계하는 것은 선택이 아닌 필수입니다. 특히 티스토리 블로그처럼 글 목록(리스트 뷰)이 중요한 플랫폼에서는, 목록 내 광고 자동 삽입 기능이 광고 클릭률(CTR)과 전체 수익 향상에 큰 역할을 합니다. 많은 블로거가 애드센스 광고를 본문이나 댓글 하단에만 제한적으로 노출하지만, 글 목록마다 적절히 배치된 광고는 방문자 경험을 해치지 않으면서도 추가적인 수익 기회를 만들어 줍니다.

애드센스 광고 수익 극대화! 티스토리 목록형 광고 설정법 공개

이번 글에서는 앞서 소개한 댓글 본문 자동 광고 삽입 코드에 이어, 티스토리 글 목록 상하단 광고 노출 제한을 넘어서는 고급 설정법을 소개합니다. 기본적으로 티스토리에서는 목록 상,하단 2개 광고만 삽입할 수 있도록 제한되지만, 운영자가 원하는 간격과 개수로 자유롭게 애드센스 광고를 목록 내에 자동으로 삽입할 수 있는 방법이 있습니다. 이 방법을 활용하면 내 블로그의 글 목록이 단순한 포스트 나열 공간을 넘어, 효율적인 광고 노출 지면으로 탈바꿈합니다.

글 속에서는 실제 활용 가능한 코드를 제공하니, 직접 따라 하시면서 내 티스토리 블로그에 즉시 적용해 보세요. 광고 최적화는 블로그 수익화의 핵심 전략입니다. 지금부터 소개하는 내용을 통해 더 높은 애드센스 수익을 기대해보시기 바랍니다.

애드센스 광고 노출의 중요성

구글 애드센스 광고 수익은 노출수(임프레션)와 클릭률(CTR)에 직접적인 영향을 받습니다. 블로그 방문자가 많더라도 광고가 적절히 노출되지 않으면 수익이 낮아질 수밖에 없습니다. 특히 글 목록 페이지에서는 방문자 이탈률이 높기 때문에, 콘텐츠 사이사이에 자연스럽게 광고가 배치되면 광고 노출 빈도 증가와 수익 극대화라는 두 마리 토끼를 잡을 수 있습니다.

티스토리 기본 광고 노출의 한계

티스토리는 기본적으로 목록 상단 1개, 하단 1개의 광고만 설정할 수 있습니다. 이 경우 긴 목록 페이지에서는 광고가 너무 적어 수익성이 떨어질 수 있습니다. 또한 관리자는 광고 위치와 간격을 자유롭게 조절할 수 없어 최적화된 광고 배치가 어렵습니다.

목록 내 애드센스 광고 자동 삽입 코드 소개

아래는 목록 내 글(post-item) 사이사이에 광고를 일정 간격으로 자동 삽입할 수 있는 예제 코드입니다.

※ 주의: 코드 내 clientId와 slotIds는 모두 예시용 코드로, 실제 사용 시 본인 애드센스 계정의 코드로 변경해야 합니다.

<script>
(function(){
  const config = {
    clientId: 'ca-pub-0000000000000000', // 본인 애드센스 ID로 변경
    slotIds: ['1111111111', '2222222222', '3333333333'], // 광고 슬롯 ID 3개
    minHeight: '300px',
    adInterval: 3,
    maxWaitTime: 10000
  };
  const createAdPlaceholder = (slotId) => {
    const wrapper = document.createElement('div');
    wrapper.className = 'secure-ad-unit';
    wrapper.style.cssText = `margin:25px 0;min-height:${config.minHeight} !important;height:auto;position:relative;`;
    const ins = document.createElement('ins');
    ins.className = 'adsbygoogle';
    ins.style.cssText = `display:block;width:100%;min-height:${config.minHeight}`;
    ins.setAttribute('data-ad-client', config.clientId);
    ins.setAttribute('data-ad-slot', slotId);
    ins.setAttribute('data-ad-format', 'auto');
    ins.setAttribute('data-full-width-responsive', 'true');
    wrapper.appendChild(ins);
    return wrapper;
  };
  const checkAndInsertAd = (isTimeout = false) => {
    const posts = document.querySelectorAll('.post-item');
    if (posts.length >= config.adInterval) {
      let slotIndex = 0;
      posts.forEach((post, index) => {
        if ((index + 1) % config.adInterval === 0 && slotIndex < config.slotIds.length) {
          const next = post.nextElementSibling;
          if (!(next && next.classList.contains('secure-ad-unit'))) {
            post.insertAdjacentElement('afterend', createAdPlaceholder(config.slotIds[slotIndex]));
            slotIndex++;
          }
        }
      });
      return true;
    }
    return false;
  };
  const observeDOM = () => {
    let timer;
    const observer = new MutationObserver(() => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        checkAndInsertAd();
        loadAds();
      }, 1000);
    });
    observer.observe(document.body, { childList: true, subtree: true });
    setTimeout(() => {
      observer.disconnect();
      if (checkAndInsertAd(true)) loadAds();
    }, config.maxWaitTime);
  };
  const loadAds = () => {
    let attempts = 0;
    const timer = setInterval(() => {
      if (window.adsbygoogle && document.querySelectorAll('.adsbygoogle').length) {
        try {
          document.querySelectorAll('.adsbygoogle').forEach(() => {
            (adsbygoogle = window.adsbygoogle || []).push({});
          });
          clearInterval(timer);
        } catch (e) {}
      }
      if (++attempts >= 5) clearInterval(timer);
    }, 1000);
  };
  const init = () => {
    if (!checkAndInsertAd()) {
      observeDOM();
    } else {
      loadAds();
    }
  };
  if (document.readyState === 'complete') {
    init();
  } else {
    window.addEventListener('load', init);
    document.addEventListener('DOMContentLoaded', init);
  }
  ['popstate', 'scroll'].forEach(evt => {
    window.addEventListener(evt, () => {
      setTimeout(() => {
        checkAndInsertAd();
        loadAds();
      }, 1000);
    });
  });
  const script = document.createElement('script');
  script.async = true;
  script.src = `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${config.clientId}`;
  script.crossOrigin = 'anonymous';
  document.head.appendChild(script);
})();
</script>

코드 주요 기능 설명

clientId	본인의 애드센스 퍼블리셔 ID 설정
slotIds	광고 슬롯 ID 리스트 (최대 3개 사용 예시)
adInterval	몇 번째 글마다 광고 삽입할지 설정 (3 = 3번째마다 광고 삽입)
minHeight	광고의 최소 높이 설정 (300px)
maxWaitTime	광고 삽입을 위한 DOM 감지 최대 대기 시간 (10초)
MutationObserver	글 목록 변화 감지 후 자동으로 광고 삽입
adsbygoogle.push()	구글 광고 활성화 실행

티스토리 블로그에서 적용 방법

1. 티스토리 관리자 페이지[스킨 편집]으로 이동
2. HTML 편집 클릭 후 </body> 닫기 태그 바로 위에 위 코드를 붙여넣기
3. clientId와 slotIds 값을 본인 애드센스 정보로 변경
4. 저장 후 블로그 글 목록 페이지 새로고침 목록 사이사이 광고 자동 삽입 확인

광고 위치 주도권은 운영자에게!

이 코드를 활용하면 티스토리가 기본 제공하는 상하단 2개 제한을 뛰어넘어, 운영자가 글 목록 내 원하는 위치에 원하는 개수의 광고를 배치할 수 있습니다. 이는 애드센스 수익 극대화의 중요한 전략이 될 수 있습니다. 블로그 수익화를 목표로 한다면 꼭 한번 적용해 보시길 추천드립니다.