# Mixpanel

> Learn how to integrate Fern Docs with Mixpanel to track user behavior and analytics.

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

<Steps>
  <Step title="Get your Mixpanel project token">
    In your Mixpanel project, go to **Settings > Project Settings** and copy your **Project Token**.

    <Note>
      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.
    </Note>
  </Step>

  <Step title="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):

    <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="Add Mixpanel to `docs.yml`">
    In your `docs.yml` file, add the JavaScript file configuration:

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

  <Step title="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](https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript).
  </Step>
</Steps>