블로그 애드센스 광고 수익을 극대화하는 방법

블로그를 운영하며 가장 큰 관심사 중 하나는 광고 수익의 극대화입니다. 특히 구글 애드센스(AdSense)를 활용한 광고 수익은 많은 블로거들이 의존하는 주요 수익원입니다. 하지만 여기에는 항상 ‘자동광고’와 ‘수동광고’ 사이의 고민이 따릅니다.자동광고를 설장하게 되면 발생하는 여러가지 문제로 인해 자동광고를 기피하는 경향이 있습니다. 또한 수동광고는 운영자가 코드를 수정해야 하는 불편함이 존재합니다.

자동광고와 수동광고, 그리고 그 대안

구글 애드센스를 사용하는 많은 블로거들이 ‘자동광고‘와 ‘수동광고’ 사이에서 고민하게 되는 내용을 알아보고 대안을 찾아봅니다.

구글 자동광고의 문제점

원하지 않는 위치에 광고가 삽입되어 UX 악화
CLS(레이아웃 이동) 현상으로 SEO 점수 하락
콘텐츠 흐름을 방해하여 사용자 만족도 저하

수동광고의 장단점

장점: 광고 위치 제어 가능, 콘텐츠 흐름 유지
단점: HTML 직접 삽입 필요, 작업량 증가

절충안: 자동 삽입형 수동광고

운영자가 원하는 위치(단락마다)에 자동으로 수동 광고를 삽입하는 방식입니다.이방법은 운영자 자동화 방식이기 때문에 운영자가 노출 방식을 결정할수 있을뿐만 아니라 광고의 적절한 위치와 수량을 결정할수 있습니다.

본문에 자동으로 광고 삽입하는 스크립트

<script>
(function () {
  const config = {
    clientId: 'ca-pub-애드센스 ID',
    slotIds: ['광고 ID', '광고ID', '광고 ID'],
    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 = () => {
    const pTags = document.querySelectorAll('#article-view p');
    if (pTags.length >= config.adInterval) {
      let slotIndex = 0;
      pTags.forEach((p, index) => {
        if ((index + 1) % config.adInterval === 0 && slotIndex < config.slotIds.length) {
          const next = p.nextElementSibling;
          if (!(next && next.classList.contains('secure-ad-unit'))) {
            const adEl = createAdPlaceholder(config.slotIds[slotIndex]);
            p.insertAdjacentElement('afterend', adEl);
            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()) loadAds();
    }, config.maxWaitTime);
  };

  const loadAds = () => {
    let attempts = 0;
    const timer = setInterval(() => {
      if (window.adsbygoogle && document.querySelectorAll('.adsbygoogle').length) {
        try {
          document.querySelectorAll('.adsbygoogle').forEach(el => (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);
  }

  window.addEventListener('popstate', () => {
    setTimeout(() => {
      checkAndInsertAd();
      loadAds();
    }, 1000);
  });

  document.addEventListener('scroll', () => {
    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>