검색
검색
공개 노트 검색
회원가입로그인

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

next에 구글 애드센스 달기

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

_document.js 파일 Head에 adsense script 태그 넣기

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}

ad-client와 ad-slot은 자신의 코드를 넣자.

중요한 건 key를 넣어서 pageId가 바뀌었을 때 넥스트가 이를 알고 화면을 다시 로드하도록 하는 것이다. 이렇게 식별할 수 있는 걸 넣지 않으면 next가 바뀌어도 리렌더링 하지 않는다.

ins는 만약 자동 광고를 넣었다면 필요 없을 것 같다. 구글이 알아서 위치를 정하기 때문이다.

이렇게 하면 next에서 예쁘게 구글 광고가 잘 나온다!

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

사용자들이 자신의 애드센스를 넣을 수 있게 작업도 진행 중이다. 서브도메인은 아키텍처의 변화를 의미해서 작업이 꽤 많다.

틸노트를 연합형 블로그 + 독립형 블로그 형태로 만들 수 있게 해서 따로 또 같이의 느낌을 구현해 보려고 한다. 어떤 블로그 플랫폼의 one of them이 아니라 자신의 정체성과 생각을 표현할 수 있는 사이트가 되었으면 좋겠다. 느슨한 형태의 연대를 구축하고 싶다.

조회수 : 839
공유하기
카카오로 공유하기
페이스북 공유하기
트위터로 공유하기
url 복사하기