Nuxt.js で GTM&GA4 で page_view を計測する

1. 概要&前提条件
2. GTM 上の設定
3. Nuxt 上の設定

概要&前提条件

#

今回は Nuxt.js の generate でページ遷移をするたびに PV を計測するイベントを投げる処理を書きます。
GA4 は PV などあらゆる計測をイベントで行うようにしているようです。

前提条件

• GTM でアカウントを作成済み
• Nuxt.js で GTM を導入済み（私は app.html を作って head と body に GTM をインストールする JS コードを書き込みました）

GTM 上の設定

#

GTM 上では以下を設定します

1. ページビューを計測するためのカスタムトリガーを設定する。
   GTM でワークスペースを選択した状態で、左ペインの「トリガー」をクリックする。
   「新規」ボタンをクリックする。
   「トリガータイプ」で「カスタムイベント」を選ぶ。 イベント名に「nuxtRoute」と入力する。
2. GA4 設定タグを作成する（未作成の場合）
   左ペインの「タグ」をクリックする。
   「タグの設定」をクリックして、「Google アナリティクス: GA4 設定」をクリックする。
   Google Analytics の測定 ID を入力する。
   「トリガー」をクリックして、「All Pages」を選択する。これですべてのページで GA4 を使用するという意味になります。
3. 作成したカスタムトリガーでページビューイベントを発火させる。
   左ペインの「タグ」をクリックする。
   「タグの設定」をクリックして、「Google アナリティクス: GA4 イベント」を選択する。
   「設定タグ」で、2 で作成した設定タグを選択する。 「イベント名」で、{{ Page URL }}を選択する 「トリガー」をクリックして、カスタムイベントの「nuxtRoute」を選択する。

ここまで終わったら、公開して GTM の設定は完了。

Nuxt 上の設定

#

次に、Nuxt 上でルーティングごとに nuxtRouter トリガーを発火させる処理を書きます。 以下を plugins/gtm.js という名前のファイルに入れます。
Vue Router のページ遷移後に行われる処理を書いてる感じです。

export default ({ app }) => {
  app.router.afterEach((to, from) => {
    window.dataLayer.push({ event: "nuxtRoute" });
  });
};

あとはこのファイルを nuxt.config.js の plugin で登録すれば完了。

plugins: [
    { src: "~/plugins/gtm.js", ssr: false },
],