Mixpanel
Mixpanel analyzes product events through funnels and retention reports.
useScriptMixpanelAnalytics() initializes the SDK and exposes the mixpanel API.
Nuxt Config Setup
Add this to your nuxt.config.ts to load Mixpanel globally. Alternatively you can use the useScriptMixpanelAnalytics composable for more control.
export default defineNuxtConfig({
scripts: {
registry: {
mixpanelAnalytics: {
token: 'YOUR_TOKEN',
trigger: 'onNuxtReady',
}
}
}
})This config automatically enables first-party mode (bundle). See below to customise.
useScriptMixpanelAnalytics()
The useScriptMixpanelAnalytics composable lets you have fine-grain control over when and how Mixpanel is loaded on your site.
const { proxy } = useScriptMixpanelAnalytics()
proxy.mixpanel.track('conversion', { value: 1 })Please follow the Registry Scripts guide to learn more about advanced usage.
First-Party Mode: Privacy Focused Proxy
No extra config needed. The script is bundled and served from your domain instead of a third-party CDN, eliminating an extra DNS lookup and improving load times. Learn more.
export default defineNuxtConfig({
scripts: {
// ✅ First-party mode: bundled
registry: {
mixpanelAnalytics: {
token: 'YOUR_TOKEN',
trigger: 'onNuxtReady',
},
},
},
})Example
Using Mixpanel in a component.
<script setup lang="ts">
const { proxy } = useScriptMixpanelAnalytics()
// noop in development, ssr
// just works in production, client
function handleAction() {
proxy.mixpanel.track('conversion', { value: 1 })
}
</script>
<template>
<div>
<button @click="handleAction">
Send Event
</button>
</div>
</template>tokenstring required Your Mixpanel project token.
defaultConsent'opt-in' | 'opt-out'Default tracking-consent state for Mixpanel. - `'opt-out'`: passed as `opt_out_tracking_by_default: true` to `mixpanel.init`, so tracking is suppressed from the first call. - `'opt-in'`: queued via `mixpanel.push(['opt_in_tracking'])` so the real SDK runs it immediately after load.
Examples
Tracking Events
<script setup lang="ts">
const { proxy } = useScriptMixpanelAnalytics()
function trackSignup() {
proxy.mixpanel.track('Sign Up', {
plan: 'premium',
source: 'landing_page',
})
}
</script>
Identifying Users
<script setup lang="ts">
const { proxy } = useScriptMixpanelAnalytics()
function login(userId: string) {
proxy.mixpanel.identify(userId)
proxy.mixpanel.people.set({
$name: 'Jane Doe',
$email: '[email protected]',
plan: 'premium',
})
}
</script>
Registering Super Properties
Mixpanel adds registered super properties to subsequent events:
<script setup lang="ts">
const { proxy } = useScriptMixpanelAnalytics()
proxy.mixpanel.register({
app_version: '2.0.0',
platform: 'web',
})
</script>
Resetting identity on logout
Call reset() when an identified user signs out or their session expires. Mixpanel recommends resetting at logout so two people sharing a device are not merged into the same identity:
const { proxy } = useScriptMixpanelAnalytics()
function logout() {
// End your app session first.
proxy.mixpanel.reset()
}
Consent Mode
Mixpanel exposes opt_in_tracking / opt_out_tracking. Set the boot-time default with defaultConsent and call consent.optIn() / consent.optOut() at runtime.
defaultConsent
| Value | Behavior |
|---|---|
'opt-in' | Starts opted in. |
'opt-out' | Calls mixpanel.init(..., { opt_out_tracking_by_default: true }) so the SDK boots opted out. |
defaultConsent: 'opt-out' applies before the first event. Calling consent.optOut() later cannot retract events already captured by the SDK.
Example
<script setup lang="ts">
const { consent } = useScriptMixpanelAnalytics({
token: 'YOUR_TOKEN',
defaultConsent: 'opt-out',
})
function onAccept() {
consent.optIn()
}
function onRevoke() {
consent.optOut()
}
</script>