www: Switch from GA to Plausible Analytics

tsconfig.json

@@ -1,16 +1,16 @@
 {
   "compilerOptions": {
-    "target": "ES6",
-    "module": "esnext",
+    "target": "ES2020",
+    "module": "CommonJS",
     "jsx": "react",
-    "lib": ["dom", "es2016"],
+    "lib": ["dom", "es2020"],
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noEmit": true,
     "skipLibCheck": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
   },
   "include": [
     "./packages/**/*",
@@ -20,5 +20,5 @@
     "./examples/**/src/**/*",
     "./vitest-setup.ts"
   ],
-  "exclude": ["node_modules", "themes/**/node_modules"]
+  "exclude": ["node_modules", "themes/**/node_modules"],
 }

www/gatsby-browser.tsx

@@ -1 +1,8 @@
+import type { GatsbyBrowser } from "gatsby"
 import "./src/styles/fonts.css"
+
+export const onRouteUpdate: GatsbyBrowser["onRouteUpdate"] = () => {
+  if (process.env.NODE_ENV === `production` && typeof window.plausible !== `undefined`) {
+    window.plausible(`pageview`)
+  }
+}

www/gatsby-config.ts

@@ -3,7 +3,6 @@ import path from "path"
 import "dotenv/config"
 
 const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
-const googleTagId = process.env.GOOGLE_PROPERTY_ID
 const githubToken = process.env.GITHUB_TOKEN
 
 const config: GatsbyConfig = {
@@ -40,15 +39,6 @@ const config: GatsbyConfig = {
         `,
       },
     },
-    googleTagId && {
-      resolve: `gatsby-plugin-google-gtag`,
-      options: {
-        trackingIds: [process.env.GOOGLE_PROPERTY_ID],
-        pluginConfig: {
-          head: true,
-        },
-      },
-    },
     {
       resolve: `gatsby-transformer-yaml`,
       options: {

www/gatsby-ssr.tsx

@@ -1,7 +1,11 @@
 import * as React from "react"
 import type { GatsbySSR } from "gatsby"
 
-export const onRenderBody: GatsbySSR["onRenderBody"] = ({ setHtmlAttributes, setHeadComponents }) => {
+const SITE_DOMAIN = `themes.lekoarts.de`
+const PLAUSIBLE_DOMAIN = `plausible.io`
+const SCRIPT_URI = `/js/plausible.js`
+
+export const onRenderBody: GatsbySSR["onRenderBody"] = ({ setHeadComponents }) => {
   setHeadComponents([
     <link
       rel="preload"
@@ -44,4 +48,25 @@ export const onRenderBody: GatsbySSR["onRenderBody"] = ({ setHtmlAttributes, set
       key="ibm-plex-sans-700"
     />,
   ])
+
+  if (process.env.NODE_ENV === `production`) {
+    const scriptProps = {
+      "data-domain": SITE_DOMAIN,
+      src: `https://${PLAUSIBLE_DOMAIN}${SCRIPT_URI}`,
+    }
+
+    setHeadComponents([
+      <link key="gatsby-plugin-plausible-preconnect" rel="preconnect" href={`https://${PLAUSIBLE_DOMAIN}`} />,
+      <script key="gatsby-plugin-plausible-script" defer {...scriptProps} />,
+      // See: https://plausible.io/docs/custom-event-goals#1-trigger-custom-events-with-javascript-on-your-site
+      <script
+        key="gatsby-plugin-plausible-custom-events"
+        dangerouslySetInnerHTML={{
+          __html: `
+            window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) };
+          `,
+        }}
+      />,
+    ])
+  }
 }

www/package.json

@@ -20,7 +20,6 @@
     "@theme-ui/preset-tailwind": "~0.15.7",
     "gatsby": "^5.9.0",
     "gatsby-plugin-catch-links": "^5.9.0",
-    "gatsby-plugin-google-gtag": "^5.9.0",
     "gatsby-plugin-image": "^3.9.0",
     "gatsby-plugin-manifest": "^5.9.0",
     "gatsby-plugin-sharp": "^5.9.0",

www/src/pages/404.tsx

@@ -1,24 +1,31 @@
 /** @jsx jsx */
+import * as React from "react"
 import { PageProps, Link, HeadFC } from "gatsby"
 import { jsx, Container, get } from "theme-ui"
 import { Themed } from "@theme-ui/mdx"
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 
-const Index: React.FC<PageProps> = () => (
-  <Layout>
-    <Container sx={{ my: 6, textAlign: `center` }}>
-      <Themed.h1>404</Themed.h1>
-      <Themed.p>
-        Page not found <br />
-        Go back to{` `}
-        <Link sx={(t) => get(t, `styles.a`)} to="/">
-          Home
-        </Link>
-      </Themed.p>
-    </Container>
-  </Layout>
-)
+const Index: React.FC<PageProps> = () => {
+  React.useEffect(() => {
+    window.plausible(`404`, { props: { path: document.location.pathname } })
+  }, [])
+
+  return (
+    <Layout>
+      <Container sx={{ my: 6, textAlign: `center` }}>
+        <Themed.h1>404</Themed.h1>
+        <Themed.p>
+          Page not found <br />
+          Go back to{` `}
+          <Link sx={(t) => get(t, `styles.a`)} to="/">
+            Home
+          </Link>
+        </Themed.p>
+      </Container>
+    </Layout>
+  )
+}
 
 export default Index
 

www/src/types.d.ts

@@ -0,0 +1,15 @@
+declare module "react-responsive"
+declare module "react-share"
+declare module "*.svg"
+
+declare namespace React {
+  interface MetaHTMLAttributes {
+    value?: string
+  }
+}
+
+declare global {
+  interface Window {
+    plausible: (name: string, options?: { callback?: () => void; props?: { [key: string]: string } }) => void
+  }
+}

www/yarn.lock

@@ -7817,20 +7817,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gatsby-plugin-google-gtag@npm:^5.9.0":
-  version: 5.9.0
-  resolution: "gatsby-plugin-google-gtag@npm:5.9.0"
-  dependencies:
-    "@babel/runtime": ^7.20.13
-    minimatch: ^3.1.2
-  peerDependencies:
-    gatsby: ^5.0.0-next
-    react: ^18.0.0 || ^0.0.0
-    react-dom: ^18.0.0 || ^0.0.0
-  checksum: 2846dd7dea898d529d9f18350125c46dcbd5d4ae9c2cec76c16229d356bc0c3695c3f480464de0d8fb62e379b84a1d51fdcce70ce5ef05136b6100c2cac0b380
-  languageName: node
-  linkType: hard
-
 "gatsby-plugin-image@npm:^3.9.0":
   version: 3.9.0
   resolution: "gatsby-plugin-image@npm:3.9.0"
@@ -14683,7 +14669,6 @@ __metadata:
     "@theme-ui/preset-tailwind": ~0.15.7
     gatsby: ^5.9.0
     gatsby-plugin-catch-links: ^5.9.0
-    gatsby-plugin-google-gtag: ^5.9.0
     gatsby-plugin-image: ^3.9.0
     gatsby-plugin-manifest: ^5.9.0
     gatsby-plugin-sharp: ^5.9.0