vue3 で利用できる gtag 用パッケージ、vue-gtag を nuxt3 のプラグインとして実装します。
(1) vue-gtag パッケージをインストール
shell
# 再現性確保のため『@2.0.1』バージョンを指定しています。
# 最新バージョンを導入する場合は『npm i vue-gtag』となります。
$ npm i vue-gtag@2.0.1
(2) Nuxt プラグインを作成
~/plugins/analytics.client.ts
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に個別のイベントを発行したい場合は、以下のようなコードで実現できます。
~/app.vue
<script setup lang="ts">
import * as $gtag from "vue-gtag";
function onClick() {
// GA4: イベントを発行
$gtag.event(`my_app_event1`, { foo: 123, bar: `asd` });
}
</script>
以上で完了です～