블로그 광고 최적화: 티스토리에서 애드센스 + 애드핏 + 제휴 이미지 운영방법

이번 글에서는 이전에 올렸던 광고 수익 관련 자료에 이어, 블로그 광고 수익을 조금이라도 확보할 수 있는 방법으로 광고 자동 전환 코드 을 소개하려고 합니다. 보통 애드센스 광고 1개만 운영하는 운영자도 있지만, 저처럼 여러 가지 광고를 동시에 운영하는 블로그 운영자도 있을 거라 생각합니다.

이렇게 여러 개의 광고를 운영하더라도 항상 선노출 광고가 있고, 후순위 광고가 존재합니다. 여러 가지 이유로 주 광고 위주로 운영하고 나머지는 부수적으로 운영하는 경우가 대부분입니다.

애드센스 광고가 안 나올 때? 보조 광고로 수익 보장하는 방법

이 경우 노출 영역이 부족하거나, 실제 광고가 노출되지 않는 상황이 많이 발생합니다. 광고가 노출되지 않은 공간은 낭비가 되고, 부족한 영역으로 인한 수익 손실이 발생할 수 있습니다. 이러한 상황에 적합한 방법을 이번 글에서 이야기해 보겠습니다.

이번 글에서는 AdSense가 실패할 경우 Kakao AdFit(애드핏), 이후에는 제휴 이미지 광고로 자동 전환되는 자동 광고 전환 방법을 소개합니다. 이를 통해 광고 손실을 최소화하고, 티스토리 블로그에서도 간편하게 적용할 수 있는 방법을 알려드리겠습니다.

광고가 노출되지 않는 이유는?

이전 글에서 이미 다뤘다고 판단하여 자세한 내용은 생략하겠습니다. 궁금하신 분들은 링크를 통해 확인하실 수 있습니다.

광고가 노출되지 않는 경우, AdSense만으로는 광고 수익률을 100% 보장할 수 없습니다. 따라서 대체 광고나 제휴 이미지를 준비하는 것이 또 다른 대안이 될 수 있습니다. 주로 많이 운영하는 광고를 예로 들어 소개해 드리겠습니다.

블로그에 적용하는 광고 자동 전환 코드

주 광고가 노출되지 않을 경우 부 광고가 노출되고, 이마저도 안 될 경우 제휴 광고 및 이미지 광고를 노출하여 광고 미노출로 인한 수익 손실을 최대한 방지하는 방법입니다. 아래 방법을 통해 누구나 쉽게 운영할 수 있습니다.

티스토리 기준 광고 코드 설치 방법

아래 코드는 티스토리 관리자 > 스킨 편집 > HTML 편집 또는 글쓰기 화면의 HTML 탭에 삽입할 수 있습니다.

스킨 전체 적용: 스킨 편집 > HTML 편집 > 원하는 위치에 삽입 (예: <body> 안)
개별 글 적용: 글 작성 > HTML 탭에서 원하는 위치에 삽입

아래 코드에서 본인이 운영하고 있는 광고 코드만 변경해서 사용하시면 됩니다.

<div class="ad-container">
  <div class="ad-placeholder" id="initial-placeholder">광고 로드 중...</div>

  <!-- 1단계: 애드센스 광고 -->
  <div id="adsense-ad" class="ad-slot">
    <ins class="adsbygoogle"
      style="display:block;width:100%;height:100%;"
      data-ad-client="ca-pub-여기에_애드센스_클라이언트_ID"
      data-ad-slot="애드센스_슬롯_ID"
      data-ad-format="auto"
      data-full-width-responsive="true"></ins>
  </div>

  <!-- 2단계: 카카오 애드핏 광고 -->
  <div id="kakao-ad" class="ad-slot">
    <ins class="kakao_ad_area"
      style="display:block;width:100%;height:100%;"
      data-ad-unit="DAN-애드핏_유닛_ID"
      data-ad-width="728"
      data-ad-height="90"></ins>
  </div>

  <!-- 3단계: 이미지 광고 (제휴 또는 자체 광고) -->
  <div id="fallback-ad" class="ad-slot fallback-image">
    <img src="https://yourdomain.com/images/fallback-ad.webp" alt="광고 이미지" loading="lazy">
  </div>
</div>

JavaScript 코드 (자동 전환)

아래 코드를 같은 위치에 <script>로 함께 삽입해 주세요. 광고가 순차적으로 로드되며 실패 시 자동 전환됩니다.

<script>
document.addEventListener("DOMContentLoaded", function() {
  const adsense = document.getElementById("adsense-ad");
  const kakao = document.getElementById("kakao-ad");
  const fallback = document.getElementById("fallback-ad");

  const tryAd = (el, scriptLoader, onFail, timeout = 3000) => {
    el.classList.add("visible");
    scriptLoader();
    const observer = new MutationObserver(() => {
      const iframe = el.querySelector("iframe");
      if (iframe && iframe.offsetHeight > 50) observer.disconnect();
    });
    observer.observe(el, { childList: true, subtree: true });
    setTimeout(() => {
      const iframe = el.querySelector("iframe");
      if (!iframe || iframe.offsetHeight < 50) {
        el.classList.remove("visible");
        observer.disconnect();
        onFail();
      }
    }, timeout);
  };

  const loadAdsense = () => {
    const s = document.createElement("script");
    s.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxx";
    s.async = true;
    s.crossOrigin = "anonymous";
    s.onload = () => (adsbygoogle = window.adsbygoogle || []).push({});
    document.head.appendChild(s);
  };

  const loadAdfit = () => {
    const s = document.createElement("script");
    s.src = "//t1.daumcdn.net/kas/static/ba.min.js";
    s.async = true;
    s.onload = () => (kakao_ad_area = window.kakao_ad_area || []).push({});
    document.head.appendChild(s);
  };

  tryAd(adsense, loadAdsense, () => {
    tryAd(kakao, loadAdfit, () => fallback.classList.add("visible"), 2000);
  }, 3000);
});
</script>

