category icon
2022-11-21
JavaScript - Nuxt3

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

nuxt
3.0.0
profile
hikaru
Software Developer / DIY'er

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

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

shell
npm i vue-gtag@2.0.1

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

~/plugins/analytics.client.ts
import { defineNuxtPlugin } from "#app";
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 とすることで、サーバーでは動作せず、ブラウザ側だけ動作するプラグインにしています。

以上で完了です~