Astro에서 구글 애드센스 "data-astro-exec" 오류 해결

Astro에서 구글 애드센스 “data-astro-exec” 오류 해결 및 광고 자동 로드하기

Astro 프레임워크로 블로그를 운영하면서 구글 애드센스(Google AdSense)를 적용할 때, 콘솔창에 다음과 같은 오류가 뜨며 광고가 나오지 않는 경우가 있습니다.

AdSense head tag doesn't support data-astro-exec attribute.

이 글에서는 이 오류가 발생하는 원인과, Astro의 View Transitions 환경에서도 광고가 끊김 없이 나오게 하는 완벽한 해결 방법을 소개합니다.

1. 오류 원인: 왜 발생하는 걸까?

Astro는 성능 최적화를 위해 스크립트를 분석하고 관리합니다. 특히 ClientRouter (View Transitions)를 사용하면, Astro는 스크립트가 중복 실행되는 것을 막기 위해 <script> 태그에 data-astro-exec라는 내부 속성을 강제로 주입합니다.

하지만 구글 애드센스 스크립트는 보안을 위해 자신의 태그에 예상치 못한 속성이 추가되는 것을 허용하지 않습니다. 이 충돌로 인해 스크립트 로드가 거부되는 것입니다.

2. 해결 방법: 우회 전략 (Dynamic Injection)

Astro가 HTML 태그를 직접 수정하지 못하도록, 자바스크립트를 이용해 애드센스 스크립트를 동적으로 삽입하는 방법을 사용해야 합니다. 또한, 페이지가 전환될 때마다 광고를 다시 호출하는 로직이 필요합니다.

Layout.astro 파일의 <head> 섹션을 다음과 같이 수정하세요.

---
// Layout.astro 상단 부분 생략
import { ClientRouter } from "astro:transitions";
---

<!doctype html>
<html lang="ko">
  <head>
    <ClientRouter />

    <script is:inline>
      (function() {
        const adScript = document.createElement('script');
        adScript.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-YOUR_ID"; // 본인 ID 입력
        adScript.async = true;
        adScript.crossOrigin = "anonymous";
        document.head.appendChild(adScript);
      })();
    </script>

    <script is:inline>
      function handleAds() {
        // 아직 로드되지 않았고, 처리 중이지 않은 모든 광고 유닛 수집
        const pendingAds = document.querySelectorAll(
          'ins.adsbygoogle:not([data-ad-status="filled"]):not([data-ad-processing="true"])'
        );
        
        pendingAds.forEach(ad => {
          // 중복 처리 방지를 위한 마킹
          ad.setAttribute('data-ad-processing', 'true');
          try {
            (window.adsbygoogle = window.adsbygoogle || []).push({});
          } catch (e) {
            console.error("AdSense push failed:", e);
          }
        });
      }

      // 첫 페이지 로드 시 실행
      handleAds();

      // Astro View Transitions로 인해 페이지가 바뀔 때마다 실행
      document.addEventListener('astro:page-load', handleAds);
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

3. 코드의 핵심 포인트

is:inline 사용: Astro가 이 스크립트를 빌드 타임에 가공하지 않고 그대로 브라우저에 전달하게 합니다.
document.createElement: HTML에 직접 태그를 쓰지 않고 JS로 생성함으로써 Astro가 data-astro-exec 속성을 붙일 대상 자체를 없애버립니다.
astro:page-load 이벤트: SPA 방식의 페이지 전환이 일어나면 원래 광고가 새로 고쳐지지 않습니다. 이 이벤트를 통해 페이지가 바뀔 때마다 새로운 광고 태그(ins)를 찾아 활성화해 줍니다.
중복 방지 필터링: [data-ad-processing]이라는 임시 속성을 사용하여, 이미 push({}) 명령이 전달된 광고에 중복으로 명령이 가지 않도록 방어 로직을 짰습니다. (중복 호출 시 애드센스 에러 발생 방지)

마치며

Astro는 매우 빠르고 훌륭한 프레임워크지만, 애드센스와 같은 외부 서드파티 스크립트와는 약간의 마찰이 있을 수 있습니다. 위와 같은 방식으로 동적 삽입과 페이지 로드 이벤트 핸들링을 결합하면, 콘솔 에러 없이 깔끔하게 수익형 블로그를 운영할 수 있습니다.

이제 여러분의 블로그에서 광고가 정상적으로 출력되는지 확인해 보세요!

DevBJ | No Bio, Just Log
재테크와 기술, 두 마리 토끼를 잡는 삽질로그