블로그 수익을 높이기 위해 애드센스 광고 미노출 시 카카오 애드핏, 제휴 이미지로 자동 전환되는 3단계 광고 폴백(Fallback) 코드를 소개합니다. 광고 유실을 방지하고 CLS 문제를 해결하는 티스토리 블로그 멀티 광고 전환 방법과 구체적인 HTML/JavaScript/CSS 코드를 안내합니다. (롱테일 키워드: 애드센스 애드핏 동시 운영, 광고 자동 전환 스크립트)
이번 글에서는 이전에 올렸던 광고 수익 관련 자료에 이어, 블로그 광고 수익을 조금이라도 확보할 수 있는 방법으로 광고 자동 전환 코드를 소개하려고 합니다. 보통 애드센스 광고 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 코드 (자동 전환 스크립트) 설명 및 삽입
아래 코드는 광고의 로딩 상태를 감지하여 순차적으로 다음 광고로 전환시키는 핵심 스크립트입니다. 광고가 로드되어 실제 높이가 확보되었는지 확인하는 MutationObserver 기법을 사용하여 정확도를 높였습니다.
script
document.addEventListener("DOMContentLoaded", function() {
const adsense = document.getElementById("adsense-ad");
const kakao = document.getElementById("kakao-ad");
const fallback = document.getElementById("fallback-ad");
// 광고 로드 시도 함수 (el: 광고 요소, scriptLoader: 해당 광고 스크립트 로더, onFail: 실패 시 다음 함수, timeout: 타임아웃 시간)
const tryAd = (el, scriptLoader, onFail, timeout = 3000) = {
el.classList.add("visible");
scriptLoader();
// MutationObserver를 사용하여 iframe 생성 및 높이 감지
const observer = new MutationObserver(() = {
const iframe = el.querySelector("iframe");
// iframe이 존재하고, 높이가 50px 이상일 경우 성공으로 판단하고 관찰 중단
if (iframe && iframe.offsetHeight 50) {
observer.disconnect();
}
});
observer.observe(el, { childList: true, subtree: true });
// 타임아웃 시간 이후에 광고 로드 성공 여부 최종 확인
setTimeout(() = {
const iframe = el.querySelector("iframe");
// iframe이 없거나 높이가 50px 이하일 경우 실패로 판단
if (!iframe || iframe.offsetHeight = 50) {
el.classList.remove("visible"); // 현재 광고 숨김
observer.disconnect();
onFail(); // 다음 단계 광고 시도
}
}, timeout);
};
// 1단계: 애드센스 스크립트 로드
const loadAdsense = () = {
const s = document.createElement("script");
s.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxx"; // client ID를 실제 값으로 변경해야 합니다.
s.async = true;
s.crossOrigin = "anonymous";
s.onload = () = (adsbygoogle = window.adsbygoogle || []).push({});
document.head.appendChild(s);
};
// 2단계: 애드핏 스크립트 로드
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);
};
// 실행 순서: AdSense 시도 - 실패 시 AdFit 시도 - 실패 시 이미지 광고 노출
tryAd(adsense, loadAdsense, () = {
tryAd(kakao, loadAdfit, () = fallback.classList.add("visible"), 2000); // AdFit 타임아웃 2초
}, 3000); // AdSense 타임아웃 3초
});
/script
광고 설정 시 유의사항 및 장점
- data-ad-client, data-ad-slot, data-ad-unit 값은 자신의 광고 코드 값으로 반드시 교체하세요. 특히 JavaScript 내의 애드센스 `client` 값도 수정해야 합니다.
- 이미지 광고 주소도 자신의 서버 또는 제휴 이미지 주소로 수정해야 합니다. 이미지 광고를 활용하면 특정 제휴 마케팅에 직접적으로 연결하여 추가 수익을 창출할 수 있습니다.
- 티스토리는 스크립트 태그 삽입이 제한될 수 있으므로 HTML 편집 메뉴에서 직접 수정하셔야 합니다.
- 광고 위치는 콘텐츠 상단, 중간, 하단 등 가시성 높은 위치에 삽입하는 것이 좋습니다.
코드의 주요 장점 (수익성 및 SEO 관점)
| 기능 | 설명 |
|---|---|
| 광고 유실 방지 | 애드센스 실패 시 애드핏 또는 이미지로 자동 전환하여 AdSense Fill Rate 문제를 보완합니다. |
| 레이아웃 안정성 | CSS의 고정 높이(`height: 300px`) 설정으로 CLS(콘텐츠 밀림) 문제 방지, 코어 웹 바이탈 점수를 높여 SEO에 기여합니다. |
| 수익 극대화 | 항상 광고가 노출되므로 수익 손실 최소화 및 롱테일 수익 기회(제휴 이미지)를 확보합니다. |
| 모바일 대응 | 100% 반응형 구조를 사용하여 모든 기기에서 안정적인 노출을 보장합니다. |
| 광고 정책 대응 | 주요 광고 플랫폼의 일시적 차단이나 비노출 시에도 자동 대체 처리하여 안정적인 운영이 가능합니다. |
CSS 스타일링 상세 설명 및 다중 광고 운영의 중요성
이 코드는 광고의 시각적 안정성을 보장하기 위해 정교하게 설계된 CSS를 사용합니다. CSS 코드의 역할은 광고가 로딩되는 동안 콘텐츠가 밀리는 현상(CLS)을 방지하고, 하나의 광고만 깔끔하게 보이도록 제어하는 것입니다.
스크립트 코드 설명
광고 로직을 제어하는 자바스크립트의 핵심 동작 원리는 다음과 같습니다.
- DOM 로드 후 실행: 페이지의 기본 요소가 로드된 후 실행되므로 페이지 초기 로딩 속도(LCP)에 미치는 영향을 최소화합니다.
- 폴백 시스템: `tryAd()` 함수를 통해 AdSense, AdFit, Image 순서로 연쇄 호출되며, 각 광고는 타임아웃과 실제 iframe 로드 여부를 기준으로 실패를 판단합니다.
- MutationObserver 활용: 광고 코드가 삽입되는 비동기적인 시점을 정확하게 포착하고, 광고가 실제로 영역을 차지했는지(높이 50px) 확인하여 오탐을 줄입니다.
광고 3단 노출용 CSS 클래스 설명
| 구분 | 클래스 | 설명 |
|---|---|---|
| 광고 전체 영역 | .ad-container | 고정 높이(`height: 300px`)를 설정하여 CLS를 방지하고, 중앙 정렬 (`display: flex`)을 합니다. |
| 각 광고 영역 | .ad-slot | `position: absolute`로 모든 광고를 같은 위치에 겹쳐 놓습니다. `visibility: hidden`과 `opacity: 0`으로 초기에는 숨겨둡니다. |
| 광고 표시 상태 | .visible | 스크립트가 성공적으로 로드된 광고에만 적용되어 `visibility: visible` 및 `opacity: 1`로 화면에 표시됩니다. |
| 이미지 광고 | .fallback-image img | 비율 유지(`object-fit: cover`)하면서 광고 영역을 꽉 채워 빈 공간이 없도록 합니다. |
| 로딩 안내 문구 | .ad-placeholder | 광고 로딩 중 사용자에게 안내용 텍스트를 표시하는 배경 영역입니다. |
style
.ad-container {
width: 100%;
height: 300px; /* CLS 방지를 위한 필수 고정 높이 */
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; /* height 값과 동일하게 설정 */
width: 100%;
height: 100%;
font-size: 1.2em;
}
/style
다중 광고 전략의 결론
| 순서 | 광고 종류 | 실패 시 대체 | 대체 방식 |
|---|---|---|---|
| 1 | AdSense (고수익) | 실패하면 | Kakao AdFit |
| 2 | Kakao AdFit (중수익) | 실패하면 | 제휴 이미지 |
| 3 | 제휴 이미지 (롱테일 수익) | 최종 노출 | – |
단일 광고에 의존하는 구조는 매우 불안정합니다. AdSense가 차단되거나 정책 위반으로 인해 정지될 경우, 광고 수익이 0원이 될 수도 있습니다. 따라서 보조 광고를 1~2개 정도 운영하는 것은 수익의 변동성을 줄이는 좋은 전략 중 하나입니다.
또한 여러 개의 광고를 운영한다면, 멀티 광고 구조는 선택이 아닌 필수 전략이 될 수 있습니다.이번에 소개한 코드처럼 애드센스 애드핏 제휴 이미지 순으로 대체되는 광고 구조는 수익성과 안정성을 동시에 잡을 수 있는 방법입니다.
이 3중 광고 전환 코드를 사용하면 페이지 로딩 속도가 느려지지 않나요?
이 코드는 광고 스크립트를 비동기(`s.async = true`)로 로드하고 `DOMContentLoaded` 이벤트 이후에 실행되므로, 페이지의 주요 콘텐츠 로딩을 방해하지 않습니다. 또한, 특정 시간(3초/2초) 내에 로드가 완료되지 않으면 다음 단계로 빠르게 전환되어, 하나의 광고가 무한정 페이지 로딩을 지연시키는 것을 방지합니다.
애드센스 정책에 위반되지 않나요? 여러 개의 광고를 겹쳐도 되나요?
이 코드는 `position: absolute`와 `visibility: hidden`을 사용하여 오직 하나의 광고만 사용자에게 보이도록(노출되도록) 합니다. 애드센스 정책은 한 광고 슬롯에 여러 광고를 동시에 표시하는 것을 금지하지만, 로직을 통해 순차적이고 배타적으로 노출하는 것은 정책에 위반되지 않습니다. 즉, 성공한 하나의 광고만 화면에 남습니다.
제휴 이미지 광고를 삽입하면 SEO에 불이익이 있나요?
제휴 이미지를 광고가 노출되지 않는 ‘빈 공간’을 채우는 용도로만 사용하고, 이미지에 적절한 `alt` 태그를 사용하며 콘텐츠와 관련성이 높다면 SEO에 부정적인 영향을 주지 않습니다. 오히려 빈 공간으로 인한 CLS 오류를 방지하여 웹 바이탈 점수를 개선하는 긍정적인 효과도 있습니다.