typememo.jp

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

2020.10.20

#tech#gatsby
Takeru Yamada

Contents

はじめに

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

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

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

参考:

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

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

$ npm install --save gatsby-plugin-google-adsense

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

gatsby-config.js に publisherId を追加する

gatsby-config.js に次のコードを追加してあげてください．

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

// In your gatsby-config.js file
plugins: [
    {
      resolve: `gatsby-plugin-google-adsense`,
      options: {
        publisherId: `ca-pub-xxxxxxxxxx`
      },
    },
]

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

めちゃめちゃ簡単でした！

おわりに

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

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

プラグイン使って手間がほとんどかからずに自動広告を掲載できるなんてなんて良い技術でしょう．

gatsby-plugin-google-adsense を作っていただいた方に，この場を借りて御礼申し上げます．

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

山田武尊を応援していただけるととても嬉しいです！

愛用品