feat: add formbricks

app/src/components/game/ControlPalette.vue

@@ -3,6 +3,7 @@ import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import useSession from '../../store/session'
 import { surveyUrl } from '../../config'
+import formbricks from '../../utils/formbricks'
 
 const router = useRouter()
 const sessionStore = useSession()
@@ -33,7 +34,11 @@ const continuePlay = async () => {
         <p class="text-text-primary inline ml-1 md:flex">問卷</p>
       </a>
     </button>
-    <button disabled id="solution" class="bg-bg-disabled rounded-lg p-2">
+    <button
+      id="solution"
+      class="bg-bg-disabled rounded-lg p-2"
+      @click="formbricks.track('quest_completed')"
+    >
       <font-awesome-icon
         :icon="['far', 'circle-question']"
         class="text-text-disabled px-1"

app/src/main.ts

@@ -10,9 +10,9 @@ import Toast, { POSITION } from 'vue-toastification'
 /* import Vue Lottie */
 import Vue3Lottie from 'vue3-lottie'
 import 'vue-toastification/dist/index.css'
-
 import App from './App.vue'
 import router from './router'
+import formbricks from './utils/formbricks'
 
 const app = createApp(App)
 const pinia = createPinia()
@@ -22,6 +22,12 @@ app.component('font-awesome-icon', FontAwesomeIcon)
 app.use(pinia)
 app.use(router)
 
+router.afterEach(() => {
+  if (typeof formbricks !== 'undefined') {
+    formbricks.registerRouteChange()
+  }
+})
+
 const options = {
   position: POSITION.TOP_RIGHT,
 }

app/src/utils/formbricks.ts

@@ -0,0 +1,10 @@
+import formbricks from '@formbricks/js/website'
+
+if (typeof window !== 'undefined') {
+  formbricks.init({
+    environmentId: 'clzcdqqn0000kadvtqykdo0pc',
+    apiHost: 'https://app.formbricks.com',
+  })
+}
+
+export default formbricks