幅広い知識と幅広いスキルを求められている系システムエンジニアです。リモートワークしかやりません。

GatsbyでGoogle Analyticsを設定する

これは簡単でした。

もう README 通りなのですが、 gatsby-plugin-google-analytics をインストールします。

yarn add gatsby-plugin-google-analytics

次に gatsby-config.js に設定を追記します。

module.exports = {
  siteMetadata: {
    author: 'tmnm',
    title: 'tmnm.tech',
  },
  plugins: [
    'gatsby-plugin-catch-links',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              linkImagesToOriginal: false
            }
          },
          {
            resolve: 'gatsby-remark-prismjs',
            options: {
              classPrefix: 'language-',
            },
          },
        ]
      }
    },
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-plugin-postcss-sass',
      options: {
        precision: 8,
      },
    },
    {      resolve: 'gatsby-plugin-google-analytics',      options: {        trackingId: 'UA-11111111-1',      },    },  ],
}

これだけで適用されます。簡単。ちなみに、ローカルでの稼働時(develop モード) には Analytics のコードは挿入されず、ビルドすることで Analytics が有効なコード が出力されます。ここがわからなくて最初「ん?」となりましたが、S3 にデプロイ したら有効になりました。

© 2023 @miiton