反应应用软件的 Aptabase SDK
一个小的 SDK ( 1 kB) 用 Aptabase, 一个开放源码, 隐私第一 和 简单的 分析 来设定您的 React Apps .
设置
- 使用 npm 或您喜欢的 JavaScript 软件包管理器安装 SDK
npm add @aptabase/react
-
让你的
App Key从Aptabase可以找到它Instructions菜单. -
初始化
AptabaseProvider以您的框架为基础的应用程序组件.
Next.js (App路由器) 的设置
添加 AptabaseProvider 到您的 RootLayout 组件 :
import { AptabaseProvider } from '@aptabase/react';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<AptabaseProvider appKey="<YOUR_APP_KEY>">{children}</AptabaseProvider>
</body>
</html>
);
}
Next.js (页路由器) 的设置
添加 AptabaseProvider 给您的 _app 组件 :
import { AptabaseProvider } from '@aptabase/react';
import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return (
<AptabaseProvider appKey="<YOUR_APP_KEY>">
<Component {...pageProps} />
</AptabaseProvider>
);
}
Remix 的设置
添加 AptabaseProvider 给您的 entry.client.tsx 文件 :
import { AptabaseProvider } from '@aptabase/react';
import { RemixBrowser } from '@remix-run/react';
import { startTransition, StrictMode } from 'react';
import { hydrateRoot } from 'react-dom/client';
startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<AptabaseProvider appKey="<YOUR_APP_KEY>">
<RemixBrowser />
</AptabaseProvider>
</StrictMode>,
);
});
创建反动 App 或 Vite 的设置
添加 AptabaseProvider 转到您的根组件 :
import { AptabaseProvider } from '@aptabase/react';
ReactDOM.createRoot(root).render(
<React.StrictMode>
<AptabaseProvider appKey="<YOUR_APP_KEY>">
<YourApp />
</AptabaseProvider>
</React.StrictMode>,
);
高级设置
这个 AptabaseProvider 也支持可选的第二个参数,它是带有 appVersion 属性.
如何获得你的应用软件版本,由您决定,但一般建议使用你的捆绑器(如Webpack,Vite,Rollup等)在构建时注入数值. 或者您也可以手动传递.
由您决定获得什么版本的应用软件,但一般建议使用你的捆绑器(如Webpack,Vite,Rollup等)在构建时注入数值.
利用Aptabase跟踪事件
在设置之后 AptabaseProvider,然后可以使用 useAptabase 钩.
以下是一个简单的计数器元件的例子,该元件可以跟踪 increment 财务报告和审定财务报表 decrement 事件:
'use client';
import { useState } from 'react';
import { useAptabase } from '@aptabase/react';
export function Counter() {
const { trackEvent } = useAptabase();
const [count, setCount] = useState(0);
function increment() {
setCount((c) => c + 1);
trackEvent('increment', { count });
}
function decrement() {
setCount((c) => c - 1);
trackEvent('decrement', { count });
}
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
几个重要说明:
- SDK会用一些有用的信息自动增强事件,比如OS和其他属性.
- 你控制着被送到阿普塔基地的东西 此 SDK 不自动跟踪任何事件, 您需要呼叫
trackEvent手动.- 因此,一般建议在启动时至少跟踪一个事件
- 你不需要等待着
trackEvent函数,会在后台运行. - 只允许自定义属性上的字符串和数字值