LayoutitStudio · apresmoi · May 31, 2026 · May 31, 2026
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
@@ -50,6 +50,10 @@ export default defineConfig({
       description: 'A CSS polygon mesh engine. DOM-native 3D rendering.',
       favicon: '/favicon.ico',
       head: [
+        // Google Analytics (gtag.js) — covers all Starlight docs pages; custom
+        // pages render the same tag via src/components/Analytics.astro.
+        { tag: 'script', attrs: { async: true, src: 'https://www.googletagmanager.com/gtag/js?id=G-XV72TXWTM5' } },
+        { tag: 'script', content: "window.dataLayer = window.dataLayer || [];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js', new Date());\ngtag('config', 'G-XV72TXWTM5');" },
         { tag: 'meta', attrs: { property: 'og:image', content: 'https://polycss.com/polycss-github.png' } },
         { tag: 'meta', attrs: { property: 'og:image:width', content: '1280' } },
         { tag: 'meta', attrs: { property: 'og:image:height', content: '640' } },

diff --git a/website/src/components/Analytics.astro b/website/src/components/Analytics.astro
@@ -0,0 +1,13 @@
+---
+// Google Analytics (gtag.js). Rendered in the <head> of the custom Astro pages
+// (index / wordart / gallery / builder / 404). Starlight docs pages get the
+// same tag via the `head` config in astro.config.mjs, so every page is covered.
+const GA_ID = 'G-XV72TXWTM5';
+---
+<script async is:inline src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}></script>
+<script is:inline define:vars={{ GA_ID }}>
+  window.dataLayer = window.dataLayer || [];
+  function gtag() { dataLayer.push(arguments); }
+  gtag('js', new Date());
+  gtag('config', GA_ID);
+</script>
diff --git a/website/src/pages/404.astro b/website/src/pages/404.astro
@@ -1,5 +1,6 @@
 ---
 import DocsHeader from "../components/DocsHeader.astro";
+import Analytics from "../components/Analytics.astro";
 import "../styles/custom.css";
 
 const title = "Page not found | PolyCSS";
@@ -11,6 +12,7 @@ const description = "The requested page could not be found.";
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <Analytics />
     <title>{title}</title>
     <meta name="description" content={description} />
   </head>

diff --git a/website/src/pages/builder.astro b/website/src/pages/builder.astro
@@ -1,6 +1,7 @@
 ---
 import { BuilderWorkbench } from '../components/BuilderWorkbench';
 import DocsHeader from '../components/DocsHeader.astro';
+import Analytics from '../components/Analytics.astro';
 import '../styles/custom.css';
 
 const title = 'Builder | PolyCSS';
@@ -13,6 +14,7 @@ const socialImageAlt = 'PolyCSS logo, a rendered polygon duck, and DOM markup.';
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <Analytics />
     <title>{title}</title>
     <meta name="description" content={description} />
     <meta property="og:title" content={title} />

diff --git a/website/src/pages/gallery.astro b/website/src/pages/gallery.astro
@@ -1,6 +1,7 @@
 ---
 import { GalleryWorkbench } from '../components/GalleryWorkbench';
 import DocsHeader from '../components/DocsHeader.astro';
+import Analytics from '../components/Analytics.astro';
 import '../styles/custom.css';
 
 const title = 'Gallery | PolyCSS';
@@ -13,6 +14,7 @@ const socialImageAlt = 'PolyCSS logo, a rendered polygon duck, and DOM markup.';
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <Analytics />
     <title>{title}</title>
     <meta name="description" content={description} />
     <meta property="og:title" content={title} />

diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
@@ -11,6 +11,7 @@ hljs.registerLanguage("tsx", typescript);
 hljs.registerLanguage("vue", xml);
 
 import DocsHeader from "../components/DocsHeader.astro";
+import Analytics from "../components/Analytics.astro";
 
 function highlight(code: string, lang: string): string {
   return hljs.highlight(code, { language: lang }).value;
@@ -103,6 +104,7 @@ const ldJson = {
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <Analytics />
   <title>{title}</title>
   <meta name="description" content={description} />
   <meta property="og:title" content={title} />

diff --git a/website/src/pages/wordart.astro b/website/src/pages/wordart.astro
@@ -1,18 +1,20 @@
 ---
 import { WordArtWorkbench } from '../components/WordArtWorkbench';
 import DocsHeader from '../components/DocsHeader.astro';
+import Analytics from '../components/Analytics.astro';
 import '../styles/custom.css';
 
-const title = 'WordArt | PolyCSS';
-const description = 'Compose 3D text from any Google font and render it with pure CSS — multiline, styled, extruded, WordArt-style.';
+const title = 'WordArt — 3D text in pure CSS, no canvas | PolyCSS';
+const description = 'Make retro WordArt-style 3D text from any Google font — gradients, block textures, bevels, custom edge curves and warps — rendered with pure CSS and DOM. No canvas, no WebGL. Powered by PolyCSS, the CSS polygon-mesh engine.';
 const canonical = 'https://polycss.com/wordart/';
 const socialImage = 'https://polycss.com/polycss-github.png';
-const socialImageAlt = 'PolyCSS logo, a rendered polygon duck, and DOM markup.';
+const socialImageAlt = 'WordArt-style extruded 3D text rendered in pure CSS with PolyCSS.';
 ---
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <Analytics />
     <title>{title}</title>
     <meta name="description" content={description} />
     <meta property="og:title" content={title} />