next 에서 route 변화에 따라 로딩되는 구글 애드센스 달기

tilnote2023-01-04 16:57

next에 구글 애드센스 달기

next 애플리케이션에 애드센스를 달아보자. 나의 경우 페이지 router 가 변화할 때 마다 광고를 다시 보여주도록 세팅했다.

import Document, { Html, Head, Main, NextScript } from "next/document";
export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script
            async
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-************"
            crossorigin="anonymous"
          />
           ...
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

document header에 넣는게 가장 안정적인 것 같다. 원래 동적으로 로드되게 했었는데 애드센스 심사에서 한번 승인 거절당했다. 아마 전체 페이지에서 javascript 파일이 잘 로드되는지 확인하는듯 하다.

상세페이지에서 애드센스 로드

js 파일이 로드가 되면 애드센스를 코드로 한번 initialize 해줘야 광고가 나온다. 나의 경우 상세 page에서만 광고를 보여주는 것으로 결정했고 다음과 같이 페이지의 id가 바뀔 때마다 광고를 바꿔서 보여주도록 했다. 왜냐하면 next에서 router 변화는 애드센스에서는 페이지 변화인지 모르기 때문이다.

  // router.query.pageId가 변경될 때마다 실행
  useEffect(() => {
    if (router.query && router.query.pageId) {
      // next google adsense
      if (
        typeof window !== "undefined" &&
        window.adsbygoogle
      ) {
        window.adsbygoogle = window.adsbygoogle || [];
        window.adsbygoogle.push({});
      }
    }
  }, [router.query.pageId]);

javascript가 제대로 로드 됐다면 window.adsbygoogle 에 저장을 해주고 없으면 그냥 빈 배열 하나를 넣는다. 이유는 이 객체에 빈 오브젝트 {} 를 하나 푸쉬해주기 때문이다.

ins에 광고 표시해주기

display ads를 선택했다면 어디에 광고가 표시되는지 지정할 수 있다. 광고가 표시 되기 원하는 부분에 다음과 같이 html 을 넣어주면 된다.

{pageId ? 
  <div
    key={`adsense-${pageId}`}>
      <ins
        className="adsbygoogle"
        style={{ display: "block" }}
        data-ad-client="ca-pub-****************"
        data-ad-slot="**********"
        data-ad-format="auto"
        data-full-width-responsive="true"
      ></ins>
  </div>
: null}