在 Nuxt3 中透過 Module 及 Plugin 更方便的使用 gtag 吧
- December 17, 2022
![在 Nuxt3 中透過 Module 及 Plugin 更方便的使用 gtag 吧](/_astro/js-3-nuxt3-gtag.c69f1132_1uUtNv.webp)
本文詳細指導如何在 Nuxt3 中自行撰寫 Module 以整合 Google gtag 功能。從引入 gtag script 到利用 Plugin 注入 gtag 方法,並提供了完整的程式碼範例和相關設定。讓您能夠在 Nuxt3 專案中輕鬆使用 Google gtag 進行數據追踪。
在 Nuxt2 中有相關的 Module google-gtag-module 可以使用,但看起來在 Nuxt3 並未打算更新,因此我們可以參考源碼在 Nuxt3 中自行撰寫 Module 達成。
Step 1. 利用 Nuxt Module 引入 gtag script
我們可以參考 Module Anatomy 撰寫將 gtag
script 引入 head 並放置於最前方,並看 GAID 要用什麼方式引入(範例中是用 runtimeConfig)。
// nuxt.config.ts:
export default defineNuxtConfig({
modules: [
(_inlineOptions, nuxt) => {
const { GA_ID = "" } = nuxt.options.runtimeConfig.public;
nuxt.options.app.head.script = nuxt.options.app.head.script || [];
nuxt.options.app.head.script.unshift({
src: `https://www.googletagmanager.com/gtag/js?id=${GA_ID}`,
async: true,
});
},
],
});
Step 2. 利用 Plugin 注入 gtag
method
我們可以新增一個 plugins/gtag.client.ts
檔案,利用 plugin
的 provide
注入 gtag 方法,同時也在 router
更新時自動送出相關事件。
// plugins/gtag.client.ts
export default defineNuxtPlugin(({ provide }) => {
const { GA_ID } = useRuntimeConfig().public;
if (process.env.NODE_ENV !== "production") {
provide("gtag", () => {});
return;
}
window.dataLayer = window.dataLayer || [];
function gtag(..._args: any) {
// eslint-disable-next-line prefer-rest-params
window.dataLayer.push(arguments);
}
provide("gtag", gtag);
gtag("js", new Date());
gtag("config", GA_ID, JSON.stringify({}, null, 2));
useRouter().afterEach((to) => {
gtag("config", GA_ID, {
page_path: to.fullPath,
location_path: window.location.origin + to.fullPath,
});
});
});
要注意的一點是 window.dataLayer
會報錯,因此我們要聲明 global type
// global.d.ts
export {};
declare global {
interface Window {
dataLayer: any[];
}
}
在你的專案中盡情使用吧
接著我們就可以在 Nuxt 專案中像原本的方式去使用
<script setup lang="ts">
// gtag usage
const { $gtag } = useNuxtApp();
onMounted(() => {
$gtag("event", "login", { method: "Google" });
});
</script>