跳到导航

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
// 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 });
3

将 Mixpanel 添加到 docs.yml

在你的 docs.yml 文件中,添加 JavaScript 文件配置:

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

测试你的集成

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

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