AdSense 반응형 광고 — 놓치면 고생하는 숨은 함정들
No slot size for availableWidth=0
AdSense error: TagError: adsbygoogle.push() error: No slot size for availableWidth=0 공식 문서를 보면 에러의 의미는 단순하다
“반응형 광고 코드가 명시적 너비가 설정되지 않은 상위 컨테이너 내부에 있기 때문에 어떤 광고를 넣어야 할지 계산 할 수 없다”
즉, 반응형 배너의 상위 요소에는 width값 설정이 반드시 필요하다. (height는 필수x).
아래와 같은 상황에서는 동일 에러가 발생 할 수 있다.
상태 | 왜 실패? |
width: auto | 부모에 따라 0 될 수 있음 |
display: inline | width 계산 불가 |
flex child shrink | 내용 없으면 0으로 수축 |
부모가 display:none | width=0 |
렌더 타이밍 문제 | 레이아웃 미정 → 0 나옴 |
레이아웃 강제 조정하는 문제
반응형 AdSense는 광고를 노출시키기 위해 다음과 같이 행동한다
필요한 경우 부모 요소들에 인라인 스타일 직접 적용 (!important)
결과적으로 아래 현상이 발생할 수 있다:
- 페이지 높이/배치가 갑자기 바뀜
- 상단이 눌리거나 들뜸
- 콘텐츠가 위로 밀림
- CLS(레이아웃 점프) 증가
정말 웬만하면 DOM을 조작하고 싶지 않았지만… MutationObserver를 활용하여 스타일 속성 변경 갑지를 통해 레이아웃에 제일 큰 영향을 주는 요소의 적용된 인라인 스타일 제거
목적:
- 광고 자체를 막는 것이 아니라
- 레이아웃을 과하게 흔드는 인라인 스타일만 되돌림
출력할 광고가 없는 경우 (data-ad-status = “unfilled”)
애드센스 광고가 잘 노출되다가 가끔 공백으로 아무것도 노출이 안되는 경우가 있다. 코드를 확인해보면 ins 태그내
data-ad-status 값이 unfilled 로 설정 된 것을 확인 할 수 있다.- data-ad-status=”filled” - 광고가 정상 게재
- data-ad-status=”unfilled” - 반환된 광고가 없음(빈 공간)
즉, 반환된 광고가 없어 빈 공간으로 노출이 되고 있다는것 이다.
간단한 대응 방법:
참고:
추가로 Google에서는 MutationObserver를 통해 data-ad-status 변화를 감지해 대응하는 방법을 안내한다
그래서 다음과 같이
useAdStatusObserver 커스텀 훅을 통해 상태값을 추척하고 대응 할 수 있도록 하는것도 가능하다.이를 응용하면 다음과 같은 추가 처리가 가능하다:
- 광고 없음 → 대체 배너 노출
- 광고 표시됨 → placeholder 제거
- error 상태 처리 가능
adsense 스크립트 중복 실행 방지
이미 초기화된 광고 슬롯에 대해 다시 adsbygoogle.push() 가 실행되지 않도록 한다.
핵심은 다음과 같다.
<ins>의 data-adsbygoogle-status=”done” 여부를 체크한다.
적용 효과:
- 리렌더 시 광고가 여러번 초기화 되는 문제 방지
- 라우트 이동 후 돌아와도 안정적으로 동작
- No slot size, 중복 초기화 오류 감소
반응형 adsense - height(높이) 고정은 피하자
반응형 adesense는 단순히 “저정된 영역에 맞춰 들어오는 광고”가 아니라 화면 너비/디바이스/경매 결과/광고 재고를 기준으로 광고 크기를 결정한다.
그래서 상황에 따라:
90px 높이의 광고가 오기도 하고, 120px, 250px, 300px 등등 다양한 크기의 광고가 들어오기도 한다.
만약 height를 고정한다면?
문제:
- 광고가 잘려보임
- 광고가 박스 밖으로 튀어나옴
- 레이아웃이 깨짐 현상 발생
“광고 크기 = 개발자가 예측하는 값” 이 아니다.
권장 설정:
- width 값은 명확하게 지정
- height는 고정을 피하고, min-height를 통해 최소 영역을 확보하는게 안전하다.
결론
반응형 AdSense는 “그냥 붙이면 끝”이 아니다.
광고가 로드되면서:
- 레이아웃을 바꾸고
- 부모 스타일을 직접 수정하고
- 상황에 따라 광고가 비어 있거나
- 초기화 타이밍에 따라 에러가 날 수 있다
그래서 중요한 건:
- 상위 컨테이너 width는 반드시 명확하게
- height는 고정하지 말고, 최소 높이만 확보
- unfilled / error 상태 방어 처리
- adsbygoogle.push() 중복 호출 막기
이것들만 지켜도 “광고는 보이는데 레이아웃은 안 깨지는” 안전한 구조를 만들 수 있다.