GatsbyのサイトにGoogleアナリティクスをいれる(Netlify)

January 19, 2020

Google analyticsを導入する

Gatsbyで作成したブログサイトにGoogle analyticsを入れてどのくらいの訪問があるか計測してみましょう。

Google analyticsを設定してトラッキングIDを取得する

まずGoogle analyticsのページへ行きトラッキングIDを取得します。

Googleアカウトでログインしてサイトを登録します。

アカウント名を新しく決めて、測定対象をウェブで選択。

ウェブサイトの名前を好きなように決めて、サイトのURLを入力。あとはタイムゾーンと業種を適当に選んで終了。

左のメニューの管理画面へ

プロパティのトラッキング情報のトラッキングコードをクリックするとトラッキングIDが確認できます。

こちらをコピーしましょう。

Gatsbyのプロジェクトにプラグインをインストールする

Gatsbyではgatsby-plugin-google-analyticsのプラグインをいれれば簡単に導入できます。

まずはGatsbyのプロジェクトにプラグインをインストールしましょう。

terminal

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

//yarn
yarn add gatsby-plugin-google-analytics

gatsby-config.js を変更して先ほど取得したgoogleのトラッキングIDを埋め込みます。

公式でのページでは、

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "ここにトラッキングID",
      },
    },
    // 以下いろいろ設定省略
  ]
},

となっています。もちろんこれで動くのですが、GitHubにパブリックリポジトリでpushした場合丸見えなので少し隠してみます。いろいろ方法はあるとは思いますので参考までに。

1.NetlifyにHostingしている場合

GatsbyのサイトをNetlifyでHostingしている場合も多いかと思いますが、その場合はNetlify側のSettingで設定できます。 NetlifyをGitHubのリポジトリと連携してる場合はこちらが簡単でいいと思います。

まずNetilyにログインして自分のプロジェクトに入りSettingを選択。左側のメニューのBuild&developを選択、そしてEnviromentを選択。

New variableをクリックしてKey名とトラッキングIDを入力します。 Keyはなんでもいいのですが、定数という意味で大文字、なおかつわかりやすい名前ということでGOOGLE_ANALYTICS_TRACKING_IDとしておきます。そしてvalueにトラッキングIDを入力します。最後にsaveします。

最後にプロジェクトのgatsby-config.jsを編集します。先ほどKeyに設定した定数をtrackingId:に入力します。ただしここで少し注意が必要です。

Gatsby.js + Netlify でつくったサイトに Google Analytics を導入する　にもあるのですが記述する順番があります。

アナリティクスは<head>の直後に配置する必要がありますが、Head optionを有効にしなければbodyに付加されてしまい正常に動きません。それから、gatsby-plugin-google-analyticsをgatsby-config.jsのpluginsの一番最初で読み込む必要があります。

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: process.env.GOOGLE_ANALYTICS_TRACKING_ID,
        head: true,
      },
    },
    // 以下いろいろ設定省略
  ]
},

これで正常に動くはず。

2.configファイルで設定する場合

以下2つはNetlifyをGitHubと連携せずにbuiltを直接あげる場合に有効だと思います。

プロジェクトのroot直下にdata/siteConfig.jsを作成しそこでサイトのconfigを管理する方法です。

./data/siteConfig.js

const siteConfig = {
  siteUrl: "https://littlebylittle.work/",
  googleAnalyticsID: "UA-XXXXXXXX-1"
}

module.exports = siteConfig;

gatsby-config.js

const config = require("./data/siteConfig");

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: config.googleAnalyticsID,
        head: true,
      },
    },
    // 以下いろいろ設定省略
  ]
},

そして.gitignoreファイルに.data/siteConfig.jsを追記。

.gitignore

.data/siteConfig.js
node_modules/
public
.gatsby-context.js
.DS_Store
.intermediate-representation/
.cache/
.env
yarn.lock

これでbuild時に読み込まれ、pushしてもGitHubには反映されません。

3. .envファイルに設定する場合

ローカルの .envファイルに環境変数としてトラッキングIDを保存しておく方法です。 dotenvの説明は割愛しますがdevelopかbuildかによって環境を切り替えます。

root直下に.env.productionファイルを作成。

gatsby-config.js

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})
// 省略

dotenvを読み込んで.env.productionにトラッキングIDを書き込みます。前後中にスペースなどは入れないようにしてください。

.env.production

GOOGLE_ANALYTICS_TRACKING_ID:UA-XXXXXXXXX-1

.gitignoreにも追記します。

.gitignore

.env.*

こちらは上と一緒

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: process.env.GOOGLE_ANALYTICS_TRACKING_ID,
        head: true,
      }
    },
    // 以下いろいろ設定省略
  ]
},

これでbuildの時に自動で読み込まれます。