web/satellite: add plausible script to Satellite UI

This change adds the plausible script to the web UI if analytics is enabled. Issue: #6820 Change-Id: I3c749a627f3efad7181d7c719d7a28fbe38f2dcb
storj · Mar 15, 2024 · 5fbd466 · 5fbd466
1 parent c8d6de6
commit 5fbd466
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/web/satellite/src/App.vue b/web/satellite/src/App.vue
@@ -144,8 +144,23 @@ onBeforeMount(async (): Promise<void> => {
     await setup();
 
     isLoading.value = false;
+
+    setupPlausible();
 });
 
+/**
+ * conditionally setup plausible analytics.
+ */
+async function setupPlausible() {
+    const plausibleEnabled = !!configStore.state.config.plausibleDomain && !!configStore.state.config.plausibleScriptUrl;
+    if (configStore.state.config.analyticsEnabled && plausibleEnabled) {
+        await analyticsStore.loadPlausible({
+            domain: configStore.state.config.plausibleDomain,
+            scriptURL: configStore.state.config.plausibleScriptUrl,
+        });
+    }
+}
+
 usersStore.$onAction(({ name, after }) => {
     if (name === 'login') {
         after((_) => {

diff --git a/web/satellite/src/store/modules/analyticsStore.ts b/web/satellite/src/store/modules/analyticsStore.ts
@@ -2,13 +2,38 @@
 // See LICENSE for copying information.
 
 import { defineStore } from 'pinia';
+import { ref } from 'vue';
 
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 
+type Plausible = (event: 'pageview', data: { u: string; props?: { satellite: string } }) => void;
+
 export const useAnalyticsStore = defineStore('analytics', () => {
     const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
 
+    const plausible = ref<Plausible>();
+
+    async function loadPlausible(data: {
+        domain: string;
+        scriptURL: string;
+    }) {
+        try {
+            await new Promise((resolve, reject) => {
+                const head = document.head || document.getElementsByTagName('head')[0];
+                const script = document.createElement('script');
+                script.type = 'text/javascript';
+                script.src = data.scriptURL;
+                script.setAttribute('data-domain', data.domain);
+
+                head.appendChild(script);
+                script.onload = resolve;
+                script.onerror = reject;
+            });
+            plausible.value = window['plausible'];
+        } catch (_) { /*empty*/ }
+    }
+
     function eventTriggered(eventName: AnalyticsEvent, props?: {[p: string]: string}): void {
         analytics.eventTriggered(eventName, props).catch(_ => {});
     }
@@ -26,6 +51,7 @@ export const useAnalyticsStore = defineStore('analytics', () => {
     }
 
     return {
+        loadPlausible,
         eventTriggered,
         errorEventTriggered,
         linkEventTriggered,