광고 설정 시 유의사항

data-ad-client, data-ad-slot, data-ad-unit 값은 자신의 광고 코드 값으로 반드시 교체하세요.
이미지 광고 주소도 자신의 서버 또는 제휴 이미지 주소로 수정해야 합니다.
티스토리는 스크립트 태그 삽입이 제한될 수 있으므로 “HTML 편집” 메뉴에서 직접 수정하셔야 합니다.
광고 위치는 콘텐츠 상단, 중간, 하단 등 가시성 높은 위치에 삽입하는 것이 좋습니다.

코드의 주요 장점

기능	설명
광고 유실 방지	애드센스 실패 시 애드핏 또는 이미지로 자동 전환
레이아웃 안정성	고정 높이 설정으로 CLS(콘텐츠 밀림) 문제 방지
수익 극대화	항상 광고가 노출되므로 수익 손실 최소화
모바일 대응	100% 반응형 구조 사용 가능
광고 정책 대응	애드센스 차단/비노출 시 자동 대체 처리 가능

스크립트 코드 설명

1. 기본 구조

DOM이 완전히 로드된 후(DOMContentLoaded) 실행됩니다.
Google AdSense, Kakao Ad를 순차적으로 시도하고, 모두 실패 시 대체 이미지 광고로 전환됩니다.

2. 주요 구성 요소

광고 컨테이너: .ad-container 및 #initial-placeholder
광고 유형:
- #adsense-ad: Google AdSense
- #kakao-ad: Kakao AdFit
- #fallback-ad: 제휴 이미지 광고

3. 동작 흐름

초기화: 모든 광고 div에서 'visible' 클래스 제거
광고 로드 순서:
- AdSense → AdFit → 제휴 이미지 순서로 시도
- 각 단계별 타임아웃: AdSense(3초), AdFit(2초)
광고 로드 감지: MutationObserver로 iframe 로딩 여부와 높이 감지

4. 주요 함수 설명

tryAd(): 광고를 시도하고 실패 시 다음 광고로 넘어가는 함수
loadAdsense(): AdSense 스크립트 로드
loadAdfit(): Kakao AdFit 스크립트 로드
fallback.classList.add('visible'): 이미지 광고 표시

5. 특징

폴백 시스템: 다단계 광고 시도 구조
비동기 처리: 페이지 로딩 성능 저하 최소화
타임아웃 설정: 각 광고의 로딩 실패 판단 기준 제공
중복 방지: 한 번에 하나의 광고만 노출

광고 3단 노출용 CSS 클래스 설명

구분	클래스	설명
광고 전체 영역	.ad-container-top	고정 높이, 중앙 정렬된 광고 영역
각 광고 영역	.ad-slot	비노출 상태에서 순차 노출
광고 표시 상태	.visible	화면에 표시될 때 적용되는 클래스
이미지 광고	.fallback-image img	비율 유지하면서 광고 영역 꽉 채움
로딩 안내 문구	.ad-placeholder	광고 로딩 중 사용자 안내용 텍스트

<style>
.ad-container {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ad-slot {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease-in-out;
}

.ad-slot.visible {
    visibility: visible;
    opacity: 1;
}

.fallback-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ad-placeholder {
    background: #e0e0e0;
    color: #888;
    text-align: center;
    line-height: 300px;
    width: 100%;
    height: 100%;
    font-size: 1.2em;
}
</style>

순서	광고 종류	실패 시 대체	대체 방식
1	AdSense	실패하면	Kakao
2	Kakao	실패하면	이미지
3	이미지	최종 노출	-

단일 광고에 의존하는 구조는 매우 불안정합니다. AdSense가 차단되거나 정책 위반으로 인해 정지될 경우, 광고 수익이 0원이 될 수도 있습니다. 따라서 보조 광고를 1~2개 정도 운영하는 것도 좋은 전략 중 하나입니다.

또한 여러 개의 광고를 운영한다면, 멀티 광고 구조는 선택이 아닌 필수 전략이 될 수 있습니다.이번에 소개한 코드처럼 애드센스 → 애드핏 → 제휴 이미지 순으로 대체되는 광고 구조는 수익성과 안정성을 동시에 잡을 수 있는 방법입니다.

저작자표시 비영리 변경금지 (새창열림)

'SEO > seo-resources' 카테고리의 다른 글

쿠팡 파트너스 상품 자동 노출 3편: 콘텐츠 · 목록 페이지 적용법 (3)	2025.07.10
쿠팡 상품 자동 노출 방법 2탄: 콘텐츠에 최적화된 상품 자동 노출방법 (0)	2025.07.10
쿠팡 파트너스 상품 자동 등록 1탄 수익화! 블로그에 상품 자동 등록하는 방법 (7)	2025.07.09
HowTo 구조화 데이터 자동 생성기 만들기,단계별 설명 콘텐츠, SEO에서 어떻게 유리한가요? (0)	2025.07.04
내 블로그 검색 노출 올리는 브레드크럼 자동 생성 스크립트 사용법 (1)	2025.06.29
빈 썸네일, 블로그 글 작성 시 이미지가 없는 요소의 빈 공간 문제와 해결법 (3)	2025.06.27
블로그 상단 광고 고정(코드 포함) 노출로 수익과 검색 최적화 (SEO) 동시에 잡는 법 (4)	2025.06.14