Nuxt.js製のアプリにGoogle Analyticsを導入する際に、少しハマりましたので導入方法をまとめます。
1. Google Analyticsのプロパティを追加する
Nuxt.js で Google Analytics を利用する場合、Google Analytics の最新バージョンのプロパティGoogle アナリティクス 4 プロパティ
は利用できず、ユニバーサル アナリティクス プロパティ
を利用する必要があります。
下記の方法で、プロパティを作成します。
アナリティクスで新しいウェブサイトの設定を行う(ユニバーサル アナリティクス) - アナリティクス ヘルプ
次のステップで@nuxtjs/google-analytics
を利用予定ですが、リポジトリに、nuxt-community/google-analytics-module
**⚠ WARNING: This package does not support GA4. **
This package currently only supports GA3/UA
とあり、GA4(Google アナリティクス 4 プロパティ)
が未対応とのことです
プロパティの名称がややこしいので、早見表を作りました。
プロパティ名 | 略称 |
@nuxtjs/google-analytics の対応可否 |
Google Analytics IDのプレフィクス |
---|---|---|---|
Google アナリティクス 4 プロパティ | GA4 | × | G- |
ユニバーサル アナリティクス プロパティ | GA3/UA | ○ | UA- |
私の場合、このプロパティのバージョンに気づかず、GA4
のプロパティを作成し、G-
始まりのIDを設定して、トラッキングできずハマってしまいました。
2. @nuxtjs/google-analytics
をインストール、セットアップする
下記のドキュメントに詳しく記載がありますので、ご参考ください。