empty
- npm install @xmly/react-native-page-analytics
-
页面继承PageAnalytics.Screen或者PageAnalytics.PureScreen,分别对应普通组件和纯组件
-
定义 customPageView 和 customPageExit 属性,分别在 页面展示 和 页面隐藏 时执行
-
在componentWillUnmount中添加 super.componentWillUnmount(); 移除页面事件监听
import { View } from 'react-native';
import PageAnalytics, { AnalyticProps } from '@xmly/react-native-page-analytics';
interface CurrentProps {}
interface CurrentState {}
class HomePage extends PageAnalytics.Screen<CurrentProps & AnalyticProps, CurrentState> {
constructor(props: CurrentProps & AnalyticProps) {
super(props);
}
componentDidMount() {
}
componentWillUnmount() {
// 移除监听
super.componentWillUnmount();
}
// 页面展示埋点上传
customPageView = () => {
console.log(`发送页面pageView埋点 页面名: homePage metaId: 0`);
};
// 页面隐藏埋点上传
customPageExit = () => {
console.log(`发送页面pageExit埋点 页面名: homePage metaId: 0`);
};
render() {
return <View />
}
}
属性 | 类型 | 可选 | 含义 |
---|---|---|---|
customPageView | () => void | 否 | 页面展示埋点方法 |
customPageExit | () => void | 否 | 自定义页面隐藏埋点方法 |
- 须在componentWillUnmount中调用super.componentWillUnmount方法去移除页面事件监听
- 组件中使用useScreen(),参数中传入 customPageView,customPageExit,两个必传属性,分别在 页面展示 和 页面隐藏 时执行,对于使用了路由的页面,需要将路由对象navigation传入
import { useCallback } from 'react';
import { View } from 'react-native';
import PageAnalytics, { AnalyticProps } from '@xmly/react-native-page-analytics';
interface HomePageProps {}
export default function HomePage(props: HomePageProps & AnalyticProps) {
// 页面展示埋点上传
const customPageView = useCallback(() => {
console.log(`发送页面pageView埋点 页面名: homePage metaId: 0`);
}, []);
// 页面隐藏埋点上传
const customPageExit = useCallback(() => {
console.log(`发送页面pageExit埋点 页面名: homePage metaId: 0`);
}, []);
PageAnalytics.useScreen({
customPageView,
customPageExit,
...props, // 对于有使用路由的页面,需要将路由对象navigation传入
});
return <View />
}
useScreen
方法 | 参数 | 返回值 | 含义 |
---|---|---|---|
useScreen | { // 页面展示埋点上传 customPageView?: () => void; // 页面隐藏埋点上传 customPageExit?: () => void; // 若使用了路由,传入navigation [index: string]: any; } |
-- | hooks |
-
此工具对页面的navigation跳转、APPstate状态变化、RN页面与Native页面互跳 三种场景都做了处理,同时对ios,安卓两端事件监听的差异做了兼容处理,保证了页面展示/隐藏数据埋点的全面准确
-
兼容没有使用react-navigation的项目,对于没有使用路由的单RN页面项目,会对APPstate状态变化、RN页面与Native页面互跳 这两种场景做了处理
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT