Skip to content

GatsbyにGoogle Adsenseを追加する

August 20

・gatsby

Google Adsenseは、

自分のウェブサイトに広告を掲載するだけで収益が得られる無料のサービスです。（Google AdSense – Google）

です。利用にはGoogleアカウントが必要です。広告の表示によって発生する収益は銀行口座で受け取ることができます。リンク先のサイトでGoogle Adsenseに登録後、広告を表示したいサイトのURLや表示する広告の種類などを設定し、生成されたコードを自分のサイトに記述すると広告が表示されるようになります。

当サイトはGatsbyで作成しているので、Gatsby製のサイトやブログで表示する方法を調べました。広告は2018年に導入された「自動広告」を利用します（以前は「react-adsense」というパッケージを利用して表示していましたが、「自動広告」の表示に切り替えました）。

以前までは広告を表示させたい場所にコードを記述していましたが、「自動広告」では最適な場所に自動で広告が表示されます。詳しくは自動広告についてのページをご覧ください。

実現したいこと

  • Gatsbyで作成したサイトにGoogle Adsenseを導入して広告を表示する （Google Adsenseへの登録手順の説明は省きます）

事前準備

Gatsbyのプラグイン「gatsby-plugin-google-adsense」をインストール

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

gatsby-config.jsにIDを指定

インストールしたプラグインをconfigに記述します。 publisherId の「xxxxxxxxxx」は、Google Adsenseで発行されたご自身のIDの数字に変更してください。IDは「Google Adsense > アカウント > 設定 > アカウント情報」で確認できます。

plugins: [
  {
    resolve: `gatsby-plugin-google-adsense`,
    options: {
      publisherId: `ca-pub-xxxxxxxxxx`,
    },
  },
];

Google Adsenseで自動広告を設定する

「自動広告の設定方法」ページの手順1〜6までを行います。先にインストールしたプラグインで「gatsby-config.js」にIDを設定したことで、自動的に <head> タグ内にコードが挿入されるため、7〜8の手順は不要です。

最後に

自動広告の設定では表示する広告の種類を選ぶことができますが、全てをオンにしてしまうとページ内が広告だらけになってしまうことがあるようです。適度に広告を表示させたい場合「Googleアドセンス自動広告の設定を自在に操るテクニック」で解説されているような設定を行うことをおすすめします。

Tags

react how-to