Kristaps Fabians Geikins
83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
import type { OverridedMixpanel } from 'mixpanel-browser'
|
|
import { useActiveUser, useWaitForActiveUser } from '~~/lib/auth/composables/activeUser'
|
|
import md5 from '~~/lib/common/helpers/md5'
|
|
import { useTheme } from '~~/lib/core/composables/theme'
|
|
|
|
const HOST_APP = 'web-2'
|
|
const HOST_APP_DISPLAY_NAME = 'Web 2.0 App'
|
|
|
|
/**
|
|
* Get mixpanel server identifier
|
|
*/
|
|
function getMixpanelServerId(): string {
|
|
return md5(window.location.hostname.toLowerCase()).toUpperCase()
|
|
}
|
|
|
|
/**
|
|
* Get Mixpanel instance
|
|
* Note: Mixpanel is not available during SSR because mixpanel-browser only works in the browser!
|
|
* If this composable is invoked during SSR it will return undefined!
|
|
*/
|
|
export function useMixpanel(): OverridedMixpanel {
|
|
// we're making TS lie here cause we don't want to constantly check if the return of this
|
|
// is undefined
|
|
if (process.server) return undefined as unknown as OverridedMixpanel
|
|
|
|
const nuxt = useNuxtApp()
|
|
const $mixpanel = nuxt.$mixpanel as () => OverridedMixpanel
|
|
|
|
return $mixpanel()
|
|
}
|
|
|
|
/**
|
|
* Composable that builds the user (re-)identification function. Needs to be invoked on app
|
|
* init and when the active user changes (e.g. after signing out/in)
|
|
* Note: The returned function will only work on the client-side
|
|
*/
|
|
export function useMixpanelUserIdentification() {
|
|
if (process.server) return { reidentify: () => void 0 }
|
|
|
|
const mp = useMixpanel()
|
|
const { distinctId } = useActiveUser()
|
|
const { isDarkTheme } = useTheme()
|
|
|
|
return {
|
|
reidentify: () => {
|
|
// Reset previous user data, if any
|
|
mp.reset()
|
|
|
|
// Register session
|
|
mp.register({
|
|
// eslint-disable-next-line camelcase
|
|
server_id: getMixpanelServerId(),
|
|
hostApp: HOST_APP
|
|
})
|
|
|
|
// Identify user, if any
|
|
if (distinctId.value) {
|
|
mp.identify(distinctId.value)
|
|
mp.people.set('Identified', true)
|
|
mp.people.set('Theme Web', isDarkTheme.value ? 'dark' : 'light')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Composable that builds the mixpanel initialization function
|
|
* Note: The returned function will only initialize mixpanel on the client-side
|
|
*/
|
|
export async function useMixpanelInitialization() {
|
|
if (process.server) return
|
|
|
|
const mp = useMixpanel()
|
|
const { reidentify } = useMixpanelUserIdentification()
|
|
|
|
await useWaitForActiveUser()
|
|
|
|
reidentify()
|
|
|
|
// Track app visit
|
|
mp.track(`Visit ${HOST_APP_DISPLAY_NAME}`)
|
|
}
|