DocusaurusでGoogle Analyticsを導入する - plugin-google-gtagの設定手順
どうも、Shinyaです。この記事では、DocusaurusにGoogle Analytics（GA4）を導入する方法について解説します。Docusaurus公式プラグインのplugin-google-gtagを使用した設定手順を紹介します。
- Docusaurusで構築したサイトにアクセス解析を導入したい人
- Google Analytics（GA4）をDocusaurusに設定したい人
- plugin-google-gtagの設定方法を知りたい人
Google Analytics（GA4）とは
Google Analyticsは、Googleが提供するWebサイトのアクセス解析サービスです。ユーザーの行動分析、トラフィックの把握、コンバージョンの追跡など幅広い分析機能を備えています。GA4（Google Analytics 4）は現行バージョンの名称で、Googleタグ（gtag）を使用してデータを収集します。
Docusaurusでの導入手順
DocusaurusでGoogle Analyticsを導入するには、公式プラグインの@docusaurus/plugin-google-gtagを使用します。
以前は@docusaurus/plugin-google-analyticsが使用されていましたが、現在は非推奨で機能しません。新規導入ではplugin-google-gtagを使用します。
前提条件
- Docusaurusプロジェクトがセットアップ済みであること
- GA4の管理画面でGoogleタグ（トラッキングID）を取得済みであること
GA4の管理画面では「測定ID」または「Googleタグ」として表示されます。G-から始まる文字列がトラッキングIDです。
プラグインのインストール
@docusaurus/preset-classicを使用している場合、plugin-google-gtagは既にプリセットに含まれているため追加のインストールは不要です。
プリセットを使用していない場合は、以下のコマンドでインストールします。
npm install --save @docusaurus/plugin-google-gtag
設定の追加
プロジェクト直下のdocusaurus.config.tsに設定を追加します。@docusaurus/preset-classicを使用しているかどうかで設定方法が異なります。
preset-classicを使用している場合
export default {
presets: [
[
'@docusaurus/preset-classic',
{
gtag: {
trackingID: 'G-XXXXXXXXXX',
anonymizeIP: true,
},
},
],
],
};
プラグインとして追加する場合
export default {
plugins: [
[
'@docusaurus/plugin-google-gtag',
{
trackingID: 'G-XXXXXXXXXX',
anonymizeIP: true,
},
],
],
};
設定オプション
| オプション | 型 | デフォルト | 説明 |
|---|---|---|---|
trackingID | string | string[] | 必須 | GA4のトラッキングID。複数指定する場合は配列で指定 |
anonymizeIP | boolean | false | trueにするとリクエスト送信時にIPアドレスを匿名化 |
trackingIDは複数指定が可能です。複数のプロパティでデータを収集する場合に使用します。
gtag: {
trackingID: ['G-XXXXXXXXXX', 'G-YYYYYYYYYY'],
anonymizeIP: true,
},
anonymizeIPは、ユーザーのプライバシー保護の観点からtrueに設定しておくことが推奨されます。
動作確認
設定後、開発サーバーを起動してブラウザの開発者ツールで動作を確認できます。
npm run start
plugin-google-gtagは、デフォルトでは本番ビルド（npm run build）でのみGoogleタグのスクリプトを挿入します。開発サーバー（npm run start）ではスクリプトが挿入されないため、本番環境にデプロイ後にGA4の管理画面でデータ収集を確認します。
本番ビルドで確認する場合は、以下のコマンドでビルドとローカルサーバーの起動を行います。
npm run build && npm run serve
ブラウザの開発者ツールのネットワークタブで、gtagやgoogle-analytics.comへのリクエストが送信されていれば正常に動作しています。
関連記事
まとめ
この記事では、DocusaurusにGoogle Analytics（GA4）を導入する方法について解説しました。@docusaurus/preset-classicを使用している場合は追加インストール不要で、docusaurus.config.tsにトラッキングIDを設定するだけでアクセス解析を開始できます。旧プラグインのplugin-google-analyticsは非推奨のため、新規導入ではplugin-google-gtagを使用します。
参考リンク: