feat: integrate analytics (#105)

babblebey · web-flow · commit b191c04500e0 · 2024-11-15T22:26:36.000+01:00
This Pull Request configures Google Analytics on the project, enabling
ease of usage and interaction tracking on project.

### Changes Made

- Added/Configured `@astrojs/partytown` integration to move third-party
script (google-tags) execution to the web worker away from main thread,
aiding performance
- Introduced new environmental variable
`PUBLIC_GOOGLE_ANALYTICS_MEASUREMENT_ID`
- Integrated the Google Tag tracking script to the `layout/base.astro`
template reaching all web page for tracking; with the introduced
`PUBLIC_GOOGLE_ANALYTICS_MEASUREMENT_ID` consumed in the measurement id
area of the script.

📖
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -2,11 +2,21 @@ import { defineConfig } from "astro/config";
 import mdx from "@astrojs/mdx";
 import react from "@astrojs/react";
 import tailwind from "@astrojs/tailwind";
+import partytown from "@astrojs/partytown";
 import vercel from "@astrojs/vercel/serverless";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), mdx(), react()],
+  integrations: [
+    mdx(), 
+    react(), 
+    tailwind(), 
+    partytown({
+      config: {
+        forward: ["dataLayer.push"],
+      },
+    })
+  ],
   output: "server",
   adapter: vercel()
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
   "license": "ISC",
   "dependencies": {
     "@astrojs/mdx": "^2.2.1",
+    "@astrojs/partytown": "^2.1.2",
     "@astrojs/react": "^3.1.0",
     "@astrojs/tailwind": "^5.1.0",
     "@astrojs/vercel": "^7.5.3",
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
@@ -4,6 +4,8 @@ import "@fontsource/ibm-plex-mono";
 import "../base.css";
 import { SITE_META_KEYWORDS, SITE_META_DESCRIPTION } from "../../constants.js";
 
+const MEASUREMENT_ID = import.meta.env.PUBLIC_GOOGLE_ANALYTICS_MEASUREMENT_ID;
+
 const { props, url } = Astro;
 const { 
 	pageTitle, 
@@ -36,9 +38,19 @@ const {
 		<meta name="twitter:description" content={description}>
 		<meta name="twitter:image" content={ogImageUrl}>
 
+		<!-- Google tag (gtag.js) -->
+		<script async src=`https://www.googletagmanager.com/gtag/js?id=${MEASUREMENT_ID}`></script>
+		<script>
+			window.dataLayer = window.dataLayer || [];
+			function gtag(){dataLayer.push(arguments);}
+			gtag('js', new Date());
+
+			gtag('config', MEASUREMENT_ID);
+		</script>
+
 		<title>{ pageTitle } - {subtitle}</title>
 	</head>
 	<body class={list}>
-    <slot />
+    	<slot />
 	</body>
 </html>
