反应 Umami 分析

轻量级反应组件 Umami 分析 ——以隐私为主,开源替代谷歌分析.

零运行时间依赖关系. 完整类型脚本支持 。 与回声18.2+和19.

安装

pnpm add @danielgtmn/umami-react

快速启动

import UmamiAnalytics from '@danielgtmn/umami-react';

function App() {
  return (
    <>
      <UmamiAnalytics
        url="https://analytics.example.com"
        websiteId="your-website-id"
      />
      {/* Your app content */}
    </>
  );
}

该组件没有产生任何效果——它只注入了Umami跟踪脚本.

道具

所有道具也可以通过环境变量设置:

UMAMI_URL=https://analytics.example.com
UMAMI_ID=your-website-id
UMAMI_DEBUG=false
UMAMI_LAZY_LOAD=true

事件跟踪

使用 useUmami 自定义事件、页面视图和用户身份的钩子 :

import { useUmami } from '@danielgtmn/umami-react';

function MyComponent() {
  const { track, trackPageview, identify } = useUmami();

  return (
    <button onClick={() => track('signup', { plan: 'pro' })}>
      Sign up
    </button>
  );
}

虎克 API

const {
  track,                 // track(eventName, eventData?)
  trackPageview,         // trackPageview(pageviewData?)
  trackPageviewWithUTM,  // trackPageviewWithUTM(utmParams, additionalData?)
  trackPageviewAsync,    // trackPageviewAsync(utmId, fetcherFn, additionalData?)
  identify,              // identify(userId) or identify(sessionData)
} = useUmami();

带有 UTM 参数的页面视图

const { trackPageviewWithUTM } = useUmami();

trackPageviewWithUTM({
  utm_source: 'newsletter',
  utm_medium: 'email',
  utm_campaign: 'spring-sale',
});

Async UTM 获取

在跟踪前从后端获取 UTM 参数 :

import { useUmami, UTMFetcher } from '@danielgtmn/umami-react';

const fetchUTM: UTMFetcher = async (utmId) => {
  const res = await fetch(`/api/utm/${utmId}`);
  return res.json();
};

// Fetches UTM data, then tracks the pageview
// Falls back to basic pageview if the fetch fails
await trackPageviewAsync('campaign-123', fetchUTM);

用户标识

const { identify } = useUmami();

// With a string ID
identify('user-123');

// With session data
identify({ userId: 'user-123', plan: 'pro' });

// Both
identify('user-123', { plan: 'pro' });

禁用自动跟踪

要手动控制页面视图跟踪, 请禁用 Umami 的自动跟踪 :

<UmamiAnalytics
  url="https://analytics.example.com"
  websiteId="your-website-id"
  scriptAttributes={{ 'data-auto-track': 'false' }}
/>

框架实例

Next.js (App路由器) (英语)

// app/layout.tsx
import UmamiAnalytics from '@danielgtmn/umami-react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <UmamiAnalytics
          url="https://analytics.example.com"
          websiteId="your-website-id"
        />
        {children}
      </body>
    </html>
  );
}

维特

// src/App.tsx
import UmamiAnalytics from '@danielgtmn/umami-react';

function App() {
  return (
    <>
      <UmamiAnalytics
        url="https://analytics.example.com"
        websiteId="your-website-id"
      />
      {/* Your app */}
    </>
  );
}

类型脚本

所有类型都导出 :

import type {
  UmamiAnalyticsProps,
  UmamiConfig,
  PageviewData,
  UTMFetcher,
} from '@danielgtmn/umami-react';

发展

pnpm install          # Install dependencies
pnpm dev              # Watch mode
pnpm build            # Production build
pnpm test             # Run tests
pnpm test:coverage    # Tests with coverage
pnpm lint             # Lint
pnpm type-check       # Type check
pnpm size             # Check bundle size

承诺跟随 常规武器委员会. Git 钩子(Husky)在每次交接前进行打字,打字和测试.

捐款

1. 叉出还原
2. 创建您的分支( C)git checkout -b feat/my-feature(中文(简体) )
3. 确保所有检查通过(pnpm test:run && pnpm lint && pnpm type-check(中文(简体) )
4. 使用常规承诺格式提交
5. 打开拉请求

许可证

麻省理工学院