GoogleAnalyticsのUserID機能をNuxt.jsに導入する

## 概要

Google Analytics(以下GA)にはUserIDという機能があります。
これを利用すると、アプリケーション側のユーザーIDを軸にデータを分析することができます。

以下はUserIDを使ってユーザーのページビューを表示したものです。
異なるセッションの操作が同一ユーザーの行動として表示されています。

![screenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190770/d1360dd8-27fa-06fe-4fbe-c484282b05f4.jpeg)

今回はこの機能をnuxt.jsアプリケーションに導入する手順を紹介します。

[UserID機能について](https://support.google.com/analytics/answer/3123662?hl=ja)

## 環境

|||
|---|---|
|node.js|10.17.0|
|nuxt.js|2.12.2|
|||

## GAの設定

GAとGoogleTagManager(以下GTM)の設定は以下サイトを参考にしました。

[【Googleアナリティクス】UserIDを設定して会員の動向を見る（2020年版：タグマネージャ利用）](https://web-begginer-log.com/analytics-user-id/#toc3)

GA側では`管理 > トラッキング情報 > User-ID`より、

- User-IDの利用設定
- User-ID用のビュー作成

を行う必要があります。
(カスタムディメンションの設定については本記事では割愛します。)

![screenshot 1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190770/959d774e-ab41-2b45-3fa1-2106d7d86d1c.jpeg)

## GTMの設定

### 変数の作成

ユーザーを一意に識別するためのID用の変数を作成します。
変数名は任意ですが、本記事では`user_id`と設定しています。

![screenshot 2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190770/77ed3a2e-28ef-5429-98ff-0c9fbf46bd07.jpeg)

### トリガーの作成

nuxt.jsからGTMにページ遷移を通知するようのトリガーを作成します。
トリガー名は任意ですが、イベント名は`nuxtRoute`としてください。(変更したい場合は後述のnuxt.jsの設定で変更可能)

![screenshot 3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190770/59a018e1-744a-a93b-2723-406433169729.jpeg)

### タグの作成

GAにデータを送るためのタグを作成します。
トラッキングIDにはGA側で表示されているIDを指定してください。
`このタグでオーバーライド設定を有効にする`にチェックを入れる必要があります。
フィールド名は`userId`として、値には先ほど作成した変数を設定します。

![screenshot 4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190770/fbe9d303-7a09-e174-28a1-4bef24de8267.jpeg)

トリガーには先ほど作成したものを設定します。

![screenshot 5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190770/2d8980cc-9f1b-568e-4ddd-64b2111d12b3.jpeg)

## nuxtの設定

### パッケージのインストール

`@nuxtjs/gtm`をインストールします。
https://github.com/nuxt-community/gtm-module

```
npm install @nuxtjs/gtm
```

### nuxt.configの設定

nuxt.configのmodulesにGTMの設定を追加します。
前述のGTMのイベント名`nuxtRoute`を変更したい場合は`pageViewEventName`プロパティで上書きできます。

```js

  modules: [
    [
      '@nuxtjs/gtm',
      {
        id: 'GTM-XXXXXXX',
        pageTracking: true,
      },
    ],
  ],
```

### ユーザーIDの設定

GTMにユーザーIDを通知するためのコードを追加します。
この処理が行われてからでないとユーザーIDでの追跡ができないので、各ページのアクセス時に発火するようにする必要があります。
フィールド名`user_id`がGTMで作成した変数の`データレイヤーの変数名`と紐付いています。

```js
this.$gtm.push({ user_id: [アプリのユーザーID] });
```

## 動作確認

前提として、前述のnuxt.jsの変更を加えたアプリがデプロイされている必要があります。

### nuxt.js -> GTM の疎通

GTMのプレビューモードを使って確認します。
右上にプレビューと公開のボタンがあると思うので、プレビューをクリックします。
URLの入力を求められるので、アプリがデプロイされているURLを指定します。
GTMのデバックモードでアプリが開くので、URLの遷移を行うとユーザーIDを通知するイベントと画面遷移を通知するイベントがそれぞれ確認できます。

![screenshot 6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190770/79adfef1-d705-424e-0c40-01c06a1ec4eb.jpeg)

![screenshot 7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190770/556918bd-f0ee-9f3c-9114-653c37a0125a.jpeg)

### GTM -> GA の疎通

GAで先程作成したUserID用のビューを開きます。
`ユーザー > ユーザーエクスプローラ`よりアプリのユーザーIDでレコードが記録されていればOKです。

![screenshot 8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190770/641ebf38-6472-98fc-f12f-3272b12539f2.jpeg)

## おわりに

以上により、nuxt.jsとGAのUserID機能の連携が実現できました🎉