> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiJlNjkyYjhjNS05MzYyLTQ4NmEtODkzMS1mZDUzMWVjMTI2NTIiLCJleHAiOjE3NzgyNzEwOTcsImlhdCI6MTc3ODI3MDc5N30.L6QZLYT9weKfSH-SSZICJ19bpf5D5mGhSw4SR-We8-M
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

# Mixpanel

> 了解如何集成 Fern Docs 与 Mixpanel 来跟踪用户行为和分析数据。

集成 Mixpanel 来跟踪文档中的产品分析和用户行为，包括事件跟踪、漏斗分析和用户群组。

<Steps>
  <Step title="获取你的 Mixpanel 项目令牌">
    在你的 Mixpanel 项目中，前往 **Settings > Project Settings** 并复制你的 **Project Token**。

    <Note>
      你的项目令牌将在浏览器的源代码中可见。这对于客户端分析来说是正常的，Mixpanel 令牌被设计为可以安全地在客户端暴露。
    </Note>
  </Step>

  <Step title="创建 Mixpanel 脚本">
    在你的 `fern` 目录下，如果不存在则创建一个 `scripts` 文件夹。

    在 `scripts` 文件夹中，创建一个名为 `mixpanel.js` 的文件并添加以下脚本（将 `YOUR_PROJECT_TOKEN` 替换为你的实际项目令牌）：

    <CodeBlock title="fern/scripts/mixpanel.js">
      ```js maxLines=10
      // Add the JS snippet to load the script
      (function (f, b) {
        if (!b.__SV) {
          var e, g, i, h;
          window.mixpanel = b;
          b._i = [];
          b.init = function (e, f, c) {
            function g(a, d) {
              var b = d.split(".");
              if (b.length === 2) {
                a = a[b[0]];
                d = b[1];
              }
              a[d] = function () {
                a.push([d].concat(Array.prototype.slice.call(arguments, 0)));
              };
            }

            var a = b;
            if (typeof c !== "undefined") {
              a = b[c] = [];
            } else {
              c = "mixpanel";
            }

            a.people = a.people || [];
            a.toString = function (a) {
              var d = "mixpanel";
              if (c !== "mixpanel") d += "." + c;
              if (!a) d += " (stub)";
              return d;
            };
            a.people.toString = function () {
              return a.toString(1) + ".people (stub)";
            };

            i = "disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
            for (h = 0; h < i.length; h++) g(a, i[h]);

            b._i.push([e, f, c]);
          };
          b.__SV = 1.2;
          e = f.createElement("script");
          e.type = "text/javascript";
          e.async = true;
          e.src = "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";
          g = f.getElementsByTagName("script")[0];
          g.parentNode.insertBefore(e, g);
        }
      })(document, window.mixpanel || []);

      // Create an instance of the Mixpanel object
      mixpanel.init('YOUR_PROJECT_TOKEN', { autocapture: true });
      ```
    </CodeBlock>
  </Step>

  <Step title="将 Mixpanel 添加到 `docs.yml`">
    在你的 `docs.yml` 文件中，添加 JavaScript 文件配置：

    <CodeBlock title="docs.yml">
      ```yaml
      js:
        - path: ./scripts/mixpanel.js
          strategy: beforeInteractive
      ```
    </CodeBlock>
  </Step>

  <Step title="测试你的集成">
    运行 `fern docs dev` 并检查浏览器的开发者工具，确认 Mixpanel 脚本正确加载。浏览你的文档并验证事件是否在 Mixpanel 仪表板中显示。

    有关高级配置选项，请参阅 [Mixpanel JavaScript SDK 文档](https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript)。
  </Step>
</Steps>