Gatsby에 구글 애드센스 광고 넣기 | Eric's DevLog (데브로그)

author

postNo

status

thumbnail

description

HEAD부분에 ADS 기본 코드를 심기

Gatsby역시 React로 돌아가는 프로젝트이다보니 head에 코드를 넣기 위해서는 `react-helmet`을 사용한다.

$npm install --save gatsby-plugin-react-helmet

gatsby-config.js

plugins: [
`gatsby-plugin-react-helmet`
]

플러그인 추가

helmet에 ads 코드 넣기

적당한 컴포넌트에 helmet코드를 넣어준다.

<Helmet>
    <script async custom-element="amp-auto-ads"
            src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
    </script>
</Helmet>

모든 세팅이 끝났다! 광고를 넣을 자리에 광고만 심으면 끝

광고 넣기

adsense.js

import React from 'react';
import AdSense from 'react-adsense';

const Adsense = ({ client, slot }) => {
  return (
    <AdSense.Google
      client={client}
      slot={slot}
      style={{ display: 'block' }}
      format='auto'
      responsive='true'
    />
  )
};

export default Adsense;

위와같은 컴포넌트를 만들고, 광고를 넣을자리에서

<Adsense client="ca-pub-xxx" slot="xxx" />

위 코드만 넣어주면 된다.

HEAD부분에 ADS 기본 코드를 심기

Gatsby역시 React로 돌아가는 프로젝트이다보니 head에 코드를 넣기 위해서는 react-helmet을 사용한다.

gatsby-config.js

helmet에 ads 코드 넣기

광고 넣기

Gatsby역시 React로 돌아가는 프로젝트이다보니 head에 코드를 넣기 위해서는 `react-helmet`을 사용한다.