---
title: "Mixpanel"
description: "加载 Mixpanel 并跟踪产品事件、身份、用户画像和同意状态。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/mixpanel-analytics"
last_updated: "2026-08-11T09:33:00.944Z"
---

[Mixpanel](https://mixpanel.com) 通过漏斗和留存报告分析产品事件。

[`useScriptMixpanelAnalytics()`](/scripts/mixpanel-analytics) 初始化 SDK 并公开 `mixpanel` API。

<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 会将[注册的超级属性](https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript#setting-super-properties)添加到后续事件中：

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

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

### 注销时重置身份

当已识别的用户退出登录或其会话过期时，调用 `reset()`。Mixpanel [建议在注销时进行重置](https://docs.mixpanel.com/docs/tracking-methods/id-management/identifying-users-simplified#client-side-identity-management)，以避免共享同一设备的两个人被合并为同一个身份：

```ts
const { proxy } = useScriptMixpanelAnalytics()

function logout() {
  // 首先结束应用会话。
  proxy.mixpanel.reset()
}
```

## 同意模式

Mixpanel 提供 [`opt_in_tracking` / `opt_out_tracking`](https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript#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">

`defaultConsent: 'opt-out'` 会在第一个事件之前生效。之后调用 `consent.optOut()` 无法撤回 SDK 已捕获的事件。

</callout>

### 示例

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

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