Vue PR

【2022年版】Nuxt jsにGoogle Analyticsを導入方法 & 使い方

記事内に商品プロモーションを含む場合があります

Nuxt jsのサイトへGoogle Analyticsを導入手順を記載した記事です。

サイトの計測ができないと不便ですよね。

Google Analyticsでは訪問者を追跡できます。

ROIを測定、訪問者の行動に関する分析を行えるようになります。

この記事でわかること

  • Nuxt.jsへのGoogle Analyticsの導入方法
  • Google Analyticsの機能

Nuxt.jsにGoogle Analyticsを導入

Nuxt.js Google Analyticsライブラリの機能一覧

こちらの機能が提供されています

Nuxt js Google Analyticsの機能一覧

  1. 自動ページトラッキング
  2. イベントバッチ
  3. ユーザタイミング
  4. 画面表示
  5. マルチドメインID
  6. Google Analyticsスクリプトの読み込み
  7. Eコマースの計測対応

Nuxt.jsにGoogle Analyticsのインストール手順

(1) @nuxtjs/google-analyticsのインストール

最初にdependencyに @nuxtjs/google-analytics を追加しましょう

# yarnの場合
yarn add --dev @nuxtjs/google-analytics

# もしくは
# npmの場合
npm install --save-dev @nuxtjs/google-analytics

(2) nuxt.config.jsに設定を追加

nuxt.config.jsのbuildModulesに、 @nuxtjs/google-analytics を追加します。

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

Nuxtのバージョンが2.9以下の場合は下記になります。

{
  modules: [
    '@nuxtjs/google-analytics'
  ],
}

(3) configの設定

さらに、googleAnalyticsの設定を追加しましょう

ここのidとは、Google Analytics IDで、
Google Analyticsを設定したときに作成されるIDのことです。

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

(4) 環境ごとの変数設定

本番環境で動的な環境変数を利用できるようするために、publicRuntimeConfigを利用します。

そうしないと、nuxt.config.jsで渡された設定オプションは、ビルド時に一度だけ読み込まれるため、結果的にハードコーディングすることになります。

これはしんどいので、必ず設定しておきましょう!

export default {
  buildModules: [
    '@nuxtjs/google-analytics'
  ],
  googleAnalytics: {
    id: process.env.GOOGLE_ANALYTICS_ID,
  },
  publicRuntimeConfig: {
    googleAnalytics: {
      id: process.env.GOOGLE_ANALYTICS_ID
    }
  }
}

Nuxt.jsでのGoogle Analyticsの使い方

今回は、こちらの使い方について解説します。

全ての利用例で『$ga』と出てきます。

$gaはグローバルインスタンスで、this.$gaでアクセスできるように設定してます。

Nuxt.jsでのGoogle Analyticsの使い方一覧

  1. ページトラッキング(page tracking)
  2. イベントトラッキング(event tracking)
  3. スクリーントラッキング(screen tracking)
  4. ユーザタイミングトラッキング(user timing tracking)

(1)ページトラッキング(nuxt.js x google analytics)

自動でページトラッキングする場合

google analyticsを設定した時点で、PVの取得は行えます。

ページトラッキングに関しては、何もしなくてOKです。

これは、router インスタンスはモジュールのインストール時に追加されるため、ページトラッキングを自動的に処理しているためです。

手動でページトラッキングを設定する場合

下記の方法のどちらかでgoogle analyticsの計測対象に設定できます。

this.$ga.page('/')

もしくは、オブジェクトでも設定可能です。

this.ga.page({
  page: '/',
  title: 'Home page',
  location: window.location.href
})

詳しくは公式ドキュメントに記載してあります。

(2)イベントトラッキング(nuxt.js x google analytics)

手動でイベントトラッキングを設定する場合

イベントトラッキングは下記のように設定します。

this.$ga.event({
  eventCategory: 'category',
  eventAction: 'action',
  eventLabel: 'label',
  eventValue: 123
})

それぞれのkeyとvalueはこちらのようになっています。

key必須か用途
eventCategorystring必須操作されたオブジェクトの検知
eventActionstring必須click, playなどのアクション
eventLabelstring必須ではない任意のイベントラベル
eventValuenumber必須ではない任意の値

また一行でも記述可能のため、参考にしてみてください。

event(eventCategory, eventAction, eventLabel, eventValue)

// 例
this.$ga.event('category', 'action', 'label', 123)

(3)スクリーントラッキング(nuxt.js x google analytics)

自動でスクリーントラッキングを設定する場合

こちらも自動で設定することができます。

下記の内容をnuxt.config.jsに記入しましょう。

export {
  googleAnalytics: {
    id: 'UA-XXX-X',
    autoTracking: {
      screenview: true
    }
  }
}

手動でスクリーントラッキングを設定する場合

ページやコンポーネントを表示したときのトラッキングも可能です。

Google Analyticsに送られるスクリーンビューイベントのscreenNameプロパティに文字列を渡すことができます。

(少々わかりにくいですよね。。)具体例をみましょう!

this.$ga.screenview({
  screenName: 'home',
})

(4)ユーザタイミングトラッキング(nuxt.js x google analytics)

設定方法

ユーザタイミングトラッキングは下記のように設定します。

this.$ga.time({
  timingCategory: 'category',
  timingVar: 'variable',
  timingValue: 123,
  timingLabel: 'label'
})

それぞれのkeyとvalueはこちらのようになっています。

key必須か用途
timingCategorystring必須タイミングの論理グループ
timingVarstring必須記録されている変数の特定
timingValuenumber必須報告する経過時間(ミリ秒)
timingLabelstring必須ではない任意のラベル

Nuxt.jsへGoogle Analytics導入は簡単!

今回はNuxt.jsで作成したサイトへGoogle Analyticsを導入する手順を記載しました。

ほとんどのトラッキング項目が自動トラッキングで可能です。

まずは基本項目をトラッキングしてから、必要に応じて任意の項目をトラッキングしましょう。