typememo.jp
eyecatch thumbnail

GatsbyJS に Google Adsense のプラグインを入れて自動広告を表示する方法

Profile picture
Takeru Yamada
2021.04.22
#tech
#gatsby
#adsense

Contents

はじめに

opening

GatsbyJS に Google Adsense をプラグインを使って導入する方法についての紹介記事です．

プラグインを npm コマンドでインストールして gatsby-config.js ファイルを編集するだけです．

ややこしいことがなくて簡単だったのですが，紹介している記事が少なかったので加勢しようと思いました．

参考:

@isamrish/gatsby-plugin-google-adsense をインストールする

install plugin

@isamrish/gatsby-plugin-google-adsense をインストールしてください．

$ npm install @isamrish/gatsby-plugin-google-adsense

あとは gatsby-config.js を更新するだけです．

注意: gatsby-plugin-google-adsense をインストールしてはいけない

ここで一つ注意点があります． gatsby-plugin-google-adsense をインストールしないでください．

gatsby-plugin-google-adsense は GatsbyJS 公式サイトのプラグイン検索ではヒットしませんが， Google 検索で gatsbyjs google adsense のように検索するとヒットします．

gatsby-plugin-google-adsense の View plugin on Github をクリックすると 404: Not Found がレスポンスとして返ってきます． ということはおそらくメンテナンスされていないプラグインなのでしょう． 使わない方が良いです．

GatsbyJS 公式サイトのプラグイン検索で adsense と検索すると， (https://www.gatsbyjs.com/plugins/?=adsense) @isamrish/gatsby-plugin-google-adsense だけがヒットします．

GatsbyJS のプラグインを探す時は公式サイトのプラグイン検索を使いましょう， という教訓になりました．

gatsby-config.js に googleAdClientId と head を追加する

update config

gatsby-config.js に次のコードを追加しましょう．

googleAdClientId の ?????????????? はご自身の ID に書き換えてください．

// gatsby-config.js
    {
      resolve: `@isamrish/gatsby-plugin-google-adsense`,
      options: {
        googleAdClientId: `ca-pub-?????????????????`,
        head: true,
      },
    },

後は，デプロイしてあげれば head タグに google adsense の script タグが自動挿入されます．

とっても簡単ですね．

あとは Google Adsense に審査を申し込み，審査に合格するまで待ちましょう．

審査に合格したら，Google Adsense の広告設定をすれば ok です．

価値のある記事を書いて，多くの人に読んでもらって，その対価としてお金をいただく．

副業の一歩，踏み出せると良いですね：）

おわりに

ending

GatsbyJS に Google Adsense を導入する方法についての紹介でした．

簡単すぎて拍子抜けしたと思います．

プラグイン使って手間がほとんどかからずに，広告を掲載できるもんなんですね．

最後に余談なのですが，プラグインの Github issue #12 には，

Do not use this plugin!

1. React is a dependency
This plugin has react as a dependency: it should not be.
If you use this plugin, you'll end up with 2 different React packages
in your bundle, increasing its size significantly.

2. You don't even need it!
Want ads? Copy .cache/default-html.js to your src folder, renaming it to html.js.
Add your AdSense script tag to the head of that file.
This replicates this plugin exactly.

というように，

このプラグインは使うべきではない， なぜなら異なる React パッケージをバンドルしてしまい アプリケーションのサイズがめっちゃ大きくなっちゃうからだ．

このプラグインは使う必要ないで，と言われています．

さらに広告が欲しい私たちに向けて，

広告が欲しいのか? 欲しけりゃくれてやる． 探せー!!! この世の全てを .cache に置いてきた!

てな感じで .cache/default-html.js を src/html.js として保存し， src/html.js に Google Adsense の script タグを追加すれば良いそうです．

大広告時代の幕開けですね．

最後までお読みいただきありがとうございました！

今日も良い一日を：）

執筆機材

関連記事