ちょっと株式会社 社員ブログ
BlogGatsby.js に Google Analytics を導入する

SHARE
こんにちわ、ちょっと株式会社 エンジニアのたっちーです。
この記事は、web制作をする上でほぼ導入が必須となる。Google Analytics を Gatsby.js に導入する際の忘備録になります。
この記事公開時点の環境情報は以下です。
- gatsby-plugin-google-gtag: 4.6.0
- gatsby: 4.4.0
Google Analyticsで測定IDを取得する
ホーム画面 > 設定 > データストリーム(プロパティ) > 測定ID の順でIDを取得してください。
取得したIDは後ほど、利用するので控えておいてください。
Gatsbyに gatsby-plugin-google-gtag を追加する
下記コマンドを利用してGatsbyにgatsby-plugin-google-gtagを追加します。
npm install gatsby-plugin-google-gtag
# yarn を利用している場合は下記を使用
yarn add gatsby-plugin-google-gtag
インストールが完了したら、gatsby-config.jsでpluginの設定をします。
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-google-gtag`,
options: {
trackingIds: ["G-XXXXXXXXXX"], // 控えておいた、測定IDを記載します。
pluginConfig: {
head: true // headタグに記載されるようにコンフィグを設定します。
}
}
}
]
};
以上で設定完了となります。
※ 開発環境では、gtag.jsの設定が埋め込まれません。gatsby build
によってビルドされたコードにはgtag.jsの設定が埋め込まれています。
1995年生まれ。2018年にweb業界に足を突っ込んだ同人イラストレーター。
現在ではフロントエンド領域を生業としながら幅広くwebをカバーしてます。
コーヒーとジャパンサブカルと技術のお話が大好きです。
ちょっと社では「たっちー」の愛称で呼ばれ、SNSでは「hanetsuki」と言う名前で活動しています。