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
The simplest way to load Mixpanel globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptMixpanelAnalytics composable.
export default defineNuxtConfig({
scripts: {
registry: {
mixpanelAnalytics: {
token: 'YOUR_TOKEN'
}
}
}
})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.
Example
Using Mixpanel only in production while using the proxy to send events.
<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.
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>