Site Analytics

MuseMVP integrates Google Analytics (GA4) and Baidu Tongji, with a unified useAnalytics hook that sends custom events to both platforms. Suitable for products targeting both international and Chinese markets.

Injection Strategy

Configuration

// src/config/index.ts
analytics: {
  googleAnalyticsId: "G-XXXXXXXXXX",  // GA4 measurement ID
  baiduTongjiId: "",                   // Baidu Tongji ID; leave empty to skip
}

• Google Analytics: Uses @next/third-parties GoogleAnalytics component
• Baidu Tongji: Injected via next/script with dynamic script

Development Behavior

• In development (NODE_ENV === "development"), analytics scripts are not injected
• Console logs [AnalyticsScript] local development, skip analytics.
• Keeps dev and test traffic out of production data

Event Tracking

Use useAnalytics() to send custom events:

import { useAnalytics } from "@/modules/analytics";

function MyComponent() {
  const { trackEvent } = useAnalytics();

  const handleClick = () => {
    trackEvent("button_click", { button_id: "pricing_cta", page: "home" });
  };

  return <button onClick={handleClick}>Upgrade</button>;
}

Events are sent to:

• gtag (Google Analytics)
• _hmt (Baidu Tongji, when baiduTongjiId is set)

Pre-Launch Checklist

Related Docs

• SEO — Sitemap, metadata, search optimization
• Tech Stack — Analytics integration