🐕

Nuxt.jsでできたSPAにGoogle アナリティクス 4 プロパティ(GA4)を導入する方法

2021/12/24に公開

Google Analytics

Google アナリティクスとはWEBサイトのPVやユーザーの遷移を分析できるようにするツールです。
ここでは、GA4(Google アナリティクス 4 プロパティ)をNuxt.jsでできたSPAに導入する方法をまとめました。

前提(環境)

"nuxt": "^2.15.8",
"@nuxtjs/google-gtag": "^1.0.4",

レンダリングモードはSPAです。

GA4とは

GA4とはGoogle Analyticsの新バージョンです。
前バージョンのUA(ユニバーサルアナリティクスプロパティ)と比較すると、データの測定方法が代わり、セッションベースからイベントベースに代わりました。
2020年10月にアップデートされたらしく、GA4とUAを併用するサイトもあったり移行期のようです。

gtag.jsとanalytics.js

Google アナリティクスの導入には専用のJavaScriptライブラリを使用するわけですが、使用するライブラリに注意しましょう。
UAの場合はanalytics.js、GA4の場合はgtag.jsを原則使用することになります。
尚、この記事ではNuxt.jsのgtag.js用のライブラリ@nuxtjs/google-gtagを用います。
UA向けの@nuxtjs/google-analyticsについては、書いていません。

※手元で試したところ、UAの場合でもgtag.jsのライブラリ使用をGAの管理画面で勧められたので、gtag.jsは両方のバージョンのアナリティクスでも使えるかもしれません。

Nuxt.jsに導入

それでは、実際にNuxt.jsのコードに手を加えていきます。

1.install

yarn インストールします。(npmの場合は適宜コマンドをかえてください)

 yarn add @nuxtjs/google-gtag

2.nuxt.config.jsに設定

modules: [
  ['@nuxtjs/google-gtag', {
    id: 'G-XXXXXXXXXX',
    debug: true,
  }]
],

※ debugオプションを有効にするとlocalhostでも発火して動作確認できます。不要なデータを入れたくない場合はfalseにした方が良さそうです。

3.確認

実際にDevtoolsなどで確認するとページ遷移毎に、イベントが発火できているはずです。
MPAと違いSPAではページ遷移毎に画面が更新されないので、そのままだとページ遷移を計測できないのですが、ライブラリがうまく対応してくれているはずです。

参考: https://developers.google.com/analytics/devguides/collection/gtagjs/single-page-applications?hl=ja

Tips

clickイベントを送信したい

以下のように設定します。
value値はよしなに変更してください。

methods: {
  clickHandler() {
    this.$gtag('event', 'click', {
      event_category: 'top',
      event_label: 'button',
      value: 'login',
    })
  },
},

ログイン情報

GA4のイベントでは、自動的に収集されるイベントの他に推奨イベント、カスタムイベントというカテゴリがあります。
ログインは推奨イベントになります。
推奨イベントは追加で設定しないといけなく、ログインの場合はログインタイミングで以下のように設定します。
Googleの部分は適宜変更してください。

this.$gtag('event', 'login', {
  method: 'Google',
});

参考: https://developers.google.com/analytics/devguides/collection/ga4/events?hl=ja#recommended_events

userId

以下のコードをログイン時等userIdを取得したタイミングで発火させましょう。
user_idは予約語で、分析で使用できないことがあるらしく、crm_idも同時にGAに送信すると良いそうです。

this.gtag('config', 'G-XXXXXXXX', { 
  'user_id': 'USER_ID' 
});
this.gtag('set', 'user_properties', { 
  'crm_id' : 'USER_ID' 
});

参考: https://developers.google.com/analytics/devguides/collection/ga4/user-id?technology=gtagjs

エラーを集めたい

MPAだとwindow.onerrorでcatchできていないエラーをGAに送信する対応方法があります。
ただし、この方法だとNuxt.jsでエラーページを表示している場合、うまくいきません。
内部のコードを見ていないので推測ですが、Nuxt.js内部でcatchしてlayout/error.vueに遷移しているので、発火しないからだと思います。
なので、私はlaouts/error.vueに直接error送信処理を書きました。
あまり調べても参考になりそうな記述を見つけられなかったので、より良い書き方があるかもしれません。

error.vue

mounted() {
  if (this.error.statusCode !== 404) {
    this.$gtag('event', 'exception', {
      description: this.error.message,
      fatal: false,
    });
  }
},

参考: https://developers.google.com/analytics/devguides/collection/ga4/exceptions?hl=ja

型定義

公式の型定義ファイルがないこともあり、一旦anyで定義しました、、、

declare module 'vue/types/vue' {
 interface Vue {
   $gtag: any
 }
}

declare module '@nuxt/types' {
  interface NuxtAppOptions {
    $gtag: any;
  }
}

二重にトラッキングされる場合

一部、なぜ発生しているかの詳細な検証はできていないのですが、以下の対応で一旦は防げるようになりました。
この辺りは自信がないので、詳細を理解できたら随時追記しますm

GA4管理画面で拡張機能の設定を変更

管理 > データストリーム > 詳細 > 拡張計測機能の設定 > ページビュー数詳細 > ブラウザの履歴イベントに基づくページの変更をOFF

参考: https://qiita.com/balabok/items/98f909ee7f1fc230b3bc

configを一箇所で設定する

configを複数箇所で設定すると何度もpage_viewイベントが発火してしまうことがあるようなので、一箇所で設定するようにした方が良いみたいです。
また、configを書く場合はpage_viewイベントが発火してしまうのでnuxt.config.jsの設定に以下を追加します。

send_page_view: false,

titleなどのメタデータを設定する前に発火してしまう

@nuxtjs/google-gtagのドキュメント(https://github.com/nuxt-community/google-gtag-module)に

As the router code sometimes runs before head data is set correctly you can use following approach to make sure that everything is set correctly:

とあり、
例えば、各ページのタイトルをpagesディレクトリ配下でそれぞれ設定しているとそれより早くGAに情報をデフォルトでは送ってしまうことがあります。
その場合はnuxt.config.jsに

disableAutoPageTrack: true

の設定を追加し、$gtag関数でタイトルをGA4に送ってあげる必要があります。

 mounted() {
    const title = ''; // 任意のタイトル
    if (process.browser) {
      this.$gtag('config', 'UA-XXXX-XXX', {
        page_title: title,
      })
    }
  }