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"
+  <script
-    src="https://insights.halyul.dev/insights.js" data-do-not-track="true" data-auto-track="false"></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
-}

package.json

@@ -36,7 +36,6 @@
     "wrangler": "^3.96.0"
   },
   "dependencies": {
-    "@parcellab/react-use-umami": "^2.0.1",
     "dotenv": "^16.4.7",
     "jotai": "^2.10.4",
     "jsdom": "^22.1.0",

pnpm-lock.yaml

@@ -8,9 +8,6 @@ importers:
 
   .:
     dependencies:
-      '@parcellab/react-use-umami':
-        specifier: ^2.0.1
-        version: 2.0.1(react@18.3.1)
       dotenv:
         specifier: ^16.4.7
         version: 16.4.7
@@ -593,11 +590,6 @@ packages:
     resolution: {integrity: sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==}
     engines: {node: '>= 10.0.0'}
 
-  '@parcellab/react-use-umami@2.0.1':
-    resolution: {integrity: sha512-C/EdfRm7OyFVmMhrrSITZ79VXLreNZEJnAdpmJ9NaTcy+Wijjf0+wHF8JA5ex+J5/Owv7gVBIj6i/+Kv04nlKA==}
-    peerDependencies:
-      react: '>=16.8.0'
-
   '@remix-run/router@1.21.0':
     resolution: {integrity: sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==}
     engines: {node: '>=14.0.0'}
@@ -2873,10 +2865,6 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.0
     optional: true
 
-  '@parcellab/react-use-umami@2.0.1(react@18.3.1)':
-    dependencies:
-      react: 18.3.1
-
   '@remix-run/router@1.21.0': {}
 
   '@rollup/rollup-android-arm-eabi@4.28.1':

showcase/index.html

@@ -6,8 +6,11 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="renderer" content="webkit">
   <title>aklive2d</title>
-  <script async defer data-website-id="05ee2d3d-66e0-429b-89ba-db112743a8c2"
+  <script
-    src="https://insights.halyul.dev/insights.js" data-do-not-track="true" data-auto-track="false"></script>
+    id="counterscale-script"
+    src="https://insight.halyul.dev/on-demand.js"
+    defer
+  ></script>
 </head>
 <body style="background-image: url('./assets/background/operator_bg.png');">
   <div id="app"></div>

showcase/src/components/settings.js

@@ -39,9 +39,8 @@ export default class Settings {
   #scale = this.#defaultScale
   #logoX = this.#defaultLogoX
   #logoY = this.#defaultLogoY
-  #isInsightsInited = false
+  #isInsightInited = false
   #doNotTrack = false
-  #lastFunctionInsights = null
   #useStartAnimation = true
 
   constructor(el, logoEl) {
@@ -71,37 +70,29 @@ export default class Settings {
 
   success() {
     this.loadViewport()
-    this.insights(false, false)
+    this.insight(false, false)
     this.#updateOptions("animation_selection", this.spinePlayer.skeleton.data.animations.map(e => e.name))
     if ((new URLSearchParams(window.location.search)).has("settings") || import.meta.env.MODE === 'development') {
       this.open()
     }
   }
 
-  insights(isWallpaperEngine, doNotTrack) {
+  insight(isWallpaperEngine, doNotTrack) {
+    console.log(1)
     this.isWallpaperEngine = isWallpaperEngine
-    if (this.#isInsightsInited || import.meta.env.MODE === 'development') return
+    if (this.#isInsightInited || import.meta.env.MODE === 'development') return
-    this.#isInsightsInited = true
+    console.log(2)
+    this.#isInsightInited = true
     this.#doNotTrack = doNotTrack
     if (this.#doNotTrack) return
+    console.log(3)
     try {
-      window.umami?.track(props => ({
+      window.counterscale = {
-        ...props,
+        q: [["set", "siteId", `aklive2d-${import.meta.env.VITE_LINK}`], ["trackPageview"]],
-        url: `/${import.meta.env.VITE_LINK}${isWallpaperEngine ? "?steam" : ""}`
+      };
-      }));
+      console.log(4)
-    } catch(e) {
+      window.counterscaleOnDemandTrack();
-      console.warn && console.warn(e.message)
+      console.log(5)
-    }
-  }
-
-  functionInsights(functionName, toSkip = false) {
-    if (!this.#isInsightsInited || this.#doNotTrack || import.meta.env.MODE === 'development' || functionName === this.#lastFunctionInsights || toSkip) return
-    try {
-      window.umami?.track(props => ({
-        ...props,
-        name: `${functionName}`,
-        url: `/${import.meta.env.VITE_LINK}${this.isWallpaperEngine ? "?steam" : ""}`
-      }));
     } catch(e) {
       console.warn && console.warn(e.message)
     }
@@ -110,12 +101,10 @@ export default class Settings {
   setFPS(value) {
     this.#fps = value
     this.spinePlayer.setFps(value)
-    this.functionInsights("setFPS", this.isWallpaperEngine)
   }
 
   setLogoDisplay(flag) {
     this.#logoEl.hidden = flag;
-    this.functionInsights("setLogoDisplay", this.isWallpaperEngine)
   }
 
   #resize(_this, value) {
@@ -136,7 +125,6 @@ export default class Settings {
     this.#logoEl.src = src
     this.#resize()
     this.#setLogoInvertFilter(invert_filter)
-    this.functionInsights("setLogo", this.isWallpaperEngine)
   }
 
   #readFile(e, callback = () => { }) {
@@ -163,18 +151,15 @@ export default class Settings {
   setLogoRatio(value) {
     this.#ratio = value
     this.#resize(this, value)
-    this.functionInsights("setLogoRatio", this.isWallpaperEngine)
   }
 
   setLogoOpacity(value) {
     this.#logoEl.style.opacity = value / 100
     this.#opacity = value
-    this.functionInsights("setLogoOpacity", this.isWallpaperEngine)
   }
 
-  setBackgoundImage(v, skipInsights = false) {
+  setBackgoundImage(v) {
     document.body.style.backgroundImage = v
-    if (!skipInsights) this.functionInsights("setBackgoundImage", this.isWallpaperEngine);
   }
 
   get currentBackground() {
@@ -187,9 +172,8 @@ export default class Settings {
   setDefaultBackground(e) {
     this.#defaultBackgroundImage = `url("${import.meta.env.BASE_URL}assets/${import.meta.env.VITE_BACKGROUND_FOLDER}/${e}")`
     if (document.getElementById("custom_background_clear").disabled && !document.body.style.backgroundImage.startsWith("url(\"file:")) {
-      this.setBackgoundImage(this.#defaultBackgroundImage, true)
+      this.setBackgoundImage(this.#defaultBackgroundImage)
     }
-    this.functionInsights("setDefaultBackground", this.isWallpaperEngine)
   }
 
   setBackground(e) {
@@ -247,7 +231,6 @@ export default class Settings {
         break;
     }
     this.loadViewport()
-    this.functionInsights("positionPadding", this.isWallpaperEngine)
   }
 
   positionReset() {
@@ -297,7 +280,6 @@ export default class Settings {
         break;
     }
     this.elementPosition(this.#logoEl, this.#logoX, this.#logoY)
-    this.functionInsights("logoPadding", this.isWallpaperEngine)
   }
 
   logoReset() {

showcase/src/components/voice.js

@@ -67,7 +67,6 @@ export default class Voice {
   set useSubtitle(show) {
     this.#useSubtitle = show
     this.#el.hidden = !show
-    window.settings.functionInsights("useSubtitle", window.settings.isWallpaperEngine)
   }
 
   get useSubtitle() {
@@ -78,7 +77,6 @@ export default class Voice {
    * @param {boolean} show
    */
   set useVoice(show) {
-    window.settings.functionInsights("useVoice", window.settings.isWallpaperEngine)
     this.#useVoice = show
     this.#playEntryVoice()
     if (!show && this.#isPlaying) {
@@ -96,7 +94,6 @@ export default class Voice {
   set useVoiceActor(show) {
     this.#useVoiceActor = show
     document.getElementById('voice_actor_box').hidden = !show
-    window.settings.functionInsights("useVoiceActor", window.settings.isWallpaperEngine)
   }
 
   get useVoiceActor() {
@@ -112,7 +109,6 @@ export default class Voice {
     } else {
       this.#subtitleLang = this.#defaultRegion
     }
-    window.settings.functionInsights("subtitleLanguage", window.settings.isWallpaperEngine)
   }
 
   get subtitleLanguage() {
@@ -149,7 +145,6 @@ export default class Voice {
 
   #updateSubtitlePosition() {
     window.settings.elementPosition(this.#el, this.#subtitleX, this.#subtitleY)
-    window.settings.functionInsights("subtitlePosition", window.settings.isWallpaperEngine)
   }
 
   /**
@@ -161,7 +156,6 @@ export default class Voice {
     } else {
       this.#voiceLang = this.#defaultVoiceLang
     }
-    window.settings.functionInsights("language", window.settings.isWallpaperEngine)
     const availableSubtitleLang = this.#getSubtitleLanguages()
     if (!availableSubtitleLang.includes(this.#subtitleLang)) {
       this.#subtitleLang = availableSubtitleLang[0]
@@ -185,7 +179,6 @@ export default class Voice {
       this.#idleDuration = duration * 60 * 1000
       this.#initIdleVoiceTimer()
     }
-    window.settings.functionInsights("idleDuration", window.settings.isWallpaperEngine)
   }
 
   get idleDuration() {
@@ -201,7 +194,6 @@ export default class Voice {
       this.#nextDuration = duration * 60 * 1000
       this.#initNextVoiceTimer()
     }
-    window.settings.functionInsights("nextDuration", window.settings.isWallpaperEngine)
   }
 
   get nextDuration() {

showcase/src/libs/wallpaper_engine.js

@@ -2,111 +2,89 @@ window.wallpaperPropertyListener = {
     applyGeneralProperties: function (properties) {
         if (properties.fps) {
             window.settings.setFPS(properties.fps)
-            window.settings.functionInsights("setFPS", Object.keys(properties) !== 1)
         }
     },
     applyUserProperties: function (properties) {
         if (properties.privacydonottrack) {
-            window.settings.insights(true, !properties.privacydonottrack.value)
+            window.settings.insight(true, !properties.privacydonottrack.value)
         }
         if (properties.logo) {
             window.settings.setLogoDisplay(!properties.logo.value)
-            window.settings.functionInsights("setLogoDisplay", Object.keys(properties) !== 1)
         }
         if (properties.logoratio) {
             if (properties.logoratio.value) {
                 window.settings.setLogoRatio(properties.logoratio.value)
-                window.settings.functionInsights("setLogoRatio", Object.keys(properties) !== 1)
             }
         }
         if (properties.logoopacity) {
             if (properties.logoopacity.value) {
                 window.settings.setLogoOpacity(properties.logoopacity.value)
-                window.settings.functionInsights("setLogoOpacity", Object.keys(properties) !== 1)
             }
         }
         if (properties.logoimage) {
             if (properties.logoimage.value) {
                 window.settings.setLogo('file:///' + properties.logoimage.value)
-                window.settings.functionInsights("setLogo", Object.keys(properties) !== 1)
             } else {
                 window.settings.resetLogoImage()
             }
         }
         if (properties.logox) {
             window.settings.logoPadding("x", properties.logox.value)
-            window.settings.functionInsights("logoPaddingX", Object.keys(properties) !== 1)
         }
         if (properties.logoy) {
             window.settings.logoPadding("y", properties.logoy.value)
-            window.settings.functionInsights("logoPaddingY", Object.keys(properties) !== 1)
         }
         if (properties.defaultbackground) {
             if (properties.defaultbackground.value) {
                 window.settings.setDefaultBackground(properties.defaultbackground.value)
-                window.settings.functionInsights("setDefaultBackground", Object.keys(properties) !== 1)
             }
         }
         if (properties.background) {
             if (properties.background.value) {
                 window.settings.setBackgoundImage(`url('file:///${properties.background.value}')`)
-                window.settings.functionInsights("setBackgoundImage", Object.keys(properties) !== 1)
             } else {
                 window.settings.resetBackground()
             }
         }
         if (properties.voicetitle) {
             window.voice.useVoice = properties.voicetitle.value
-            window.settings.functionInsights("useVoice", Object.keys(properties) !== 1)
         }
         if (properties.voicelanguage) {
             window.voice.language = properties.voicelanguage.value
-            window.settings.functionInsights("language", Object.keys(properties) !== 1)
         }
         if (properties.voiceidle) {
             window.voice.idleDuration = parseInt(properties.voiceidle.value)
-            window.settings.functionInsights("idleDuration", Object.keys(properties) !== 1)
         }
         if (properties.voicenext) {
             window.voice.nextDuration = parseInt(properties.voicenext.value)
-            window.settings.functionInsights("nextDuration", Object.keys(properties) !== 1)
         }
         if (properties.voicesubtitle) {
             window.voice.useSubtitle = properties.voicesubtitle.value
-            window.settings.functionInsights("useSubtitle", Object.keys(properties) !== 1)
         }
         if (properties.voicesubtitlelanguage) {
             window.voice.subtitleLanguage = properties.voicesubtitlelanguage.value
-            window.settings.functionInsights("subtitleLanguage", Object.keys(properties) !== 1)
         }
         if (properties.voicesubtitlex) {
             window.voice.subtitleX = properties.voicesubtitlex.value
-            window.settings.functionInsights("subtitleX", Object.keys(properties) !== 1)
         }
         if (properties.voicesubtitley) {
             window.voice.subtitleY = properties.voicesubtitley.value
-            window.settings.functionInsights("subtitleY", Object.keys(properties) !== 1)
         }
         if (properties.voiceactor) {
             window.voice.useVoiceActor = properties.voiceactor.value
-            window.settings.functionInsights("useVoiceActor", Object.keys(properties) !== 1)
         }
         if (properties.music_selection) {
             window.music.changeMusic(properties.music_selection.value)
-            window.settings.functionInsights("music_selection", Object.keys(properties) !== 1)
         }
         if (properties.music_title) {
             window.music.useMusic = properties.music_title.value
-            window.settings.functionInsights("useMusic", Object.keys(properties) !== 1)
         }
         if (properties.music_volume) {
             window.music.volume = properties.music_volume.value
-            window.settings.functionInsights("music_volume", Object.keys(properties) !== 1)
         }
         if (properties.custom_music) {
             if (properties.custom_music.value) {
                 window.settings.setMusicFromWE(`file:///${properties.custom_music.value}`)
-                window.settings.functionInsights("setMusic", Object.keys(properties) !== 1)
             } else {
                 window.settings.resetMusic()
             }
@@ -114,18 +92,15 @@ window.wallpaperPropertyListener = {
         if (properties.custom_video) {
             if (properties.custom_video.value) {
                 window.settings.setVideoFromWE(`file:///${properties.custom_video.value}`)
-                window.settings.functionInsights("setVideo", Object.keys(properties) !== 1)
             } else {
                 window.settings.resetVideo()
             }
         }
         if (properties.video_volume) {
             window.settings.setVideoVolume(properties.video_volume.value)
-            window.settings.functionInsights("video_volume", Object.keys(properties) !== 1)
         }
         if (properties.scale) {
             window.settings.setScale(properties.scale.value)
-            window.settings.functionInsights("setScale", Object.keys(properties) !== 1)
         }
         if (properties.position) {
             if (!properties.position.value) {
@@ -141,23 +116,18 @@ window.wallpaperPropertyListener = {
         }
         if (properties.paddingleft) {
             window.settings.positionPadding("left", properties.paddingleft.value)
-            window.settings.functionInsights("positionPaddingLeft", Object.keys(properties) !== 1)
         }
         if (properties.paddingright) {
             window.settings.positionPadding("right", properties.paddingright.value)
-            window.settings.functionInsights("positionPaddingRight", Object.keys(properties) !== 1)
         }
         if (properties.paddingtop) {
             window.settings.positionPadding("top", properties.paddingtop.value)
-            window.settings.functionInsights("positionPaddingTop", Object.keys(properties) !== 1)
         }
         if (properties.paddingbottom) {
             window.settings.positionPadding("bottom", properties.paddingbottom.value)
-            window.settings.functionInsights("positionPaddingBottom", Object.keys(properties) !== 1)
         }
         if (properties.useStartAnimation) {
             window.settings.useStartAnimation = properties.useStartAnimation.value
-            window.settings.functionInsights("useStartAnimation", Object.keys(properties) !== 1)
         }
     },
 };