【2021年版】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の機能一覧

自動ページトラッキング
イベントバッチ
ユーザタイミング
画面表示
マルチドメインID
Google Analyticsスクリプトの読み込み
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の使い方一覧

ページトラッキング（page tracking）
イベントトラッキング（event tracking）
スクリーントラッキング（screen tracking）
ユーザタイミングトラッキング（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	型	必須か	用途
eventCategory	string	必須	操作されたオブジェクトの検知
eventAction	string	必須	click, playなどのアクション
eventLabel	string	必須ではない	任意のイベントラベル
eventValue	number	必須ではない	任意の値

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

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	型	必須か	用途
timingCategory	string	必須	タイミングの論理グループ
timingVar	string	必須	記録されている変数の特定
timingValue	number	必須	報告する経過時間(ミリ秒)
timingLabel	string	必須ではない	任意のラベル