squid/blog
squid/blog
1
2
Fork 0
Code Issues 10 Pull Requests Actions Projects 1 Releases 7 Wiki Activity

BLOG-112 feat: add Google Analytics integration and update environment variables
All checks were successful
Frontend CI / build (push) Successful in 1m6s
Details
PR Title Check / pr-title-check (pull_request) Successful in 12s
Details
Auto Comment On PR / add_improve_comment (pull_request) Successful in 17s
Details

Browse Source 
- Implement Google Analytics script loading in a new component.
- Add GA_MEASUREMENT_ID to the environment configuration.
- Update layout to include GoogleAnalytics component.
- Enhance app.html with viewport and description meta tags.
This commit is contained in:
SquidSpirit 2025-08-04 07:00:17 +08:00
parent 18f29655bf
commit db74a9b166
6 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/Dockerfile
View File

@ -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"]

5
frontend/src/app.d.ts vendored
View File

@ -15,6 +15,11 @@ declare global {
declare const __VERSION__: string;
}
interface Window {
dataLayer: unknown[];
gtag: (command: 'config' | 'set' | 'js' | 'event', ...args: unknown[]) => void;
}
}
export {};

3
frontend/src/app.html
View File

@ -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">

28
frontend/src/lib/common/framework/ui/GoogleAnalytics.svelte Normal file
View File

@ -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>

1
frontend/src/lib/environment.ts
View File

@ -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 ?? '';
}

4
frontend/src/routes/+layout.svelte
View File

@ -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>