【Gatsby】Google Analyticsがうまく連携されない問題の解消法

Gatsbyで静的サイトを作り、Google Analyticsと連携を試みようと思った際に、謎にうまくいかずハマっていましました。

今回は同じような問題に遭遇されている方のために、自分が行なって解決できた方法をご紹介します。

個人的に、結局どういう原因だったのかは分からずじまいでしたが、一旦は連携できたのでどれかはうまくいくと思います。

（私の）Google Analyticsがうまく連携されない問題の解消法

私の場合は、以下の設定をするとGoogle Analyticsとうまく連携できました。

    {
      resolve: 'gatsby-plugin-google-gtag',
      options: {
        trackingIds: [
          'G-XXXXXXXX', // GA Measurement
        ],
        pluginConfig: {
          head: true,
        },
      },
    },

調べるといろんなオプションを設定できるみたいですが、とりあえずGoogle Analyticsとの連携だけなら上記だけでできるっぽいです。

公式リンク gatsby-plugin-google-gtag

（みんなの）Google Analyticsがうまく連携されない問題の解消法

以下に他の方々が成功しているっぽい設定方法やプラグインを紹介していきます。

gatsby-plugin-gtagを使う

私の場合は、『gatsby-plugin-google-gtag』を使っていますが、このほかにも『gatsby-plugin-gtag』というプラグインもあるようです。

以下のように設定すればできた人もいたみたいです。

plugins: [
    {
      resolve: `gatsby-plugin-gtag`,
      options: {
        trackingId: "UA-XXXXXXXXX-X",
        head: true,
        anonymize: true
      }
    },
  ]

公式リンク gatsby-plugin-gtag

pluginsの一番最初に記述する

「gatsby-plugin-gtag」を使う場合は、gatsby-config.jsのpluginsのリストの一番初めに記載することでも解決を望めるみたいです。

plugins: [
    {
      resolve: `gatsby-plugin-gtag`,
      options: {
        trackingId: "UA-XXXXXXXXX-X",
        head: true,
        anonymize: true
      }
    },
    // 他のプラグイン
  ]

違う設定値で試す

gatsby-plugin-google-gtagを使う場合に以下の設定値もお試しください。

plugins: [{
        resolve: 'gatsby-plugin-google-gtag',
        options: {
            trackingIds: [
                process.env.GA_MEASUREMENT_ID, // GA Measurement
            ],
            gtagConfig: {
                optimize_id: 'OPT_CONTAINER_ID',
                anonymize_ip: true,
                cookie_expires: 0,
            },
            pluginConfig: {
                head: true,
                respectDNT: true,
            },
        },
    }, 

これは海外の方のブログで紹介されていた方法です。

トマトソース

ちなみに、私はこれで解決とはなりませんでした。。。

Google Analyticsと連携できているか確認する方法

上記を試す際にGoogle Analyticsと連携できているかを確認するには、以下のコマンドでできます。

gatsby build
gatsby serve

gatsby devでは確認できない点にご注意ください。

というのも、GatsbyのGoogle AnalyticsのプラグインがProductionモードでのみ機能するようになっているためです。（参照）

トマトソース

これを使えばわざわざデプロイして確認する必要がないので、ラクですね。

Google Analyticsと連携するにはgatsby-config.jsの設定値をいろいろ試す：まとめ

今回はGatsbyで作成したウェブサイトにGoogle Analyticsを連携されない場合の解決法をお伝えしました。

ある人にはうまく行ったことも、他の人ではうまくいかないみたいなこともあるみたいなので、今回紹介したものを試していただいて、うまくGoogle Analyticsと連携してもらえればなと思います。

GatsbyとGoogle Analyticsの連携にお困りの方の一助となれれば幸いです。