概要
Google Analytics(以下GA)にはUserIDという機能があります。
これを利用すると、アプリケーション側のユーザーIDを軸にデータを分析することができます。
以下はUserIDを使ってユーザーのページビューを表示したものです。
異なるセッションの操作が同一ユーザーの行動として表示されています。
今回はこの機能をnuxt.jsアプリケーションに導入する手順を紹介します。
環境
| node.js | 10.17.0 |
| nuxt.js | 2.12.2 |
GAの設定
GAとGoogleTagManager(以下GTM)の設定は以下サイトを参考にしました。
【Googleアナリティクス】UserIDを設定して会員の動向を見る（2020年版：タグマネージャ利用）
GA側では管理 > トラッキング情報 > User-IDより、
- User-IDの利用設定
- User-ID用のビュー作成
を行う必要があります。
(カスタムディメンションの設定については本記事では割愛します。)
GTMの設定
変数の作成
ユーザーを一意に識別するためのID用の変数を作成します。
変数名は任意ですが、本記事ではuser_idと設定しています。
トリガーの作成
nuxt.jsからGTMにページ遷移を通知するようのトリガーを作成します。
トリガー名は任意ですが、イベント名はnuxtRouteとしてください。(変更したい場合は後述のnuxt.jsの設定で変更可能)
タグの作成
GAにデータを送るためのタグを作成します。
トラッキングIDにはGA側で表示されているIDを指定してください。
このタグでオーバーライド設定を有効にするにチェックを入れる必要があります。
フィールド名はuserIdとして、値には先ほど作成した変数を設定します。
トリガーには先ほど作成したものを設定します。
nuxtの設定
パッケージのインストール
@nuxtjs/gtmをインストールします。
https://github.com/nuxt-community/gtm-module
npm install @nuxtjs/gtm
nuxt.configの設定
nuxt.configのmodulesにGTMの設定を追加します。
前述のGTMのイベント名nuxtRouteを変更したい場合はpageViewEventNameプロパティで上書きできます。
modules: [
[
'@nuxtjs/gtm',
{
id: 'GTM-XXXXXXX',
pageTracking: true,
},
],
],
ユーザーIDの設定
GTMにユーザーIDを通知するためのコードを追加します。
この処理が行われてからでないとユーザーIDでの追跡ができないので、各ページのアクセス時に発火するようにする必要があります。
フィールド名user_idがGTMで作成した変数のデータレイヤーの変数名と紐付いています。
this.$gtm.push({ user_id: [アプリのユーザーID] });
動作確認
前提として、前述のnuxt.jsの変更を加えたアプリがデプロイされている必要があります。
nuxt.js -> GTM の疎通
GTMのプレビューモードを使って確認します。
右上にプレビューと公開のボタンがあると思うので、プレビューをクリックします。
URLの入力を求められるので、アプリがデプロイされているURLを指定します。
GTMのデバックモードでアプリが開くので、URLの遷移を行うとユーザーIDを通知するイベントと画面遷移を通知するイベントがそれぞれ確認できます。
GTM -> GA の疎通
GAで先程作成したUserID用のビューを開きます。
ユーザー > ユーザーエクスプローラよりアプリのユーザーIDでレコードが記録されていればOKです。
おわりに
以上により、nuxt.jsとGAのUserID機能の連携が実現できました🎉