[Astro] 광고 연동 (Google AdSense)

개요

이전 글 댓글 시스템 (Utterances)에서 댓글 시스템을 다루었습니다. 이번 글에서는 블로그 수익화를 위한 Google AdSense 광고 연동 방법을 설명합니다.

광고 연동은 크게 두 부분으로 나뉩니다. 첫째는 포스트 레이아웃의 고정된 위치(상단, 하단, 좌우)에 광고를 배치하는 것이고, 둘째는 마크다운 콘텐츠 중간에 광고를 삽입하는 것입니다. 후자를 위해 커스텀 rehype 플러그인을 개발했습니다.

Head.astro에서 Google AdSense 스크립트를 로드합니다. 이 스크립트는 모든 페이지에서 로드되어야 광고가 정상적으로 표시됩니다.

<!-- src/components/Head.astro -->
<script
  async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXX"
  crossorigin="anonymous"
></script>

async 속성을 사용하여 페이지 로딩을 차단하지 않도록 합니다.

광고 컴포넌트

광고 위치별로 개별 컴포넌트를 만들어 관리합니다. 이렇게 분리하면 각 위치의 광고를 독립적으로 수정하거나 비활성화할 수 있습니다.

src/components/ads/
├── TopAds.astro      # 포스트 상단
├── BottomAds.astro   # 포스트 하단
├── LeftAds.astro     # 좌측 사이드
├── RightAds.astro    # 우측 사이드
└── InFeedAds.astro   # 콘텐츠 내 (피드)

각 컴포넌트는 AdSense 광고 코드를 포함하며, PostLayout.astro에서 적절한 위치에 배치합니다.

<!-- src/layouts/PostLayout.astro -->
<TopAds />

<div class="container container-contents">
  <div class="row">
    <LeftAds />
    <article class="col-lg-8 col-md-10 mx-auto" data-pagefind-body>
      <slot />  <!-- 마크다운 콘텐츠 -->
      <InFeedAds />
    </article>
    <RightAds />
  </div>

  <BottomAds />
</div>

ads.txt 설정

광고 사기 방지를 위해 public/ads.txt와 public/app-ads.txt 파일을 배치합니다. 이 파일은 Google AdSense에서 제공하는 인증 정보를 포함하며, “이 사이트에서 이 광고 네트워크만 광고를 게재할 수 있다”는 것을 검증하는 역할을 합니다.

public/ 디렉토리에 배치하면 빌드 시 dist/ 디렉토리로 그대로 복사되어 https://deku.posstree.com/ads.txt로 접근할 수 있습니다.

커스텀 rehype-in-feed-ads 플러그인

레이아웃에 고정 배치하는 광고 외에, 마크다운 콘텐츠 중간에도 광고를 삽입하고 싶을 때가 있습니다. 이를 위해 rehype-in-feed-ads 플러그인을 개발했습니다.

사용법

마크다운 파일에서 광고를 넣고 싶은 위치에  주석을 작성하기만 하면 됩니다.

## 섹션 1

내용...

<!-- ad -->

## 섹션 2

내용...

빌드 시  주석이 자동으로 AdSense 광고 블록으로 교체됩니다.

플러그인 구현

플러그인은 HAST(HTML 구문 트리)를 재귀적으로 순회하면서  주석 노드를 찾아 광고 HTML로 교체합니다.

// src/plugins/rehype-in-feed-ads.mjs
const AD_HTML = `<div class="in-feed-ads ads-container">
  <div class="ads-block ads-left">
    <ins class="adsbygoogle" ... data-ad-slot="2718813593"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  </div>
  <div class="ads-block ads-center">
    <ins class="adsbygoogle" ... data-ad-slot="6492035359"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  </div>
</div>`;

function replaceInChildren(children) {
  const result = [];
  for (const child of children) {
    if (
      child.type === 'raw' &&
      child.value &&
      child.value.trim() === '<!-- ad -->'
    ) {
      result.push(createAdNode());
    } else if (child.type === 'comment' && child.value.trim() === 'ad') {
      result.push(createAdNode());
    } else {
      if (child.children) {
        child.children = replaceInChildren(child.children);
      }
      result.push(child);
    }
  }
  return result;
}

export default function rehypeInFeedAds() {
  return (tree) => {
    if (!tree.children) return;
    tree.children = replaceInChildren(tree.children);
  };
}