Skip to content
DevBJ
Go back

Astro에서 AdSense가 페이지 전환 후 안 보일 때 확인할 것

Advertisement
Updated:
Editor

첫 화면에서는 광고가 보이는데 다른 글로 이동하면 빈자리만 남는다.

한 문장부터.
Astro가 문서 전체를 다시 불러오지 않으면 AdSense 초기화 코드도 자동으로 다시 실행되지 않을 수 있다.

먼저 확인할 것

개발자 도구에서 두 가지를 본다.

  1. 첫 페이지에서 AdSense 스크립트가 한 번만 로드되는가
  2. 페이지 전환 뒤 새 <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);

확인 순서

  1. 광고 차단 확장 기능을 끈다.
  2. 실제 배포 주소에서 확인한다.
  3. AdSense 로더가 한 번만 들어갔는지 본다.
  4. 페이지 전환 뒤 astro:page-load가 발생하는지 본다.
  5. 새 광고 요소의 폭이 0이 아닌지 확인한다.
  6. 이미 처리한 요소에 다시 요청하지 않는지 확인한다.

로컬에서 광고가 안 보인다는 사실만으로 코드가 틀렸다고 판단하면 오래 헤맨다.

광고는 적게 시작한다

몇 달러라도 들어오면 재미가 있다.
하지만 광고 위치를 늘리는 것보다 글을 읽는 흐름을 해치지 않는지 먼저 보는 편이 좋다.

이 블로그도 본문과 목록 사이의 제한된 위치에서만 시험한다.

한 줄 요약

Astro에서 페이지 전환 후 AdSense가 비면 스크립트를 다시 넣기보다 새 광고 단위만 찾아 중복 없이 초기화하는 흐름부터 확인한다.


Share this post on:

Previous Post
Codex로 기술 블로그를 쓸 때 AI와 사람이 나눠야 할 일
Next Post
lwIP에서 UDP broadcast가 안 나간다: SO_BROADCAST와 netif flags를 같이 보자