Nuxt.jsにGoogle Analyticsを追加する

Ad Area

Nuxt.jsは、@nuxtjs/google-analyticsモジュールでGoogle Analyticsを導入することができる。その手順についてのまとめ（Google Analyticsアカウントに登録をしているものとして進める）。

Google Analyticsにサイトを追加

新規プロパティを追加する。最後にサイトを追加したのが5年以上前なので、すっかり方法を忘れていましたわ（UIも少し変わっていた）。

左下の歯車アイコン（管理）をクリックし、「プロパティ」列の「プロパティを追加」をクリックする。

「プロパティの設定」－「プロパティの詳細」から項目を入力していく。レポートのタイムゾーンと通貨のデフォルト値がアメリカ合衆国・米ドルになっているので、日本・日本円に修正。

【注意】「次へ」ボタンではなく、直下の「詳細オプションを表示」リンクをクリックする。

「ユニバーサルアナリティクスプロパティの作成」右上をチェックして、ウェブサイトのURLを入力する。Googleアナリティクス4を作っておいても問題はないので、チェック項目は変更せずに「次へ」で進む。

ビジネス情報を入力する。個人サイトの場合は近いカテゴリーでよいと思う。

新規プロパティが作成される。「プロパティ設定」をクリックすると、トラッキングIDが確認できる。

インストール

// npm
npm install --save-dev @nuxtjs/google-analytics
// yarn
yarn add --dev @nuxtjs/google-analytics

設定

nuxt.config.js

export default {
  buildModules: [
    '@nuxtjs/google-analytics'
  ],

  googleAnalytics: {
    id: 'UA-XXX-X'
  }
}

id: 'UA-XXX-X'には、Google Analytics画面で確認したトラッキングIDを記入する。

Ad Area