Next.js 블로그에 google adsense 연결하기

개요

애드센스를 블로그에 연결해보겠습니다.

참고로, 이 블로그는 Tailwind CSS Blog Starter 템플릿 코드로 프로젝트로 생성했습니다.

구글 애드센스

구글 애드센스 > 광고 > 수정 > 자동 광고를 선택 후 [사이트에 적용] 버튼을 클릭합니다.
(자동 광고의 경우 오버레이 등 수동 광고에서는 적용되지 않는 광고들이 있기에 저는 자동 광고를 사용합니다.)
구글 애드센스 > 광고 > 코드 가져오기 링크를 클릭합니다.

팝업에서 알려주는대로 <head></head> 태그 사이에 붙여 넣으라고 하는 script를 복사합니다.

블로그 코드에 붙여넣기

1. `data/siteMetadata.js` 파일에 `googleAdsenseId` 추가

여기에 설정하지 않고 아래 _document.js 파일에 직접 코드를 넣으셔도 괜찮습니다.

저는 다른 코드에도 사용할 수 있도록 따로 분리했습니다.

const siteMetadata = {
  // ... 생략
  analytics: {
    // ... 생략
  },
  ads: {
    googleAdsenseId: 'ca-pub-xxxxxxxxxx',
  },
}

module.exports = siteMetadata

2. pages/_document.js 파일 수정

pages/_document.js 파일을 열어서 <Head> 태그 사이에 아래와 같이 코드를 추가합니다.

production 환경에서만 script를 불러오도록 isProduction 변수를 추가했습니다.

아래 코드와 같습니다.

import siteMetadata from '@/data/siteMetadata' // 추가
class MyDocument extends Document {
  render() {
    const isProduction = process.env.NODE_ENV === 'production' // 추가

    return (
      <Html lang="en" className="scroll-smooth">
        <Head>
          {/* 생략 */}
          <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
          {/* 추가 [[ */}
          {isProduction && (
            <script
              async
              src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${siteMetadata.ads.googleAdsenseId}`}
              crossOrigin="anonymous"
            ></script>
          )}
          {/* 추가 ]] */}
        </Head>
        <body className="bg-white text-black antialiased dark:bg-gray-900 dark:text-white">
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

이것으로 끝입니다.

로컬에서 동작을 확인하고 싶다면 아래 내용을 참고하세요.

3. 로컬에서 확인

production 환경에서만 script를 불러오도록 했기 때문에 로컬에서는 광고가 보이지 않습니다.

먼저, isProduction 변수를 임시로 true로 변경 후 진행합니다.

또한, 도메인이 일치하지 않으면 광고가 보이지 않기 때문에 로컬에서도 광고가 보이도록 hosts 파일을 수정합니다.

C:\Windows\System32\drivers\etc\hosts 파일을 열어서 아래 내용을 추가 후 저장합니다.
(혹시, 권한 문제로 저장이 되지 않는다면, 메모장을 관리자 권한으로 실행 후, 해당 파일을 열고, 아래와 같이 추가 후 저장합니다.)

127.0.0.1       local.본인이신청한애드센스도메인
# 예: 127.0.0.1       local.hlog.kr

http://local.본인이신청한애드센스도메인:3000 으로 접속해서 광고가 보이는지 확인합니다.

[ 참고 1 ] 자동 광고로 설정되어있지 않았거나, 따로 수동 광고 단위 코드를 추가하지 않았다면 광고는 보이지 않습니다.

[ 참고 2 ] Content Security Policy (CSP) 에러가 발생한다면, next.config.js 파일을 확인합니다.

ContentSecurityPolicy에 애드센스 관련 도메인들을 아래와 같이 추가해주거나
(개발자 도구에 나타난 에러 도메인을 각 위치에 넣어주었습니다.)

const ContentSecurityPolicy = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app *.googletagmanager.com *.googlesyndication.com *.googleadservices.com *.google.com;
  style-src 'self' 'unsafe-inline' giscus.app;
  img-src * blob: data:;
  media-src 'none';
  connect-src *;
  font-src 'self';
  frame-src giscus.app googleads.g.doubleclick.net *.google.com *.googlesyndication.com
`

또는 아래와 같이 CSP를 사용하지 않도록 설정합니다.

const securityHeaders = [
  // https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
  {
    key: 'Content-Security-Policy',
    value: '', //ContentSecurityPolicy.replace(/\n/g, ''),
  },
]

next.config.js 파일 수정은 서버 재시작이 필요합니다.
광고 확인이 끝났다면, isProduction 변수를 원래 코드로 복구합니다.
Content Security Policy에 추가해야할 URL은 구글 애드센스, 구글 애널리틱스 등의 변경에 따라 달라질 수 있습니다.

4. 수동 광고 단위 추가

자동 광고와는 별도로 수동 광고 단위를 추가로 붙이고 싶으시다면,

구글 애드센스 > 광고 > 광고 단위 기준에서 원하는 광고를 만들고, 해당 코드를 적용할 컴포넌트를 생성합니다.

저는 components/GAdsBanner.js 파일을 생성해서 아래와 같이 코드를 붙여넣었습니다.

import { useEffect } from 'react'
import siteMetadata from '@/data/siteMetadata'

const GAdsBanner = ({ slot }) => {
  const isProduction = process.env.NODE_ENV === 'production'

  useEffect(() => {
    if (!isProduction) return
    try {
      ;(window.adsbygoogle = window.adsbygoogle || []).push({})
    } catch (err) {
      console.log(err)
    }
  }, [])

  return (
    isProduction && (
      <ins
        className="adsbygoogle"
        style={{ display: 'block' }}
        data-ad-client={siteMetadata.ads.googleAdsenseId}
        data-ad-slot={slot}
        data-ad-format="auto"
        data-full-width-responsive="true"
      />
    )
  )
}

export default GAdsBanner