docs(chore): swap analytics for plausible

joshuaellis · joshuaellis · commit 523b1c6c5f16 · 2021-12-27T13:51:54.000Z
diff --git a/docs/src/components/Demo/Demo.tsx b/docs/src/components/Demo/Demo.tsx
@@ -10,14 +10,6 @@ interface DemoProps {
   description?: string
 }
 
-declare global {
-  interface Window {
-    pa?: {
-      track: (args: { name: string; value?: number; unit?: string }) => void
-    }
-  }
-}
-
 export const Demo: FC<DemoProps> = ({ children, title, description }) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const [inViewport, setInViewport] = useState(false)
@@ -27,8 +19,13 @@ export const Demo: FC<DemoProps> = ({ children, title, description }) => {
   })
 
   const handleClick = () => {
-    if (window.pa) {
-      window.pa.track({ name: `Viewed ${title} in codesandbox` })
+    if (window.plausible) {
+      window.plausible('Viewed Demo', {
+        props: {
+          name: title,
+          location: document.location.pathname,
+        },
+      })
     }
   }
 
diff --git a/docs/src/pages/_app.tsx b/docs/src/pages/_app.tsx
@@ -2,6 +2,7 @@ import { AppProps } from 'next/app'
 import { createGlobalStyle, ThemeProvider } from 'styled-components'
 import { DefaultSeo } from 'next-seo'
 import { MDXProvider } from '@mdx-js/react'
+import { useEffect } from 'react'
 
 import { GLOBAL } from 'styles/global'
 import { RESET } from 'styles/reset'
@@ -28,6 +29,17 @@ const components = {
 }
 
 function App({ Component, pageProps }: MyAppProps) {
+  useEffect(() => {
+    /**
+     * Attach plausible on mount
+     */
+    window.plausible =
+      window.plausible ||
+      function () {
+        void (window.plausible.q = window.plausible.q || []).push(arguments)
+      }
+  }, [])
+
   return (
     <ThemeProvider theme={SpringTheme}>
       <MDXProvider components={components}>
diff --git a/docs/src/pages/_document.tsx b/docs/src/pages/_document.tsx
@@ -7,6 +7,20 @@ import Document, {
 } from 'next/document'
 import { ServerStyleSheet } from 'styled-components'
 
+declare global {
+  interface Window {
+    plausible: {
+      (
+        eventName: string,
+        props?: {
+          props: Record<string, string>
+        }
+      ): void
+      q?: IArguments[]
+    }
+  }
+}
+
 export default class Doc extends Document {
   static async getInitialProps(ctx: DocumentContext) {
     const sheet = new ServerStyleSheet()
@@ -56,12 +70,9 @@ export default class Doc extends Document {
           <link rel="manifest" href={'/manifest.json'} />
           <link rel="shortcut icon" href={'/favicon.ico'} />
           <script
-            data-host="https://microanalytics.io"
-            data-dnt="false"
-            src="https://microanalytics.io/js/script.js"
-            id="ZwSg9rf6GA"
-            async
-            defer></script>
+            defer
+            data-domain="react-spring.io"
+            src="https://plausible.io/js/plausible.js"></script>
         </Head>
         <body>
           <Main />
