Gatsby.js (13)

GatsbyブログにGoogle Analyticsを設定する

2022/3/27

（最終更新： 2022/3/27）

はじめに

Gatsbyブログのアクセス解析のため、Google Analyticsを導入する。

大まかな流れとしては

Google Analyticsにレポートを追加する
発行されたトラッキングIDをWebサイト側の<head>タグに設定する

となる。

ただし、<head>タグへの設定は、GatsbyのようなSSGの場合手動では難しい。

そのため、gatsby-plugin-google-gtagというプラグインを使うことになる。

はじめに
Google Analytics側の設定
- 新たなアカウントを作成
- AnalyticsのトラッキングID確認
Webサイトにタグを埋め込む
アクセス確認
つまづいたところ
- 内部トラヒックフィルタ
- ユニバーサルアナリティクスプロパティの設定削除
自分のアクセスを除外する設定
おわりに
参考文献

Google Analytics側の設定

新たなアカウントを作成

Google Analyticsの画面から「管理」ボタンを選択し、「アカウント作成」を選ぶ。

名前とデータ提供範囲を設定する。

プロパティを設定する。

※ユニバーサルアナリティクスプロパティの設定は、変に競合するかもしれないのでやらないほうがよさそう。

アンケートに回答し、利用規約に同意する。

AnalyticsのトラッキングID確認

「プロパティの管理」⇒「データストリーム」にアクセス。

Gで始まるトラッキングIDを確認する。

Webサイトにタグを埋め込む

gatsby-plugin-google-gtagプラグインのインストール

npmインストールを実施。以前は、gatsby-plugin-google-analyticsが使われていたらしいが、今後はgatsby-plugin-google-gtagを使うように、と記載がされていたためこちらを利用することにする。

$ npm install gatsby-plugin-google-gtag

参考資料

gatsby-plugin-google-analytics | Gatsby

gatsby-config.jsの設定

gatsby-config.jsにプラグイン設定を追加する。

gatsby-config.js

module.exports = {
  plugins: [
    {
        resolve: `gatsby-plugin-google-gtag`,
        options: {
          trackingIds: [
            "G-XXXXXXXXXX", // Google Analytics / GA
          ],
          pluginConfig: {
            // Puts tracking script in the head instead of the body
            head: true,
          },
        },
    },
  ],
}

ビルド

本番環境にビルド、デプロイしてみる。

ソースを見ると、

<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
      
      
      if(true) {
        window.dataLayer = window.dataLayer || [];
        function gtag(){window.dataLayer && window.dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-XXXXXXXXXX', {"send_page_view":false});
      }
</script>