Nuxt3 で Google Analytics (GA4) の実装方法

vue3 で利用できる gtag 用パッケージ、vue-gtag を nuxt3 のプラグインとして実装します。

(1) vue-gtag パッケージをインストール

# 再現性確保のため『@2.0.1』バージョンを指定しています。
# 最新バージョンを導入する場合は『npm i vue-gtag』となります。
$ npm i vue-gtag@2.0.1

:::message info

• vue2 系は vue-gtag v1 を使用します。
• vue3 系は vue-gtag v2 を使用します。

nuxt3 は vue3 を使用しているので vue-gtag v2 系が必要です。 :::

(2) Nuxt プラグインを作成

import VueGtag from "vue-gtag";

// Nuxtプラグインの登録
export default defineNuxtPlugin((nuxtApp) => {
  // ルーター取得
  const router = useRouter();

  // Vue登録
  nuxtApp.vueApp.use(
    VueGtag,
    {
      appName: 'example',                 // サイトの名称
      pageTrackerScreenviewEnabled: true, // ページトラッキングスクリーンビューを有効
      config: { id: `G-**********` },     // GoogleAnalytics(GA4)の測定IDを指定する
    },
    router
  );
});

• plugins フォルダにコードを書くことで、nuxt3 が自動的にプラグインとして認識して処理します。
• プラグインのファイル名を *.client.ts とすることで、サーバーでは動作せず、ブラウザ側だけ動作するプラグインにしています。

(3) Analyticsイベントを発行

GA4に個別のイベントを発行したい場合は、以下のようなコードで実現できます。

<script setup lang="ts">
import * as $gtag from "vue-gtag";

function onClick() {
  // GA4: イベントを発行
  $gtag.event(`my_app_event1`, { foo: 123, bar: `asd` });
}
</script>

以上で完了です～