Add Google Analytics with a BUILD_ENV-driven site config

.github/workflows/deploy-prod.yml

@@ -39,6 +39,8 @@ jobs:
 
       - name: Build
         run: pnpm build
+        env:
+          BUILD_ENV: production
 
       - name: Save cache to S3
         run: |

.github/workflows/deploy-staging.yml

@@ -39,6 +39,8 @@ jobs:
 
       - name: Build
         run: pnpm build
+        env:
+          BUILD_ENV: staging
 
       # - name: Save cache to S3
       #   run: |

astro.config.mjs → astro.config.ts

@@ -1,6 +1,6 @@
-// @ts-check
 import { satteri } from "@astrojs/markdown-satteri";
 import starlight from "@astrojs/starlight";
+import type { StarlightConfig } from "@astrojs/starlight/types";
 import { defineConfig, fontProviders } from "astro/config";
 
 import { satteriRelativeMarkdownLinks } from "@system76/satteri-relative-markdown-links";
@@ -9,11 +9,48 @@ import { viteStaticCopy } from "vite-plugin-static-copy";
 import wrapImagesWithOriginals from "./src/plugins/satteri-wrap-images-with-originals.ts";
 import { generateSidebar } from "./src/plugins/summary-to-sidebar.ts";
 
+type HeadConfig = NonNullable<StarlightConfig["head"]>[number];
+
 const base = "tech-docs";
 
-const site = import.meta.env.PROD
-    ? `https://system76.com/${base}`
-    : `http://localhost:4321/${base}`;
+const buildEnv = process.env.BUILD_ENV ?? "local";
+
+const siteByBuildEnv = {
+    local: `http://localhost:4321/${base}`,
+    staging: `https://genesis76.com/${base}`,
+    production: `https://system76.com/${base}`,
+};
+
+if (!(buildEnv in siteByBuildEnv)) {
+    throw new Error(
+        `Invalid BUILD_ENV "${buildEnv}", expected one of: ${Object.keys(siteByBuildEnv).join(", ")}`,
+    );
+}
+
+function googleAnalyticsHead(): HeadConfig[] {
+    if (buildEnv !== "production") {
+        return [];
+    }
+
+    return [
+        {
+            tag: "script",
+            attrs: {
+                async: true,
+                src: "https://www.googletagmanager.com/gtag/js?id=G-H37KSF3165",
+            },
+        },
+        {
+            tag: "script",
+            content: `window.dataLayer = window.dataLayer || [];
+            function gtag() { dataLayer.push(arguments); }
+            gtag('js', new Date());
+            gtag('config', 'G-H37KSF3165');`,
+        },
+    ];
+}
+
+const site = siteByBuildEnv[buildEnv as keyof typeof siteByBuildEnv];
 
 // https://astro.build/config
 export default defineConfig({
@@ -68,6 +105,7 @@ export default defineConfig({
             components: {
                 Head: "./src/components/Head.astro",
             },
+            head: [...googleAnalyticsHead()],
         }),
     ],
     base,