分析与集成

Mixpanel

以 Markdown 格式查看

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

1

获取你的 Mixpanel 项目令牌

在你的 Mixpanel 项目中，前往 Settings > Project Settings 并复制你的 Project Token。

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

2

创建 Mixpanel 脚本

在你的 fern 目录下，如果不存在则创建一个 scripts 文件夹。

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

fern/scripts/mixpanel.js
1// Add the JS snippet to load the script
2(function (f, b) {
3  if (!b.__SV) {
4    var e, g, i, h;
5    window.mixpanel = b;
6    b._i = [];
7    b.init = function (e, f, c) {
8      function g(a, d) {
9        var b = d.split(".");
10        if (b.length === 2) {
11          a = a[b[0]];
12          d = b[1];
13        }
14        a[d] = function () {
15          a.push([d].concat(Array.prototype.slice.call(arguments, 0)));
16        };
17      }
18
19      var a = b;
20      if (typeof c !== "undefined") {
21        a = b[c] = [];
22      } else {
23        c = "mixpanel";
24      }
25
26      a.people = a.people || [];
27      a.toString = function (a) {
28        var d = "mixpanel";
29        if (c !== "mixpanel") d += "." + c;
30        if (!a) d += " (stub)";
31        return d;
32      };
33      a.people.toString = function () {
34        return a.toString(1) + ".people (stub)";
35      };
36
37      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(" ");
38      for (h = 0; h < i.length; h++) g(a, i[h]);
39
40      b._i.push([e, f, c]);
41    };
42    b.__SV = 1.2;
43    e = f.createElement("script");
44    e.type = "text/javascript";
45    e.async = true;
46    e.src = "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";
47    g = f.getElementsByTagName("script")[0];
48    g.parentNode.insertBefore(e, g);
49  }
50})(document, window.mixpanel || []);
51
52// Create an instance of the Mixpanel object
53mixpanel.init('YOUR_PROJECT_TOKEN', { autocapture: true });
3

将 Mixpanel 添加到 docs.yml

在你的 docs.yml 文件中，添加 JavaScript 文件配置：

docs.yml
1js:
2  - path: ./scripts/mixpanel.js
3    strategy: beforeInteractive
4

测试你的集成

运行 fern docs dev 并检查浏览器的开发者工具，确认 Mixpanel 脚本正确加载。浏览你的文档并验证事件是否在 Mixpanel 仪表板中显示。

有关高级配置选项，请参阅 Mixpanel JavaScript SDK 文档。