メインコンテンツまでスキップ
DocusaurusGoogle Analyticsweb

DocusaurusでGoogle Analyticsを導入する - plugin-google-gtagの設定手順

公開読了約4分

この記事では、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を使用している場合​

docusaurus.config.ts
export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        gtag: {
          trackingID: 'G-XXXXXXXXXX',
          anonymizeIP: true,
        },
      },
    ],
  ],
};

プラグインとして追加する場合​

docusaurus.config.ts
export default {
  plugins: [
    [
      '@docusaurus/plugin-google-gtag',
      {
        trackingID: 'G-XXXXXXXXXX',
        anonymizeIP: true,
      },
    ],
  ],
};

設定オプション​

オプション型デフォルト説明
trackingIDstring | string[]必須GA4のトラッキングID。複数指定する場合は配列で指定
anonymizeIPbooleanfalsetrueにするとリクエスト送信時にIPアドレスを匿名化

trackingIDは複数指定が可能です。複数のプロパティでデータを収集する場合に使用します。

docusaurus.config.ts（複数ID指定の例）
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を使用します。

参考リンク: