Mixpanel

View as Markdown

Integrate Mixpanel to track product analytics and user behavior in your documentation, including event tracking, funnel analysis, and user cohorts.

1

Get your Mixpanel project token

In your Mixpanel project, go to Settings > Project Settings and copy your Project Token.

Your project token will be visible in the browser’s source code. This is normal for client-side analytics and Mixpanel tokens are designed to be safely exposed on the client side.

2

Create the Mixpanel script

Under your fern directory, create a scripts folder if it doesn’t already exist.

In the scripts folder, create a file named mixpanel.js and add the following script (replace YOUR_PROJECT_TOKEN with your actual 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

Add Mixpanel to docs.yml

In your docs.yml file, add the JavaScript file configuration:

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

Test your integration

Run fern docs dev and check your browser’s developer tools to confirm the Mixpanel script loads correctly. Navigate through your docs and verify events appear in your Mixpanel dashboard.

For advanced configuration options, see the Mixpanel JavaScript SDK documentation.