ブログをやる以上ドメイン代金くらいは稼ぎたい。そこでGoogle AdSenseをGatsbyに導入する。
GatsbyでGoogleAdSenseを導入するときはreact-adsenseが便利です。
npm install --save react-adsense
GatsbyJSでは<script>
タグをヘッダーに入れる場合は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;
第21回 | GatsbyJSにソーシャルボタンを追加する |
第22回 | GatsbyJSにGoogle Analyticsを導入する |
第23回 | GatsbyJSにGoogle AdSenseを導入する |
第24回 | GatsbyJSでStaticにファイルを置く |
第25回 | GatsbyJsでWebpackバンドルサイズを確認する |
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント