chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migrate analytics

Browse Source
This commit is contained in:
Haoyu Xu
2024-12-20 00:16:43 +08:00
parent 41bab8d693
commit 8b1e3d465d
12 changed files with 50 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
directory/index.html
View File

@@ -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;

4
directory/src/routes/Error.jsx
View File

@@ -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 {

4
directory/src/routes/path/Home.jsx
View File

@@ -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,

4
directory/src/routes/path/Operator.jsx
View File

@@ -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()

17
directory/src/state/insight.js Normal file
View File

@@ -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])
}

51
directory/src/state/insights.js
View File

@@ -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
}

1
package.json
View File

@@ -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",

12
pnpm-lock.yaml generated
View File

@@ -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':

7
showcase/index.html
View File

@@ -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"
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>
</head>
<body style="background-image: url('./assets/background/operator_bg.png');">
<div id="app"></div>

50
showcase/src/components/settings.js
View File

@@ -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,51 +70,41 @@ 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
this.#isInsightsInited = true
if (this.#isInsightInited || import.meta.env.MODE === 'development') return
console.log(2)
this.#isInsightInited = true
this.#doNotTrack = doNotTrack
if (this.#doNotTrack) return
console.log(3)
try {
window.umami?.track(props => ({
...props,
url: `/${import.meta.env.VITE_LINK}${isWallpaperEngine ? "?steam" : ""}`
}));
window.counterscale = {
q: [["set", "siteId", `aklive2d-${import.meta.env.VITE_LINK}`], ["trackPageview"]],
};
console.log(4)
window.counterscaleOnDemandTrack();
console.log(5)
} catch(e) {
console.warn && console.warn(e.message)
}
}
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)
}
}
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() {

8
showcase/src/components/voice.js
View File

@@ -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() {

32
showcase/src/libs/wallpaper_engine.js
View File

@@ -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)
}
},
};