Add plausible analytics

2025-12-10 10:57:04 +00:00 · 2024-10-25 14:15:35 -07:00
parent 9debd15026
commit a22b9e40e0
3 changed files with 34 additions and 23 deletions
--- a/src/app.html
+++ b/src/app.html
@@ -26,5 +26,6 @@
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
+    <script defer data-domain="flotilla.social" src="https://plausible.coracle.social/js/script.manual.js"></script>
  </body>
 </html>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,6 +4,7 @@
  import {onMount} from "svelte"
  import {get} from "svelte/store"
  import {dev} from "$app/environment"
+  import {page} from "$app/stores"
  import {sleep, take, sortBy, ago, now, HOUR} from "@welshman/lib"
  import type {TrustedEvent} from "@welshman/util"
  import {
@@ -44,7 +45,15 @@
  import {loadUserData} from "@app/commands"
  import * as state from "@app/state"

-  const setupBugsnag = () => {
+  const setupErrorTracking = () => {
+    if (!import.meta.env.VITE_BUGSNAG_API_KEY) return
+
+    // Initialize
+    Bugsnag.start({
+      apiKey: import.meta.env.VITE_BUGSNAG_API_KEY,
+      collectUserIp: false,
+    })
+
    // Redact long strings, especially hex and bech32 keys which are 64 and 63
    // characters long, respectively. Put the threshold a little lower in case
    // someone accidentally enters a key with the last few digits missing
@@ -55,8 +64,6 @@
          .replace(/\w{60}\w+/g, "[REDACTED]"),
      )

-    // Wait for bugsnag to be started in main
-    setTimeout(() => {
    Bugsnag.addOnError((event: any) => {
      // Redact individual properties since the event needs to be
      // mutated, and we don't want to lose the prototype
@@ -67,6 +74,15 @@

      return true
    })
+  }
+
+  const setupAnalytics = () => {
+    (window as any).plausible.q = []
+
+    page.subscribe($page => {
+      if ($page.route) {
+        (window as any).plausible.q.push(["pageview", {u: $page.route.id}])
+      }
    })
  }

@@ -80,15 +96,6 @@
  onMount(() => {
    Object.assign(window, {get, ...lib, ...util, ...app, ...state})

-    if (import.meta.env.VITE_BUGSNAG_API_KEY) {
-      Bugsnag.start({
-        apiKey: import.meta.env.VITE_BUGSNAG_API_KEY,
-        collectUserIp: false,
-      })
-    }
-
-    setupBugsnag()
-
    const getScoreEvent = () => {
      const ALWAYS_KEEP = Infinity
      const NEVER_KEEP = 0
@@ -146,6 +153,9 @@
    }

    if (!db) {
+      setupErrorTracking()
+      setupAnalytics()
+
      ready = initStorage("flotilla", 4, {
        events: storageAdapters.fromRepository(repository, {throttle: 300, migrate: migrateEvents}),
        relays: {keyPath: "url", store: throttled(1000, relays)},
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -16,10 +16,10 @@ export default {
    },
    csp: {
      directives: {
-        "script-src": ["self", "plausible.io"],
+        "script-src": ["self", "plausible.coracle.social"],
        "worker-src": ["self", "blob:"],
        "style-src": ["self", "unsafe-inline"],
-        "frame-src": ["open.spotify.com", "embed.tidal.com"],
+        "frame-src": ["none"],
        "child-src": ["none"],
        "form-action": ["none"],
      },