Add Plausible

.env.template

@@ -0,0 +1,2 @@
+VITE_PLAUSIBLE_DOMAIN=
+VITE_PLAUSIBLE_API_HOST=

.github/workflows/deploy-gh-pages.yml

@@ -39,6 +39,9 @@ jobs:
         run: npm install
       - name: Build
         run: npm run build
+        env:
+          VITE_PLAUSIBLE_DOMAIN: ${{ vars.VITE_PLAUSIBLE_DOMAIN }}
+          VITE_PLAUSIBLE_API_HOST: ${{ vars.VITE_PLAUSIBLE_API_HOST }}
       - name: Setup Pages
         uses: actions/configure-pages@v3
       - name: Upload artifact

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "src/helpers/plausible-tracker-sendbeacon"]
+	path = src/helpers/plausible-tracker-sendbeacon
+	url = https://github.com/orgrosua/plausible-tracker.git

src/app/App.tsx

@@ -3,6 +3,7 @@ import sync from "css-animation-sync"
 import Fuse from "fuse.js"
 import { debounce } from "lodash"
 import { useCallback, useEffect, useState } from "preact/hooks"
+import { PlausibleEvent, trackPlausibleEvent } from "../helpers/plausible"
 import _TRACKS from "../tracks.json"
 import TRACK_INDEX from "../tracks_index.json"
 import Match from "./Match"
@@ -44,8 +45,8 @@ export default function App() {
     sync("glitter-bg", "glitter")
   }, [])
 
+  const [hasEntered, setHasEntered] = useState(false)
   const [query, setQuery] = useState(window.location.hash.slice(1))
-
   const [results, setResults] = useState<{
     results: FuseResult[]
     query: string
@@ -89,7 +90,13 @@ export default function App() {
                 spellcheck={false}
                 enterkeyhint="done"
                 class="w-full animate-glitter-bg-slow appearance-none rounded-2xl border-4 p-4 font-slab text-2xl uppercase tracking-widest focus:outline-none"
-                onInput={e => setQuery(e.currentTarget.value)}
+                onInput={e => {
+                  setQuery(e.currentTarget.value)
+                  if (!hasEntered) {
+                    setHasEntered(true)
+                    trackPlausibleEvent(PlausibleEvent.EnterQuery)
+                  }
+                }}
                 onKeyUp={e => e.key === "Enter" && e.currentTarget.blur()}
               />
 

src/app/ShareButton.tsx

@@ -1,6 +1,7 @@
 import { CheckIcon, ShareIcon } from "@heroicons/react/20/solid"
 import { ClipboardIcon } from "@heroicons/react/24/outline"
 import { useMemo, useState } from "preact/hooks"
+import { PlausibleEvent, trackPlausibleEvent } from "../helpers/plausible"
 
 export default function ShareButton() {
   const [isCopied, setIsCopied] = useState(false)
@@ -30,6 +31,9 @@ export default function ShareButton() {
             setTimeout(() => setIsCopied(false), 750)
           })
         }
+        trackPlausibleEvent(PlausibleEvent.Share, {
+          props: { type: canShare ? "share" : "copy" },
+        })
       }}
     >
       <div class="flex items-center gap-1 lg:flex-col lg:gap-0">

src/helpers/plausible.ts

@@ -0,0 +1,51 @@
+// use client from PR [0]
+// until plausible-tracker supports navigator.sendBeacon [1]
+// and doesn't break target="_blank" [2]
+// [0] https://github.com/plausible/plausible-tracker/pull/54
+// [1] https://github.com/plausible/plausible-tracker/issues/12
+// [2] https://github.com/plausible/plausible-tracker/issues/12
+import Plausible, {
+  EventOptions,
+  PlausibleOptions,
+} from "./plausible-tracker-sendbeacon/src"
+
+export enum PlausibleEvent {
+  EnterQuery = "Enter Query",
+  Share = "Share",
+}
+
+// not exported in plausible-tracker
+type TrackEvent = (
+  eventName: string,
+  options?: EventOptions,
+  eventData?: PlausibleOptions,
+) => void
+let _trackPlausibleEvent: TrackEvent | undefined
+
+export default function setupPlausible() {
+  if (import.meta.env.VITE_PLAUSIBLE_DOMAIN) {
+    const plausible = Plausible({
+      domain: import.meta.env.VITE_PLAUSIBLE_DOMAIN,
+      apiHost:
+        import.meta.env.VITE_PLAUSIBLE_API_HOST || "https://plausible.io",
+      trackLocalhost: true,
+      useSendBeacon: true,
+    })
+    plausible.enableAutoPageviews()
+    plausible.enableAutoOutboundTracking()
+    _trackPlausibleEvent = plausible.trackEvent
+  }
+}
+
+export const trackPlausibleEvent = (
+  eventName: PlausibleEvent,
+  eventData?: EventOptions,
+  options?: PlausibleOptions,
+) => {
+  try {
+    if (!_trackPlausibleEvent) setupPlausible()
+    _trackPlausibleEvent && _trackPlausibleEvent(eventName, eventData, options)
+  } catch (e) {
+    console.error(e)
+  }
+}

src/index.tsx

@@ -1,6 +1,9 @@
 import { render } from "preact"
 import App from "./app/App"
 import "./fonts.css"
+import setupPlausible from "./helpers/plausible"
 import "./index.css"
 
+setupPlausible()
+
 render(<App />, document.getElementById("app"))