---
title: "Mixpanel"
description: "在你的 Nuxt 应用中使用 Mixpanel。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/mixpanel-analytics"
last_updated: "2026-05-22T14:11:48.601Z"
---

[Mixpanel](https://mixpanel.com) 是一个产品分析平台，通过事件追踪、漏斗分析和留存分析来帮助你了解用户如何与应用交互。

Nuxt Scripts 提供了一个注册表脚本组合式函数 [`useScriptMixpanelAnalytics()`](/scripts/mixpanel-analytics)，用于在你的 Nuxt 应用中轻松集成 Mixpanel。

<script-stats>



</script-stats>

<script-docs>



</script-docs>

<script-types>



</script-types>

## 示例

### 追踪事件

```vue
<script setup lang="ts">
const { proxy } = useScriptMixpanelAnalytics()

function trackSignup() {
  proxy.mixpanel.track('Sign Up', {
    plan: 'premium',
    source: 'landing_page',
  })
}
</script>
```

### 识别用户

```vue
<script setup lang="ts">
const { proxy } = useScriptMixpanelAnalytics()

function login(userId: string) {
  proxy.mixpanel.identify(userId)
  proxy.mixpanel.people.set({
    $name: 'Jane Doe',
    $email: 'jane@example.com',
    plan: 'premium',
  })
}
</script>
```

### 注册超级属性

Mixpanel 会将超级属性随每个后续事件一起发送：

```vue
<script setup lang="ts">
const { proxy } = useScriptMixpanelAnalytics()

proxy.mixpanel.register({
  app_version: '2.0.0',
  platform: 'web',
})
</script>
```

## 同意模式

Mixpanel 提供了 [`opt_in_tracking` / `opt_out_tracking`](https://docs.mixpanel.com/docs/privacy/opt-out-of-tracking)。使用 `defaultConsent` 设置启动时默认状态，并在运行时调用 `consent.optIn()` / `consent.optOut()`。

### `defaultConsent`

<table>
<thead>
  <tr>
    <th>
      值
    </th>
    
    <th>
      行为
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        'opt-in'
      </code>
    </td>
    
    <td>
      以已同意状态启动。
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        'opt-out'
      </code>
    </td>
    
    <td>
      调用 <code className="language-ts shiki shiki-themes github-light github-light material-theme-palenight" language="ts" style="">
        <span class="sqjlB">
          mixpanel
        </span>
        
        <span class="sx-uw">
          .
        </span>
        
        <span class="s0YkB">
          init
        </span>
        
        <span class="sqjlB">
          (
        </span>
        
        <span class="sc1V3">
          ...
        </span>
        
        <span class="sx-uw">
          ,
        </span>
        
        <span class="sx-uw">
          {
        </span>
        
        <span class="sqVJQ">
          opt_out_tracking_by_default
        </span>
        
        <span class="sx-uw">
          :
        </span>
        
        <span class="sGFTI">
          true
        </span>
        
        <span class="sx-uw">
          }
        </span>
        
        <span class="sqjlB">
          )
        </span>
      </code>
      
      ，使 SDK 以未同意状态启动。
    </td>
  </tr>
</tbody>
</table>

<callout icon="i-heroicons-information-circle">

当你需要 SDK 以未同意状态启动时，请使用 `defaultConsent: 'opt-out'`。运行时的 `consent.optOut()` 会在初始化后调用 `opt_out_tracking()`，其效力弱于启动时标志；在初始化与退出同意调用之间捕获的任何事件仍会被发送。

</callout>

### 示例

```vue
<script setup lang="ts">
const { consent } = useScriptMixpanelAnalytics({
  token: 'YOUR_TOKEN',
  defaultConsent: 'opt-out',
})

function onAccept() {
  consent.optIn()
}
function onRevoke() {
  consent.optOut()
}
</script>
```