리액트에 구글 애드센스 다는 방법

React와 같은 SPA의 경우 Google 애드센스(Adsense)는 기존 요청마다 HTML을 반환하는 SSR을 전제로 하므로 배포를 위해 궁리가 필요하다. 공식 문서에 SPA에 대응하는 가이드가 없기 때문에, 어떻게 도입하는지 글로 작성했다.
애드센스 광고 유형은 반응형이 가능하며 권장되는 디스플레이 광고를 사용한다. (설정 필요 없음)

이 글에서는 별도의 패키지를 사용하지 않는다.

 

패키지를 도입하지 않는 이유

패키지를 도입할지의 판단 기준으로서, 독자적인 개발 공수와 번들 사이즈 증가를 대비했을 때, 도입하는 편이 메리트가 큰지 어떤지로 보고 있다.
이번 경우 애초에 광고가 단순화된 것으로 패키지로 처리해야 할 처리가 없다고 판단했다.
또 패키지 도입 시의 단점으로서 갱신 빈도가 낮으면 트렌드로부터 남겨지는 것이 싫기 때문에 대응할 수 있는 것은 스스로 대응하고 싶다. (클래스 컴포넌트나 후크 미사용 등)

 

우선 Adsense 페이지 읽기 (SSR 용)

공식 문서 : https://support.google.com/adsense/answer/9183566
광고를 관리 화면에서 만들고 그 코드를 붙이면 된다.

(참고 : https://support.google.com/adsense/answer/9190028?hl=ko)

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Homepage Leaderboard -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

스크립트를 읽고, ins 태그 하나 설치하고, 나머지는 push()를 실행하면 끝

 

실제로 앱에 도입

그럼 먼저 Adsense 도입을 위해 index.html에 스크립트 로딩 라인을 추가한다.
(adsbygoogle.js는 한 번 읽어야 하기 때문에 index.html에서 읽어 둔다)

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 自動広告併用なら以降が必要 -->
<script>
  (adsbygoogle = window.adsbygoogle || []).push({google_ad_client: '%REACT_APP_GOOGLE_AD_CLIENT%',enable_page_level_ads: true});
</script>

 

스크립트를 읽는 행은 좋으며 스크립트의 내용이 약간 다르다.
이는 자동 광고를 함께 사용하기 때문에 자동 광고를 사용하지 않는 경우에는 필요하지 않다.
SPA의 경우, 자동 광고가 효과를 낼 수 있는 것은 최초 액세스 페이지만이기 때문에 사용하는 사람은 소수라고 생각된다.
다만 자동 광고는 오버레이 광고라고 하는 것이 있어, 자동 광고로 밖에 낼 수 없기 때문에 같이 사용하고 있다.

이야기를 되돌리면 adsbygoogle.js를 로드하면 window.adsbygoogle에 push()메소드를 소유하는 객체가 설정된다. 이제 adsbygoogle을 사용할 준비가 되었다.

 

애드센스용 구성 요소 만들기

이제 광고를 표시하는 구성 요소(여기서는 AdsCard로 명명)를 만든.

import React, { useEffect } from 'react';

export default function AdsCard(props) {
    useEffect(() => {
        if (window.adsbygoogle && process.env.NODE_ENV !== "development") {
            window.adsbygoogle.push({});
        }
    }, [])

    return (
        <ins className="adsbygoogle"
            style={{ "display": "block" }}
            data-ad-client={process.env.REACT_APP_GOOGLE_AD_CLIENT}
            data-ad-slot={process.env.REACT_APP_GOOGLE_AD_SLOT}
            data-ad-format="auto"
            data-full-width-responsive="true"></ins>
    );
}

 

우선은 return 안을 보자. 광고를 만들고 받은 

는 다음과 같다.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="<<your-ad-client>>"
     data-ad-slot="<<your-ad-slot>>"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

우선은 class을 className에 기계적으로 변경. (React의 기본)
다음 style값 {{...}}으로 기계적으로 변경. (React의 기본)
마지막으로 그대로도 좋지만 process.env.REACT_APP_GOOGLE_AD_*라는 환경 변수를 만들어 저장하고 있다.
환경 변수에 대해 알고 싶다면 CreateReactApp 문서를 참조해라.
https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

 

나머지는 함수 시작 useEffect()이다.
광고를 게재하려면 adsbygoogle.push({})통화가 필요하므로 useEffect()를 사용하여 한 번 호출하도록 한다.
개발 환경에서는 광고가 허용되지 않으므로 403 회신이 발생한다.
그것을 방지하기 위해 조건에 process.env.NODE_ENV !== "development"​​를 추가한다.

이제 컴포넌트가 완성되었으므로, 나머지는 광고를 보고 싶은 곳에 붙이면 프로덕션 환경에서 광고가 게재된다.

 

- 원글 : https://qiita.com/bob_yama/items/2b24fca112587a1bf8e8