なつろぐ
HomeAboutblogcontact
Gatysby.jsにgatsby-plugin-google-gtagを導入
Gatsby.js
2022.01.18
カテゴリー：技術
#GatsbyJS

gatsby-plugin-google-gtag

GoogleアナリティクスのGatsby.js用のライブラリです。
gatsby-config.jsに記載するだけで使えるのでアナリティクスを導入したい方にはおすすめです。

gatsby-plugin-google-gtagの導入

npm install gatsby-plugin-google-gtag

Gatybyの設定ファイルに記述を追加します。 

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [
          "GA-TRACKING_ID", // 払い出された測定ID
        ],
        pluginConfig: {
          head: true, //　headタグ内に出すために記載
        },
      },
    },
  ],
}

今回は最低限の設定にしていますが、他にもオプションはある為、気になる方は公式ドキュメントを参照してみて下さい。

注意点(測定IDは環境変数に)

測定IDのベタ書きはよろしくないので、環境変数として記述しています。
自分はデプロイ先のNetfilyではEnvironment variablesにKey=GATSBY_TRACKING_ID、Value="測定ID"を記述しています。

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [
          "process.env.GATSBY_TRACKING_ID", // 払い出された測定ID
        ],
      },
    },
  ],
}

注意点(反映されない)

このプラグインは本番環境でしか、動かないのでローカルの開発環境ではgatsy deployではなく、gatsby build && gatsby serveを使って確認してみて下さい。 上手くいくとhtmlのheadタグ内に以下の記述が入っているはずです。

<link rel="preconnect" href="https://www.googletagmanager.com">
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
<script async="" src="https://www.googletagmanager.com/gtag/js?id=測定ID"></script>
戻る