Nuxt.jsでGA4(Google Analytics 4)のUser-IDを設定する方法

Nuxt.jsでGA4(Google Analytics 4)のUser-IDを設定する方法になります。
タグマネージャーを使用して設定するので、@nuxtjs/gtmを使用します。

gtm-moduleをインストール

Nuxt.jsでタグマネージャーの設定をするために、@nuxtjs/gtmをインストールします。

yarn add @nuxtjs/gtm 
or 
npm install @nuxtjs/gtm

nuxt.config.jsで設定する

nuxt.config.js

export default {
  modules: [
    '@nuxtjs/gtm',
  ],
  gtm: {
    id: 'GTM-XXXXXXX' // タグマネージャーのid
  }
}

インストール後nuxt.config.jsでタグマネージャーのidを設定します。

タグマネージャーでUser-IDの設定をする

続いて、タグマネージャーでUser-IDの設定をします。

変数の設定

データレイヤーの変数をuser_idに設定します。

トリガーにnuxtRouteのイベントを設定

nuxtRouteは@nuxtjs/gtmがデフォルトで設定しているイベントです。ページ遷移時に呼び出されます。

タグの設定

上記の画像のようにタグの設定をします。
設定フィールドはuser_idとして、値は先ほど作成したデータレイヤーの変数user_idを設定します。
トリガーには、先ほど作成したnuxtRouteを設定します。

Nuxt.jsからUser-IDを送る

Nuxt.jsからタグマネージャーにUser-IDを送るために、イベントを設置します。

const userId = 10
this.$gtm.push({ user_id: userId  })

上記のコードでタグマネージャーにUser-IDを送ることができます。
ログイン完了時など、会員番号を取得したタイミングで設定するのが良いかと思います。

タグマネージャーのプレビュー画面でuser_idがセットされていれば、イベントを送信できています。

middlewareでUser-IDを設定することも可能

const userIdMiddleware = ({ store }) => {
  const userId = 10
  store.$gtm.push({ user_id: userId })
}

export default userIdMiddleware

Nuxt.jsのmiddlewareで設定することで、ページがレンダリングする前にUser-IDをセットすることができます。
Vuexと組み合わせて、User-IDを管理するのも良いかもしれません。

Google Analytics 4でレポートを作成

GA4(Google Analytics 4)でレポートを作成することで、User-IDの情報を見ることができます。

参考