첫 화면에서는 광고가 보이는데 다른 글로 이동하면 빈자리만 남는다.
한 문장부터.
Astro가 문서 전체를 다시 불러오지 않으면 AdSense 초기화 코드도 자동으로 다시 실행되지 않을 수 있다.
먼저 확인할 것
개발자 도구에서 두 가지를 본다.
- 첫 페이지에서 AdSense 스크립트가 한 번만 로드되는가
- 페이지 전환 뒤 새
<ins class="adsbygoogle">요소에 광고 요청이 발생하는가
스크립트 파일을 매번 다시 넣는 것보다 새 광고 단위만 찾아 초기화하는 편이 낫다.
이 블로그에서 사용한 방식
광고 컴포넌트는 표시할 자리만 만든다.
<ins
class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-YOUR_CLIENT_ID"
data-ad-slot="YOUR_SLOT_ID"
data-ad-format="auto"
data-full-width-responsive="true"
></ins>
페이지가 준비될 때 아직 처리하지 않은 광고만 찾는다.
function handleAds() {
const pendingAds = document.querySelectorAll(
'ins.adsbygoogle:not([data-adsbygoogle-status="done"]):not([data-ad-processing="true"])'
);
pendingAds.forEach(ad => {
if (ad.getBoundingClientRect().width <= 0) return;
ad.setAttribute("data-ad-processing", "true");
try {
(window.adsbygoogle = window.adsbygoogle || []).push({});
} catch {
ad.removeAttribute("data-ad-processing");
}
});
}
document.addEventListener("astro:page-load", handleAds);
핵심은 astro:page-load 자체보다 중복 요청을 막는 조건이다.
같은 광고 단위에 push({})를 반복하면 오류가 생길 수 있다. 처리 중인 요소와 이미 완료된 요소를 제외해야 한다.
data-astro-exec 오류가 보일 때
Astro가 외부 스크립트를 처리하는 과정에서 AdSense가 예상하지 않은 속성이 붙는 경우가 있다.
이때는 AdSense 로더를 여러 컴포넌트에 반복해서 넣지 않는다. 공용 Layout에서 한 번만 로드하거나, 필요하면 inline 스크립트에서 동적으로 추가한다.
const script = document.createElement("script");
script.src =
"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-YOUR_CLIENT_ID";
script.async = true;
script.crossOrigin = "anonymous";
document.head.appendChild(script);
확인 순서
- 광고 차단 확장 기능을 끈다.
- 실제 배포 주소에서 확인한다.
- AdSense 로더가 한 번만 들어갔는지 본다.
- 페이지 전환 뒤
astro:page-load가 발생하는지 본다. - 새 광고 요소의 폭이 0이 아닌지 확인한다.
- 이미 처리한 요소에 다시 요청하지 않는지 확인한다.
로컬에서 광고가 안 보인다는 사실만으로 코드가 틀렸다고 판단하면 오래 헤맨다.
광고는 적게 시작한다
몇 달러라도 들어오면 재미가 있다.
하지만 광고 위치를 늘리는 것보다 글을 읽는 흐름을 해치지 않는지 먼저 보는 편이 좋다.
이 블로그도 본문과 목록 사이의 제한된 위치에서만 시험한다.
한 줄 요약
Astro에서 페이지 전환 후 AdSense가 비면 스크립트를 다시 넣기보다 새 광고 단위만 찾아 중복 없이 초기화하는 흐름부터 확인한다.