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

BLOG-112 Add Google Analytics integration and update environment variables (#113)
All checks were successful
Frontend CI / build (push) Successful in 1m11s
Details

Browse Source 
### Description

- New env var: PUBLIC_GA_MEASUREMENT_ID=G-XXX

### Package Changes

_No response_

### Screenshots

![image.png](/attachments/5d830c44-f447-4e06-907a-2a0cbf976ca8)

### Reference

Resolves #112

### Checklist

- [x] A milestone is set
- [x] The related issuse has been linked to this branch

Reviewed-on: #113
Co-authored-by: SquidSpirit <squid@squidspirit.com>
Co-committed-by: SquidSpirit <squid@squidspirit.com>
This commit is contained in:
SquidSpirit 2025-08-04 07:29:10 +08:00 committed by squid
parent 18f29655bf
commit a6e1ee3c1c
6 changed files with 40 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 HOSTNAME=0.0.0.0
ENV PORT=3000 ENV PORT=3000
ENV PUBLIC_API_BASE_URL=http://127.0.0.1:8080/ ENV PUBLIC_API_BASE_URL=http://127.0.0.1:8080/
ENV PUBLIC_GA_MEASUREMENT_ID=
CMD ["node", "build"] CMD ["node", "build"]

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

@ -15,6 +15,10 @@ declare global {
declare const __VERSION__: string; declare const __VERSION__: string;
} }
interface Window {
dataLayer: unknown[];
}
} }
export {}; export {};

3
frontend/src/app.html
View File

@ -12,8 +12,10 @@
media="(prefers-color-scheme: dark)" media="(prefers-color-scheme: dark)"
href="%sveltekit.assets%/icon/logo-dark.svg" href="%sveltekit.assets%/icon/logo-dark.svg"
/> />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>魚之魷魂 SquidSpirit</title> <title>魚之魷魂 SquidSpirit</title>
<meta name="description" content="程式、科技、教學、分享" /> <meta name="description" content="程式、科技、教學、分享" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@ -30,6 +32,7 @@
/> />
</noscript> </noscript>
<script src="%sveltekit.assets%/js/font-loader.js" defer></script> <script src="%sveltekit.assets%/js/font-loader.js" defer></script>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover" class="antialiased"> <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>
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 || [];
function gtag() {
window.dataLayer.push(arguments);
}
gtag('js', new Date());
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 { export abstract class Environment {
static readonly API_BASE_URL = env.PUBLIC_API_BASE_URL ?? 'http://localhost:5173/api/'; 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 Footer from '$lib/common/framework/ui/Footer.svelte';
import Navbar from '$lib/common/framework/ui/Navbar.svelte'; import Navbar from '$lib/common/framework/ui/Navbar.svelte';
import GoogleAnalytics from '$lib/common/framework/ui/GoogleAnalytics.svelte';
import '../app.css'; import '../app.css';
import '@fortawesome/fontawesome-free/css/all.min.css'; import '@fortawesome/fontawesome-free/css/all.min.css';
</script> </script>
<GoogleAnalytics />
<svelte:head> <svelte:head>
<meta name="app-version" content={App.__VERSION__} /> <meta name="app-version" content={App.__VERSION__} />
</svelte:head> </svelte:head>