3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Nuxt.jsのアプリにGoogle Analyticsを導入する方法

Last updated at Posted at 2021-07-27

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 をインストール、セットアップする

下記のドキュメントに詳しく記載がありますので、ご参考ください。

Setup - Google Analytics Module for Nuxt

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?