如何在Docusaurus.io中添加Mixpanel、Full Story等JS代码片段

Hey there! I’ve worked with Docusaurus on multiple docs sites and integrating analytics tools like Mixpanel and Full Story is totally achievable—here are a few reliable methods to get it done:

Method 1: Inject Scripts via docusaurus.config.js (Simplest Approach) #

This is the go-to method for global scripts that need to load on every page. Docusaurus lets you inject external and inline scripts directly in your config file.

Example for Mixpanel: #

Open your docusaurus.config.js and add the following to the root configuration object:

module.exports = {
  // ... rest of your config
  scripts: [
    // Load Mixpanel's external library
    {
      src: "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js",
      async: true,
    },
    // Inline script to initialize Mixpanel and track page views
    {
      innerHTML: `
        mixpanel.init('YOUR_MIXPANEL_PROJECT_TOKEN');
        
        // Track initial page load
        document.addEventListener('DOMContentLoaded', () => {
          mixpanel.track('Page View', {
            page: window.location.pathname
          });
        });
        
        // Track route changes (critical for SPA like Docusaurus)
        window.addEventListener('popstate', () => {
          mixpanel.track('Page View', {
            page: window.location.pathname
          });
        });
      `,
      type: "text/javascript",
    },
  ],
};

Example for Full Story: #

Add this to the headTags section of your config (or include it in the scripts array above):

module.exports = {
  // ... rest of your config
  headTags: [
    {
      tagName: "script",
      attributes: {
        src: "https://fullstory.com/s/fs.js",
        async: true,
        "data-org": "YOUR_FULLSTORY_ORG_ID",
      },
    },
  ],
};

Method 2: Custom Layout Component (For Granular Control) #

If you need more flexibility—like loading scripts only on specific pages, or tying into React lifecycle events—override Docusaurus’s default Layout component.

1. Create a new file at src/theme/Layout.js
2. Add the following code (adjust tokens as needed):

import React, { useEffect } from 'react';
// Import the original Layout to wrap your customizations
import Layout from '@theme-original/Layout';

export default function LayoutWrapper(props) {
  useEffect(() => {
    // Load and initialize Mixpanel
    const initMixpanel = () => {
      const script = document.createElement('script');
      script.src = 'https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js';
      script.async = true;
      script.onload = () => {
        window.mixpanel.init('YOUR_MIXPANEL_PROJECT_TOKEN');
        trackPageView();
      };
      document.body.appendChild(script);
    };

    // Load Full Story
    const initFullStory = () => {
      const fsScript = document.createElement('script');
      fsScript.src = 'https://fullstory.com/s/fs.js';
      fsScript.async = true;
      fsScript.setAttribute('data-org', 'YOUR_FULLSTORY_ORG_ID');
      document.body.appendChild(fsScript);
    };

    // Helper to track page views
    const trackPageView = () => {
      if (window.mixpanel) {
        window.mixpanel.track('Page View', {
          page: window.location.pathname
        });
      }
    };

    // Initialize tools on component mount
    initMixpanel();
    initFullStory();

    // Track route changes
    const handleRouteChange = () => trackPageView();
    window.addEventListener('popstate', handleRouteChange);

    // Cleanup event listener on unmount
    return () => {
      window.removeEventListener('popstate', handleRouteChange);
    };
  }, []);

  // Render the original Layout with all props
  return <Layout {...props} />;
}

Key Notes: #

• Replace Tokens: Don’t forget to swap YOUR_MIXPANEL_PROJECT_TOKEN and YOUR_FULLSTORY_ORG_ID with your actual credentials from each tool.
• SPA Route Tracking: Since Docusaurus is a single-page app, you must listen for popstate events (or use Docusaurus’s useLocation hook if you prefer React-based routing detection) to track page changes.
• Script Loading: Using async: true ensures scripts don’t block your page from loading, which is good for performance.

内容的提问来源于stack exchange，提问作者YanivNis