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
とすることで、サーバーでは動作せず、ブラウザ側だけ動作するプラグインにしています。
以上で完了です~