feat: add tracker

Author: Innei

src/app/analyze.tsx

@@ -2,8 +2,15 @@
 
 import { useRef } from 'react'
 import { useServerInsertedHTML } from 'next/navigation'
+import type { TrackerAction } from '~/constants/tracker'
 
-import { apiClient } from '~/lib/request'
+declare global {
+  interface Window {
+    umami?: {
+      track: (event: string, data?: any) => void
+    }
+  }
+}
 
 export const Analyze = () => {
   const onceRef = useRef(false)
@@ -13,33 +20,39 @@ export const Analyze = () => {
     }
 
     onceRef.current = true
-    const apiBase = apiClient.proxy.fn.utils.analyze.toString(true)
+    // const apiBase = apiClient.proxy.fn.utils.analyze.toString(true)
 
     return (
       <script
         dangerouslySetInnerHTML={{
           __html:
-            `var apiBase = "${apiBase}";
-        ${function run() {
-          document.addEventListener('click', async (e) => {
-            const $ = e.target as HTMLElement
-            const event = $.dataset.event
-
-            if (event) {
-              await fetch(apiBase, {
-                method: 'POST',
-                headers: {
-                  'Content-Type': 'application/json',
+            `${function run() {
+              document.addEventListener(
+                'click',
+                async (e) => {
+                  const $ = e.target as HTMLElement
+                  const event = $.dataset.event
+
+                  if (event) {
+                    window.umami?.track(event, {
+                      type: 'click',
+                    })
+                  }
                 },
-                body: JSON.stringify({
-                  key: 'mx',
-                  event,
-                  type: 'inc',
-                }),
+                true,
+              )
+
+              document.addEventListener('impression', async (e: any) => {
+                const detail = e.detail as {
+                  action: TrackerAction
+                  label: string
+                }
+
+                window.umami?.track(detail.label, {
+                  type: 'impression',
+                })
               })
-            }
-          })
-        }.toString()}\n` + `run();`,
+            }.toString()}\n` + `run();`,
         }}
       />
     )

src/app/config.d.ts

@@ -1,8 +1,19 @@
+import type { ScriptProps } from 'next/script'
+
 export interface AppConfig {
   site: Site
   hero: Hero
   module: Module
+
+  custom: Custom
 }
+export interface Custom {
+  css: string[]
+  styles: any[]
+  js: string[]
+  scripts: ScriptProps[]
+}
+
 export interface Site {
   favicon: string
 }

src/components/common/ImpressionTracker.tsx

@@ -0,0 +1,57 @@
+import { memo, useState } from 'react'
+import { useInView } from 'react-intersection-observer'
+
+import { useIsLogged } from '~/atoms'
+import { TrackerAction } from '~/constants/tracker'
+
+type ImpressionProps = {
+  trackerMessage?: string
+  action?: TrackerAction
+  onTrack?: () => any
+}
+export const ImpressionView: Component<
+  { shouldTrack?: boolean } & ImpressionProps
+> = (props) => {
+  const { shouldTrack = true, ...rest } = props
+  if (!shouldTrack) {
+    return <>{props.children}</>
+  }
+  return <ImpressionViewImpl {...rest} />
+}
+
+const ImpressionViewImpl: Component<ImpressionProps> = memo((props) => {
+  const [impression, setImpression] = useState(false)
+  const isLogged = useIsLogged()
+  const { ref } = useInView({
+    initialInView: false,
+    triggerOnce: true,
+    onChange(inView) {
+      if (inView) {
+        setImpression(true)
+
+        if (isLogged) {
+          return
+        }
+        document.dispatchEvent(
+          new CustomEvent('impression', {
+            detail: {
+              action: props.action ?? TrackerAction.Impression,
+              label: props.trackerMessage,
+            },
+          }),
+        )
+
+        props.onTrack?.()
+      }
+    },
+  })
+
+  return (
+    <>
+      {props.children}
+      {!impression && <span ref={ref} />}
+    </>
+  )
+})
+
+ImpressionViewImpl.displayName = 'ImpressionView'

src/components/layout/header/internal/Activity.tsx

@@ -11,8 +11,10 @@ import {
   setActivityProcessName,
   useActivity,
 } from '~/atoms/activity'
+import { ImpressionView } from '~/components/common/ImpressionTracker'
 import { FloatPopover } from '~/components/ui/float-popover'
 import { softBouncePrest } from '~/constants/spring'
+import { TrackerAction } from '~/constants/tracker'
 import useDebounceValue from '~/hooks/common/use-debounce-value'
 import { usePageIsActive } from '~/hooks/common/use-is-active'
 import { apiClient } from '~/lib/request'
@@ -163,10 +165,15 @@ export const Activity = memo(() => {
                 type="tooltip"
                 strategy="fixed"
               >
-                {ownerName} 正在使用 {processName}
-                {appDescrption[processName]
-                  ? ` ${appDescrption[processName]}`
-                  : ''}
+                <ImpressionView
+                  action={TrackerAction.Impression}
+                  trackerMessage="Activity"
+                >
+                  {ownerName} 正在使用 {processName}
+                  {appDescrption[processName]
+                    ? ` ${appDescrption[processName]}`
+                    : ''}
+                </ImpressionView>
               </FloatPopover>
             </m.div>
           )}

