gatsby.js의 블로그에 Google AdSense 광고를 붙이는 방법

7721 단어 자바스크립트gatsbyReactGoogleAdsense

head에 코드 삽입



애드센스에 신청하면 head 태그 내에 코드를 붙이도록 지시된다.



그 밖에도 방법은 있는 것 같지만, 잘 되지 않아 최종적으로 플러그인을 선택하고 있는 사람이 많았으므로, 이번은 gatsby-plugin-google-adsense 라는 플러그인을 인스톨 해 head 태그내에 코드를 붙여 받으세요.
$ yarn add gatsby-plugin-google-adsense

gatsby-config.js에 다음 코드 추가

gatsby-config.js
plugins: [
  // 省略
  {
    resolve: `gatsby-plugin-google-adsense`,
    options: {
      publisherId: process.env.GOOGLE_ADSENSE_ID,
    },
  },

Google 애드센스에 심사를 신청합니다.



그런데 코로나의 관계로, , 와 7월의 후반 정도부터 5회위 신청했지만, 모두 심사에 떨어져 버렸지만, 8월 후반이 되어 드디어 심사에 지나갔습니다.



ads.txt 파일 업로드



드디어 광고를 붙일 수 있다고 생각했는데, 다음과 같은 메시지가.



gatsby 프로젝트의 루트 바로 아래에 static 폴더를 만들어 ads.txt를 설치. build하여 업로드합니다.



오류가 해결될 때까지 기다리십시오. 해소까지 며칠 걸리는 것 같습니다. 덧붙여서 자신은 이틀 정도로 해소되었습니다.

광고 붙이기



마침내 광고를 붙일 수 있습니다.

애드센스 광고를 react에 대응시키기 위해 react-adsense 플러그인을 설치합니다.
$ yarn add react-adsense
.cache 폴더의 default-html.js를 src/html.js로 복사합니다.
$ cp .cache/default-html.js src/html.js
html.js 의 head 안에 script 추가

html.js
import React from 'react'
import PropTypes from 'prop-types'

export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />

        {/* GoogleアドセンスのJSを読み込む */}
        <script
          async
          src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
        ></script>

        {props.headComponents}
      </head>

광고의 구성 요소를 만듭니다. .

src/components/adsense.js
import React from 'react'
import AdSense from 'react-adsense'

const Ad = () => (
  <div className="ad">
    <AdSense.Google
      client={process.env.GOOGLE_ADSENSE_ID}
      slot=""
      style={{ display: 'block' }}
      responsive="true"
      format="auto"
    />
  </div>
)

export default Ad

그리고는 광고를 표시하고 싶은 장소에 Ad 태그를 붙여, build 후 업로드하면 완성!

붙인 후 바로 애드센스 스크립트가 403 오류가 되어 버려서 아무것도 표시되지 않았습니다만, 조금 지나면 표시되게 되었습니다.
Nx를 사용하여 gatsby 프로젝트를 시작하는 이점
「Vercel + freenom + Getform.io」구성으로 「폭속 + 관리비 완전 무료」의 포트폴리오를 GatsbyJS로 만들면 행복도가 높아진 이야기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage