Mixpanel

Add Mixpanel to your Docs

To add Mixpanel to your Docs, you need to create a custom JavaScript file and configure it in your docs.yml file using your Mixpanel project token.

Get your Mixpanel Project Token

1. Log in to your Mixpanel account.
2. Navigate to the project you want to track.
3. Go to Settings > Project Settings.
4. Copy your Project Token from the project details.

Integration Steps

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

2. Create the Mixpanel script: In the scripts folder, create a file named mixpanel.js.

3. Add the Mixpanel tracking code: In your mixpanel.js file, add the following script (replace YOUR_PROJECT_TOKEN with your actual project token):

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
53
mixpanel.init('YOUR_PROJECT_TOKEN', { autocapture: true });

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

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

Security Considerations

Since Mixpanel tracking is implemented using client-side JavaScript, your project token will be visible in the browser’s source code. This is normal and expected behavior for client-side analytics implementations. Mixpanel project tokens are designed to be publicly visible and are safe to expose on the client side.

Testing Your Integration

1. Start your development server: Run fern docs dev to build and start your Fern docs locally (typically on http://localhost:3000).

2. Verify script loading: Open your browser’s developer tools and check the Console and Network tabs to confirm the Mixpanel script is loading correctly.

3. Test event tracking: Navigate through your docs site and verify that events are being tracked.

4. Check Mixpanel dashboard: Go to your Mixpanel project dashboard to verify that events are being received correctly.

Additional Resources

For more information on Mixpanel’s JavaScript SDK and advanced configuration options, visit the Mixpanel JavaScript SDK documentation.