src/components/widgets/peek/PeekLink.tsx

@@ -27,7 +27,7 @@ export const PeekLink: FC<
   )
 
   return (
-    <Link href={href} onClick={handlePeek} data-event="peek" {...rest}>
+    <Link href={href} onClick={handlePeek} {...rest}>
       {children}
     </Link>
   )

src/components/widgets/peek/PeekModal.tsx

@@ -2,7 +2,9 @@ import { m } from 'framer-motion'
 import Link from 'next/link'
 import type { PropsWithChildren } from 'react'
 
+import { ImpressionView } from '~/components/common/ImpressionTracker'
 import { microReboundPreset } from '~/constants/spring'
+import { TrackerAction } from '~/constants/tracker'
 import { useModalStack } from '~/providers/root/modal-stack-provider'
 
 export const PeekModal = (
@@ -14,6 +16,10 @@ export const PeekModal = (
 
   return (
     <div>
+      <ImpressionView
+        action={TrackerAction.Impression}
+        trackerMessage="Peek Modal"
+      />
       <m.div
         initial={{ opacity: 0.5, y: 50 }}
         animate={{ opacity: 1, y: 0 }}

src/components/widgets/shared/AsideDonateButton.tsx

@@ -3,8 +3,10 @@ import { AnimatePresence, m } from 'framer-motion'
 import { atom, useAtomValue, useSetAtom } from 'jotai'
 import type { HTMLMotionProps } from 'framer-motion'
 
+import { ImpressionView } from '~/components/common/ImpressionTracker'
 import { MotionButtonBase } from '~/components/ui/button'
 import { DialogOverlay } from '~/components/ui/dlalog/DialogOverlay'
+import { TrackerAction } from '~/constants/tracker'
 import { useIsClient } from '~/hooks/common/use-is-client'
 import { clsxm } from '~/lib/helper'
 import { useAppConfigSelector } from '~/providers/root/aggregation-data-provider'
@@ -80,19 +82,24 @@ const DonateButtonTop = () => {
   const setOverlayShow = useSetAtom(overlayShowAtom)
   const buttonPos = useAtomValue(positionAtom)
   return (
-    <DonateButtonInternal
-      className="focus-visible:text-uk-brown-light focus-visible:!shadow-none"
-      style={{
-        position: 'fixed',
-        left: buttonPos.x,
-        top: buttonPos.y,
-        zIndex: 999,
-        margin: 0,
-      }}
-      onMouseLeave={() => {
-        setOverlayShow(false)
-      }}
-    />
+    <ImpressionView
+      trackerMessage="Donate Show"
+      action={TrackerAction.Impression}
+    >
+      <DonateButtonInternal
+        className="focus-visible:text-uk-brown-light focus-visible:!shadow-none"
+        style={{
+          position: 'fixed',
+          left: buttonPos.x,
+          top: buttonPos.y,
+          zIndex: 999,
+          margin: 0,
+        }}
+        onMouseLeave={() => {
+          setOverlayShow(false)
+        }}
+      />
+    </ImpressionView>
   )
 }
 

src/components/widgets/shared/AutoResizeHeight.tsx

@@ -38,6 +38,7 @@ export const AutoResizeHeight: React.FC<AnimateChangeInHeightProps> = ({
     <m.div
       className={clsxm('overflow-hidden', className)}
       style={{ height }}
+      initial={false}
       animate={{ height }}
       transition={{ duration }}
     >

src/providers/root/index.tsx

@@ -15,6 +15,7 @@ import { EventProvider } from './event-provider'
 import { JotaiStoreProvider } from './jotai-provider'
 import { ModalStackProvider } from './modal-stack-provider'
 import { PageScrollInfoProvider } from './page-scroll-info-provider'
+import { ScriptInjectProvider } from './script-inject-provider'
 import { SentryProvider } from './sentry-provider'
 import { SocketContainer } from './socket-provider'
 
@@ -41,6 +42,7 @@ export function Providers({ children }: PropsWithChildren) {
         <PageScrollInfoProvider key="PageScrollInfoProvider" />
         <DebugProvider key="debugProvider" />
         <AccentColorProvider />
+        <ScriptInjectProvider />
       </ProviderComposer>
     </>
   )

src/providers/root/script-inject-provider.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import Script from 'next/script'
+
+import { useAppConfigSelector } from './aggregation-data-provider'
+
+export const ScriptInjectProvider = () => {
+  const scripts = useAppConfigSelector((config) => config.custom.scripts)
+  if (!scripts) return null
+  return (
+    <>
+      {scripts.map((props) => (
+        <Script key={props.src} {...props} />
+      ))}
+    </>
+  )
+}