feat: add support for page view custom properties with Plausible, add…

… logged_in pageview property, add superfan property everywhere

src/app.html

@@ -128,8 +128,11 @@
     <!-- Plausible -->
     <script
       defer
+      id="plausible"
+      event-logged_in="false"
+      event-superfan="false"
       data-domain="welcometomygarden.org"
-      src="https://visitors.slowby.travel/js/script.outbound-links.js"
+      src="https://visitors.slowby.travel/js/script.outbound-links.pageview-props.js"
     ></script>
     <script>
       window.plausible =

src/lib/util/track-plausible.ts

@@ -32,6 +32,10 @@ const logToPlausible = (
 ) => {
   const concreteUser = get(user);
   // Don't log the superfan custom property if it can be derived from the event.
+  // TODO: this distinction was made obsolete by the Plausible <script> property based `superfan`
+  // property tracking, which applies always. Normally it should be possible to remove the custom property here
+  // and remove the distinction in event types. If we still want to save a little bit of data by
+  // not logging obvious/implied event properties, we need to manually track page views.
   const superfanProperty: { superfan?: boolean } =
     isSuperfanOnlyEvent(eventName) || isNonsuperfanOnlyEvent(eventName)
       ? {}
@@ -137,4 +141,30 @@ function trackEvent(
   }
 }
 
+/**
+ * Log custom properties on all page views
+// https://plausible.io/docs/custom-props/for-pageviews
+ * @param plausibleScriptElement
+ */
+export const registerCustomPropertyTracker = (
+  plausibleScriptElement: Element | null | undefined
+) => {
+  return user.subscribe(($user) => {
+    if (!plausibleScriptElement) {
+      return;
+    }
+    if ($user) {
+      plausibleScriptElement.setAttribute('event-logged_in', 'true');
+      if ($user.superfan) {
+        plausibleScriptElement.setAttribute('event-superfan', 'true');
+      } else {
+        plausibleScriptElement.setAttribute('event-superfan', 'false');
+      }
+    } else {
+      plausibleScriptElement.setAttribute('event-logged_in', 'false');
+      plausibleScriptElement.setAttribute('event-superfan', 'false');
+    }
+  });
+};
+
 export default trackEvent;

src/routes/+layout.svelte

@@ -35,6 +35,7 @@
   import { NOTIFICATION_PROMPT_DISMISSED_COOKIE } from '$lib/constants';
   import { resetPushRegistrationStores } from '$lib/stores/pushRegistrations';
   import { onNavigate } from '$app/navigation';
+  import { registerCustomPropertyTracker } from '$lib/util/track-plausible';
 
   type MaybeUnsubscriberFunc = (() => void) | undefined;
 
@@ -174,6 +175,13 @@
     console.log('Mounting root layout');
     vh = `${window.innerHeight * 0.01}px`;
 
+    // Initialize page view property tracking via the Plausible script element/
+    // as soon as Svelte has mounted the root layout (including the script)
+    const plausibleScriptElement = document.querySelector('script#plausible');
+    if (plausibleScriptElement) {
+      registerCustomPropertyTracker(plausibleScriptElement);
+    }
+
     await initializeSvelteI18n();
     // Initialize Firebase
     await initialize();
@@ -182,6 +190,8 @@
     }
     // Initialize the user data (dependent on Firebase auth)
     initializeUser();
+
+    // No unsubscribers are used due to this being an async initializer
   });
 
   onDestroy(() => {