Disable Plausible at init (#1182)

frontend/src/composables/use-analytics.ts

@@ -1,8 +1,9 @@
-import { computed } from "vue"
+import { computed, onMounted } from "vue"
 import { useContext } from "@nuxtjs/composition-api"
 
 import type { Events, EventName } from "~/types/analytics"
 import { useUiStore } from "~/stores/ui"
+import { useFeatureFlagStore } from "~/stores/feature-flag"
 
 /**
  * The `ctx` parameter must be supplied if using this composable outside the
@@ -11,6 +12,11 @@ import { useUiStore } from "~/stores/ui"
 export const useAnalytics = () => {
   const { $plausible, $ua, i18n } = useContext()
   const uiStore = useUiStore()
+  const featureFlagStore = useFeatureFlagStore()
+
+  onMounted(() => {
+    featureFlagStore.syncAnalyticsWithLocalStorage()
+  })
 
   /**
    * the Plausible props that work identically on the server-side and the

frontend/src/stores/feature-flag.ts

@@ -160,14 +160,18 @@ export const useFeatureFlagStore = defineStore(FEATURE_FLAG, {
       const flag = this.flags[name]
       if (getFlagStatus(flag) === SWITCHABLE) {
         flag.preferredState = targetState
-
-        // For Plausible to stop tracking `plausible_ignore` must be set.
-        // Ref: https://plausible.io/docs/excluding-localstorage
-        if (name === "analytics") {
-          const storage = useStorage<boolean | null>("plausible_ignore", null)
-          storage.value = targetState === ON ? null : true
-        }
+        if (name === "analytics") this.syncAnalyticsWithLocalStorage()
       } else warn(`Cannot set preferred state for non-switchable flag: ${name}`)
     },
+    /**
+     * For Plausible to stop tracking `plausible_ignore` must be set in
+     * `localStorage`.
+     * @see {@link https://plausible.io/docs/excluding-localstorage}
+     */
+    syncAnalyticsWithLocalStorage() {
+      const storage = useStorage<boolean | null>("plausible_ignore", null)
+      storage.value =
+        getFeatureState(this.flags["analytics"]) === ON ? null : true
+    },
   },
 })