gatsby

GatsbyサイトにGoogle Analyticsを導入

GatsbyサイトにプラグインでGoogle Analyticsを導入する公式ドキュメントを読んだので、概要を紹介する。

gatsby-plugin-google-analytics

1.Google Analytics のトラッキング ID を取得

Gatsby サイトに Google Analytics を導入するにはトラッキング ID が必要。

入手手順 ・Google Analyticsに行って、Google アカウントでログイン。 ・Google Analytics のアカウント名を決めて、サイトを登録。 ・[⚙ 管理]→[<> トラッキング情報]→[トラッキングコード] ・このページにトラッキング ID(UA-111111111-1 みたいなの)がある。

2.インストール

Gatsby サイトにプラグインを導入。 方法はターミナルで次のコマンド実行するだけ。

npm install --save gatsby-plugin-google-analytics

3.ソースコード変更

プラグイン導入できたらソースコードを編集する。

プロジェクトの gatsby-config.js ファイルを次のように編集。

module.exports = {
  //siteMetadataとか色々書いてる。
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: 'UA-111111111-1',
        head: false,
      },
    },
  ],
  //他のplugins
};

注意点 ・Google Analytics プラグインは Gatsby-config.js の中で、他のどの plugins よりも最初にロードする必要あり。(上のコードブロックの通り)

・今回は最低限のオプションしか紹介していない。詳しくは公式ドキュメント読む。

・head オプションの値は true か false。   Google Analytics スクリプトをどこに置くかというオプション。   true→に置く。   false→に置く。(デフォルトは false)

・gatsby develop しているときにこのプラグインを導入しても動かない。  一度 gatsby build するとちゃんと動くはず。   gatsby serve で試してみるといい。

4.最後に

先ほども書いたが、
この記事は公式ドキュメントの最低限の内容についてしか書いていない。 詳しく知りたい人は公式ドキュメントを読んでみるといい。 公式ドキュメントといえど、短くて読みやすかった。
安心するといい。

最後まで読んでいただきましてありがとうございました。

Subscribe to テクマガ

Get the latest posts delivered right to your inbox

入力されたアドレス宛に案内のメールが届きます。