Mixpanel
Mixpanel is a product analytics platform that helps you understand how users interact with your application through event tracking, funnels, and retention analysis.
Nuxt Scripts provides a registry script composable useScriptMixpanelAnalytics() to easily integrate Mixpanel in your Nuxt app.
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 sends super properties with every subsequent event:
<script setup lang="ts">
const { proxy } = useScriptMixpanelAnalytics()
proxy.mixpanel.register({
app_version: '2.0.0',
platform: 'web',
})
</script>
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 | Behaviour |
|---|---|
'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' when you need the SDK to boot opted out. The runtime consent.optOut() calls opt_out_tracking()after init, which is weaker than the boot-time flag; any events captured between init and the opt-out call are still sent.Example
<script setup lang="ts">
const { consent } = useScriptMixpanelAnalytics({
token: 'YOUR_TOKEN',
defaultConsent: 'opt-out',
})
function onAccept() {
consent.optIn()
}
function onRevoke() {
consent.optOut()
}
</script>