feat: migrate analytics

directory/index.html

@@ -5,8 +5,11 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>aklive2d directory</title>
-  <script async defer data-website-id="05ee2d3d-66e0-429b-89ba-db112743a8c2"
-    src="https://insights.halyul.dev/insights.js" data-do-not-track="true" data-auto-track="false"></script>
+  <script
+    id="counterscale-script"
+    src="https://insight.halyul.dev/on-demand.js"
+    defer
+  ></script>
   <style>
     .loader {
       position: fixed;

directory/src/routes/Error.jsx

@@ -20,7 +20,7 @@ import { useHeader } from '@/state/header';
 import VoiceElement from '@/component/voice';
 import spine from '!/libs/spine-player'
 import '!/libs/spine-player.css'
-import useUmami from '@/state/insights';
+import useInsight from '@/state/insight';
 
 const voiceOnAtom = atomWithStorage('voiceOn', false)
 const config = JSON.parse(import.meta.env.VITE_ERROR_FILES)
@@ -31,7 +31,7 @@ let lastVoiceState = 'ended'
 
 export default function Error() {
   // eslint-disable-next-line no-unused-vars
-  const _trackEvt = useUmami('/error', "Error")
+  const _trackEvt = useInsight()
   const error = useRouteError();
   const navigate = useNavigate();
   const {

directory/src/routes/path/Home.jsx

@@ -22,7 +22,7 @@ import { useAtom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils';
 import CharIcon from '@/component/char_icon';
 import Border from '@/component/border';
-import useUmami from '@/state/insights';
+import useInsight from '@/state/insight';
 import Switch from '@/component/switch';
 import SearchBox from '@/component/search_box';
 
@@ -31,7 +31,7 @@ let lastVoiceState = 'ended'
 
 export default function Home() {
   // eslint-disable-next-line no-unused-vars
-  const _trackEvt = useUmami('/', "Dynamic Compile")
+  const _trackEvt = useInsight()
   const {
     setTitle,
     setTabs,

directory/src/routes/path/Operator.jsx

@@ -18,7 +18,7 @@ import {
 import { useHeader } from '@/state/header';
 import { useAppbar } from '@/state/appbar';
 import VoiceElement from '@/component/voice';
-import useUmami from '@/state/insights'
+import useInsight from '@/state/insight'
 import spine from '!/libs/spine-player'
 import '!/libs/spine-player.css'
 import Border from '@/component/border';
@@ -74,7 +74,7 @@ export default function Operator() {
   const [config, setConfig] = useState(null)
   const [spineData, setSpineData] = useState(null)
   // eslint-disable-next-line no-unused-vars
-  const _trackEvt = useUmami(`/${key}`, `${key}`)
+  const _trackEvt = useInsight(key)
   const spineRef = useRef(null)
   const [spineAnimationName, setSpineAnimationName] = useState(defaultSpineAnimationName)
   const { i18n } = useI18n()

directory/src/state/insight.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default (key = null, websiteId = "directory", skipPageView = false) => {
+  React.useEffect(() => {
+    if (!skipPageView && import.meta.env.MODE !== 'development') {
+      try {
+        window.counterscale = {
+          q: [["set", "siteId", `aklive2d-${websiteId}`], ["trackPageview"]],
+        };
+        window.counterscaleOnDemandTrack()
+      } catch (err) {
+        console.warn && console.warn(err.message)
+      }
+    }
+  }, [websiteId, skipPageView, key])
+
+}

directory/src/state/insights.js

@@ -1,51 +0,0 @@
-import React from 'react';
-
-export const registerUmamiScript = (url, websiteId, dataDomain) => {
-  if (url && websiteId && dataDomain) {
-    const head = document.getElementsByTagName('head')[0]
-    const script = document.createElement('script')
-    script.type = 'text/javascript';
-    script.src = url;
-    script.async = 'async'
-    script.defer = 'defer'
-    script.setAttribute('data-auto-track', 'false')
-    script.setAttribute('data-domains', dataDomain)
-    script.setAttribute('data-website-id', websiteId)
-    head.appendChild(script);
-  }
-}
-
-export default (url, title, referrer, websiteId, skipPageView) => {
-  skipPageView = skipPageView || false
-  React.useEffect(() => {
-    if (!skipPageView && window.umami && import.meta.env.MODE !== 'development') {
-      try {
-        const umami = window.umami
-        const dict = {}
-        if (title) {
-          dict.title = title
-        }
-        if (referrer) {
-          dict.referrer = referrer
-        }
-        if (websiteId) {
-          dict.websiteId = websiteId
-        }
-        umami.track(props => ({ ...props, url: url, ...dict }))
-      } catch (err) {
-        console.warn && console.warn(err.message)
-      }
-    }
-  }, [url, title, referrer, websiteId, skipPageView])
-
-  const trackEvent = (eventValue) => {
-    try {
-      const umami = window.umami
-      umami.track(eventValue)
-    } catch (err) {
-      console.warn && console.warn(err.message)
-    }
-  }
-
-  return trackEvent
-}