chot Inc.

ちょっと株式会社 社員ブログ
Blog
  • ホーム
  • ブログ
  • Gatsby.js に Google Analytics を導入する

Gatsby.js に Google Analytics を導入する

ナレッジ・ノウハウ
Gatsby.js に Google Analytics を導入する

SHARE

こんにちわ、ちょっと株式会社 エンジニアのたっちーです。
この記事は、web制作をする上でほぼ導入が必須となる。Google AnalyticsGatsby.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」と言う名前で活動しています。

関連記事

Copyright © 2022, chot inc.