Mixpanel

Mixpanel is an event-centric analytics tool that tracks user events rather than automatically capturing data. Integrating Mixpanel with your Document360 knowledge base lets you analyze how readers interact with your content, which articles drive engagement, where they drop off, and how effective your site is overall.

Before you begin

• You need a Mixpanel account.
• You need your Mixpanel Project token, available in Mixpanel under Settings > Project settings > Project token.

Configuration options

When adding the Mixpanel integration, you can choose between two configuration types:

• Basic configuration: standard setup that automatically tracks page views after you enter your Mixpanel Project token. Use this for a quick setup with minimal effort.
• Custom configuration: advanced setup that requires loading and initializing the Mixpanel library manually. Use this when you want to track specific events beyond page views, such as button clicks or form submissions.

How to set up Mixpanel

Basic configuration

1. In the Document360 portal, navigate to Connections () > Integrations () in the left navigation bar.
2. Select Mixpanel from the list of integrations and click Add. The Add new integration dialog appears.
3. Select the Basic configuration option.
4. Enter a Description for this integration.
5. Enter your Mixpanel Project token in the Mixpanel ID field. For details on where to find your token, see the Mixpanel installation guide.
6. Optionally, expand Code inclusion/exclusion conditions to apply the code based on IP address, Workspace, or Language.
7. Click Add.

Your knowledge base will now send page view data to Mixpanel.

Custom configuration

Use Custom configuration to set up an advanced Mixpanel integration. This option lets you add JavaScript code directly in the configuration panel and customize event tracking based on your needs.

1. In the Document360 portal, navigate to Connections () > Integrations () in the left navigation bar.
2. Select Mixpanel from the list of integrations and click Add. The Add new integration panel appears.
3. Select the Custom configuration option.
4. Enter a Description for this integration.
5. Paste your JavaScript snippet into the code field. See the examples below.
6. Optionally, expand Code inclusion/exclusion conditions to apply the code based on IP address, Workspace, or Language.
7. Click Add.

Example: Load and initialize Mixpanel

Replace YOUR_PROJECT_TOKEN with your actual Mixpanel Project token from Mixpanel's Project settings.

<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(".");
      2==b.length&&(a=a[b[0]],d=b[1]);
      a[d]=function(){a.push([d].concat(Array.prototype.slice.call(arguments,0)))}}
      var a=b;"undefined"!==typeof c?a=b[c]=[]:c="mixpanel";
      a.people=a.people||[];a.toString=function(a){var d="mixpanel";
      "mixpanel"!==c&&(d+="."+c);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 track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set set_once union unset toString reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking get_group".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=!0;
    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 || []);
mixpanel.init("YOUR_PROJECT_TOKEN");
</script>

Example: Page view tracking

<script>
mixpanel.track("Page View", {
  "Page URL": window.location.href,
  "Page Title": document.title,
  "Referrer": document.referrer || ""
});
</script>

Example: Button click tracking

Replace yourButtonId with the actual ID of the button you want to track, and update "Your Button Label" with a meaningful label. For example, if you are tracking a button labelled "Subscribe", use "subscribeButton" and "Subscribe".

<script>
document.getElementById("yourButtonId")
  .addEventListener("click", function() {
    mixpanel.track("Button Click", {
      "Button Name": "Your Button Label",
      "Page URL": window.location.href
    });
  });
</script>

Verify the configuration

If no data appears in Mixpanel after setup, work through the following checks:

Confirm your token

Make sure you entered the Mixpanel Project token and not the Project ID or API secret.

Check the page source

1. Open your knowledge base site in a browser.
2. Right-click anywhere on the page and select View page source (shortcut: Ctrl + U on Windows/Linux, ⌘+ Option+ U on Mac).
3. Press Ctrl + F / ⌘ + F and search for mixpanel. If you do not find it, the Mixpanel integration script has not been injected.

Check the Network tab

1. Open your knowledge base site in a browser.
2. Press F12 (Windows/Linux) or ⌘ + Option + I (Mac) to open Developer Tools.
3. Go to the Network tab.
4. In the filter box, type api.mixpanel.com.
5. Reload the page or perform an action such as viewing an article. If you see requests to api.mixpanel.com, events are being sent. If no requests appear, the Mixpanel library is not loading or events are being blocked.

Rule out blockers

Check for ad blockers, cookie consent banners, or restrictive Content Security Policies (CSP). These can prevent Mixpanel from loading or sending data.

Workaround using Custom HTML

If the Mixpanel integration script does not load correctly through the native integration, you can add it as a Custom HTML integration instead.

1. In the Document360 portal, navigate to Connections () > Integrations () in the left navigation bar.
2. Select Custom HTML from the list of integrations and click Add. The Add new integration panel appears.
3. Paste the Mixpanel library snippet (see "Load and initialize Mixpanel" above).
4. Add your custom event tracking code below the initialization snippet.
5. Click Add and test again in Mixpanel.

Best practices

• Use Basic configuration unless you need custom event tracking. For most knowledge bases, entering the Project token under Basic configuration is enough to start tracking page views.
• Always initialize the Mixpanel library before calling tracking functions. In Custom configuration, paste the full library initialization snippet first, then add your event tracking code below it.
• Test in an incognito window after saving. Browser caching can cause stale scripts to run, which makes it look like changes haven't taken effect.
• Use Code inclusion/exclusion conditions to exclude internal traffic. Add your office IP address as an exclusion to prevent team visits from skewing your analytics data.
• Rename events to match your naming convention. Mixpanel event names are case-sensitive and appear as-is in your dashboard. Use consistent, descriptive names like "Article Viewed" rather than "Page View" to make your data easier to read.

FAQ