Improve event tracking

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

src/app/components/Chat/ChatMessageInput.tsx

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import { FC, memo, ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import { GoBook } from 'react-icons/go'
+import { trackEvent } from '~app/plausible'
 import Button from '../Button'
 import PromptLibraryDialog from '../PromptLibrary/Dialog'
 import TextInput from './TextInput'
@@ -50,16 +51,16 @@ const ChatMessageInput: FC<Props> = (props) => {
     [value],
   )
 
+  const openPromptLibrary = useCallback(() => {
+    setIsPromptLibraryDialogOpen(true)
+    trackEvent('open_prompt_library')
+  }, [])
+
   return (
     <form className={cx('flex flex-row items-center gap-3', props.className)} onSubmit={onFormSubmit} ref={formRef}>
       {props.mode === 'full' && (
         <>
-          <GoBook
-            size={22}
-            color="#707070"
-            className="cursor-pointer"
-            onClick={() => setIsPromptLibraryDialogOpen(true)}
-          />
+          <GoBook size={22} color="#707070" className="cursor-pointer" onClick={openPromptLibrary} />
           <PromptLibraryDialog
             isOpen={isPromptLibraryDialogOpen}
             onClose={() => setIsPromptLibraryDialogOpen(false)}

src/app/hooks/use-chat.ts

@@ -1,5 +1,6 @@
 import { useAtom } from 'jotai'
 import { useCallback, useMemo } from 'react'
+import { trackEvent } from '~app/plausible'
 import { chatFamily } from '~app/state'
 import { ChatMessageModel } from '~types'
 import { uuid } from '~utils'
@@ -23,6 +24,7 @@ export function useChat(botId: BotId, page = 'singleton') {
 
   const sendMessage = useCallback(
     async (input: string) => {
+      trackEvent('send_message', { botId })
       const botMessageId = uuid()
       setChatState((draft) => {
         draft.messages.push(

src/app/main.tsx

@@ -1,13 +1,12 @@
 import { RouterProvider } from '@tanstack/react-router'
-import Plausible from 'plausible-tracker'
 import { createRoot } from 'react-dom/client'
 import './base.scss'
-import { router } from './router'
 import './i18n'
+import { plausible } from './plausible'
+import { router } from './router'
 
 const container = document.getElementById('app')!
 const root = createRoot(container)
 root.render(<RouterProvider router={router} />)
 
-const plausible = Plausible({ domain: 'chathub.gg', hashMode: true })
 plausible.enableAutoPageviews()

src/app/plausible.ts

@@ -0,0 +1,15 @@
+import Plausible from 'plausible-tracker'
+
+export const plausible = Plausible({
+  domain: 'chathub.gg',
+  hashMode: true,
+  apiHost: import.meta.env.VITE_PLAUSIBLE_API_HOST || 'https://plausible.io',
+})
+
+export function trackEvent(name: string, props?: { [propName: string]: string | number | boolean }) {
+  try {
+    plausible.trackEvent(name, { props })
+  } catch (err) {
+    console.error('plausible.trackEvent error', err)
+  }
+}