diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 394c146..69e2299 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -24,4 +24,5 @@ ENV NODE_ENV=production
 ENV HOSTNAME=0.0.0.0
 ENV PORT=3000
 ENV PUBLIC_API_BASE_URL=http://127.0.0.1:8080/
+ENV PUBLIC_GA_MEASUREMENT_ID=
 CMD ["node", "build"]
diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
index ecf09e9..05109e2 100644
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@@ -15,6 +15,11 @@ declare global {
 
 		declare const __VERSION__: string;
 	}
+
+	interface Window {
+		dataLayer: unknown[];
+		gtag: (command: 'config' | 'set' | 'js' | 'event', ...args: unknown[]) => void;
+	}
 }
 
 export {};
diff --git a/frontend/src/app.html b/frontend/src/app.html
index e9f1193..0146294 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -12,8 +12,10 @@
 			media="(prefers-color-scheme: dark)"
 			href="%sveltekit.assets%/icon/logo-dark.svg"
 		/>
+
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<title>魚之魷魂 SquidSpirit</title>
+
 		<meta name="description" content="程式、科技、教學、分享" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -30,6 +32,7 @@
 			/>
 		</noscript>
 		<script src="%sveltekit.assets%/js/font-loader.js" defer></script>
+
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover" class="antialiased">
diff --git a/frontend/src/lib/common/framework/ui/GoogleAnalytics.svelte b/frontend/src/lib/common/framework/ui/GoogleAnalytics.svelte
new file mode 100644
index 0000000..9556629
--- /dev/null
+++ b/frontend/src/lib/common/framework/ui/GoogleAnalytics.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Environment } from '$lib/environment';
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		const gaMeasurementId = Environment.GA_MEASUREMENT_ID;
+
+		if (!gaMeasurementId.startsWith('G-')) {
+			return;
+		}
+
+		if (document.querySelector(`script[src*="${gaMeasurementId}"]`)) {
+			return;
+		}
+
+		const gaScript = document.createElement('script');
+		gaScript.async = true;
+		gaScript.src = `https://www.googletagmanager.com/gtag/js?id=${gaMeasurementId}`;
+		document.head.appendChild(gaScript);
+
+		window.dataLayer = window.dataLayer || [];
+		window.gtag = (command: 'config' | 'set' | 'js' | 'event', ...args: unknown[]) => {
+			window.dataLayer.push(command, ...args);
+		};
+		window.gtag('js', new Date());
+		window.gtag('config', gaMeasurementId);
+	});
+</script>
diff --git a/frontend/src/lib/environment.ts b/frontend/src/lib/environment.ts
index cacc64b..f845aec 100644
--- a/frontend/src/lib/environment.ts
+++ b/frontend/src/lib/environment.ts
@@ -2,4 +2,5 @@ import { env } from '$env/dynamic/public';
 
 export abstract class Environment {
 	static readonly API_BASE_URL = env.PUBLIC_API_BASE_URL ?? 'http://localhost:5173/api/';
+	static readonly GA_MEASUREMENT_ID = env.PUBLIC_GA_MEASUREMENT_ID ?? '';
 }
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 5d87c98..f5d435c 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,10 +1,12 @@
-<script>
+<script lang="ts">
 	import Footer from '$lib/common/framework/ui/Footer.svelte';
 	import Navbar from '$lib/common/framework/ui/Navbar.svelte';
+	import GoogleAnalytics from '$lib/common/framework/ui/GoogleAnalytics.svelte';
 	import '../app.css';
 	import '@fortawesome/fontawesome-free/css/all.min.css';
 </script>
 
+<GoogleAnalytics />
 <svelte:head>
 	<meta name="app-version" content={App.__VERSION__} />
 </svelte:head>
