2019-01-28に投稿

GatsbyJSにGoogle Analyticsを導入する

GatsbyJSにGoogle Analyticsを導入する

Google Analyticsを導入するにはどうすればいいのか?
Gatsbyならgatsby-plugin-google-analyticsで簡単に実装できます。

やったこと

  • gatsby-plugin-google-analyticsインストール
  • gatsby-config.jsを設定
  • siteConfig.jsを設定

gatsby-plugin-google-analytics

まずは、gatsby-plugin-google-analyticsをnpmでインストールします。

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

gatsby-config.js

次にgatsby-config.jsを設定します。
/data/siteConfig.jsにデータはまとめて管理する仕様にしているのでsiteConfig.jsをちゃんと読み込むようにしましょう。

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

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-google-analytics",
      options: {
        trackingId: config.googleAnalyticsID
      }
    },
  ],
}

siteConfig.js

siteConfig.jsは以下のように設定します。

googleAnalyticsID: "UA-XXXXXXX-X", // GA tracking ID.

GoogleAnalyticsを確認する。

Google Analyticsで確認してみましょう。

Originally published at www.corylog.com

view_list [連載] ブロガー向けGatsby講座
第20回 GatsbyJSに画像付きカードメニューを作成する
第21回 GatsbyJSにソーシャルボタンを追加する
第22回 GatsbyJSにGoogle Analyticsを導入する
第23回 GatsbyJSにGoogle AdSenseを導入する
第24回 GatsbyJSでStaticにファイルを置く

aocory

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント