2019-01-30に投稿

GatsbyJSにGoogle AdSenseを導入する

GatsbyJSにAdSenseを導入する。

ブログをやる以上ドメイン代金くらいは稼ぎたい。そこでGoogle AdSenseをGatsbyに導入する。

やったこと

  • react-adsenseの導入
  • html.jsの作成
  • コンポーネントを作成
  • アップロードして確認

react-adsenseの導入

GatsbyでGoogleAdSenseを導入するときはreact-adsenseが便利です。

npm install --save react-adsense

html.jsの作成

GatsbyJSでは``タグをヘッダーに入れる場合はhtml.jsを作成し入れる必要がある。
/.cache/default-html.jsを/src/html.jsにコピーする。

cp .cache/default-html.js src/html.js

コンポーネントを作成

再利用することを見越してコンポーネントを作成する。
/components/Ad/index.js

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

const Ad = () => (
  <div>
      <AdSense.Google
        client="ca-pub-数字"
        slot="数字"
        format="rectangle"
        />
    </div>
  )
export default Ad;

確認

024-1.jpg

Originally published at www.corylog.com

view_list [連載] ブロガー向けGatsby講座
第21回 GatsbyJSにソーシャルボタンを追加する
第22回 GatsbyJSにGoogle Analyticsを導入する
第23回 GatsbyJSにGoogle AdSenseを導入する
第24回 GatsbyJSでStaticにファイルを置く
第25回 GatsbyJsでWebpackバンドルサイズを確認する

aocory

Crieitはβバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

関連記事

コメント