屏幕跟踪和分析(Screen tracking and analytics)

此示例显示如何进行屏幕跟踪并发送到Google Analytics(分析)。该方法可以适应任何其他移动分析SDK。

屏幕跟踪(Screen tracking)

使用内置导航容器时,可以使用 onNavigationStateChange 方法来跟踪屏幕。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';

const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID);

// 从导航状态获取当前屏幕
function getCurrentRouteName(navigationState) {
if (!navigationState) {
return null;
}
const route = navigationState.routes[navigationState.index];
// 潜入嵌套导航仪
if (route.routes) {
return getCurrentRouteName(route);
}
return route.routeName;
}

const AppNavigator = StackNavigator(AppRouteConfigs);

export default () => (
<AppNavigator
onNavigationStateChange={(prevState, currentState) => {
const currentScreen = getCurrentRouteName(currentState);
const prevScreen = getCurrentRouteName(prevState);

if (prevScreen !== currentScreen) {
// 以下行使用Google Analytics(分析)跟踪器
// 在此更改跟踪器以使用其他移动分析SDK
tracker.trackScreenView(currentScreen);
}
}}
/>
);

使用Redux进行屏幕跟踪(Screen tracking with Redux)

使用Redux时,我们可以编写一个Redux中间件来跟踪屏幕。为此,我们将从上一节重用 getCurrentRouteName

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { NavigationActions } from 'react-navigation';
import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';

const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID);

const screenTracking = ({ getState }) => next => (action) => {
if (
action.type !== NavigationActions.NAVIGATE
&& action.type !== NavigationActions.BACK
) {
return next(action);
}

const currentScreen = getCurrentRouteName(getState().navigation);
const result = next(action);
const nextScreen = getCurrentRouteName(getState().navigation);
if (nextScreen !== currentScreen) {
// 以下行使用Google Analytics(分析)跟踪器
// 在此更改跟踪器以使用其他移动分析SDK
tracker.trackScreenView(nextScreen);
}
return result;
};

export default screenTracking;

创建 Redux store 并应用上述中间件

screenTracking 中间件可以在创建时应用于store。有关详细信息,请参阅Redux 集成

1
2
3
4
5
6
7
8
9
10
const store = createStore(
combineReducers({
navigation: navigationReducer,
...
}),
applyMiddleware(
screenTracking,
...
),
);
感谢您的支持,这将鼓励我坚持技术分享!