구글 애드센스 next.js 웹페이지에 추가하기

애드센스를 웹페이지에 넣기 위해서는 애드센스에서 발행해주는 스크립트를 <head/>에 넣어줘야합니다.

코드에서 head를 찾아보려고 했으나 못찾겠더라고요. next.js에선 스크립트를 로드하는 부분이 따로 있는데,

이걸 활용해서 애드센스 스크립트를 넣어줬습니다.

 

next에서는 약간 다르게 해야합니다.

 

1. 먼저 next용 script컴포넌트를 만든다.

애드센스 사이트에 들어가서 사이트 등록을 누르면 보여주는 스크립트가 있는데,

여기서 자신의 키 "ca-pub-***"이걸 복사해놓습니다.

<script data-ad-client="ca-pub-************" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

그다음에 아래 코드에 자신의 data-ad-client만 붙여넣습니다.

      <Script id="Adsense-id" data-ad-client="ca-pub-****12345"
        async strategy="afterInteractive"
        onError={ (e) => { console.error('Script failed to load', e) }}
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
      />

2. _app.js에 넣는다.

아래처럼 import해주시고, return( <> 아래에다가 만든 script컴포넌트를 _app.js 넣습니다. 

import Script from "next/script";

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const pid = router.asPath;
  const scrollRef = useRef({
    scrollPos: 0,
  });

  return (
    <>

      <Script id="Adsense-id" data-ad-client="ca-pub-***12345"
        async strategy="afterInteractive"
        onError={ (e) => { console.error('Script failed to load', e) }}
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
      />
  
      <Meta title="Home 1" />

      <Provider store={store}>
        <ThemeProvider enableSystem={true} attribute="class">
            <UserContext.Provider value={{ scrollRef: scrollRef }}>
              {pid === "/login" ? (
                <Component {...pageProps} />
              ) : (
                <Layout>
                  <Component {...pageProps} />
                </Layout>
              )}
            </UserContext.Provider>
        </ThemeProvider>
      </Provider>
    </>
  );
}

export default MyApp;

3. 확인한다.

적용한 후에는 f12를 눌러서 adsense를 검색해봅니다. 잘적용됐는지 확인하고, 애드센스에서 허가해주기를 기다립니다.

끝!

 

참고: https://medium.com/nextjs/how-to-add-google-adsense-in-your-nextjs-89e439f74de3

How to add Google AdSense in your Nextjs?