2017-02-09 22:10:16 +08:00
|
|
|
## Screen tracking and analytics
|
|
|
|
|
|
|
|
This example shows how to do screen tracking and send to Google Analytics. The approach can be adapted to any other mobile analytics SDK.
|
|
|
|
|
2017-02-23 15:10:40 +05:30
|
|
|
### Screen tracking with Redux
|
2017-02-09 22:10:16 +08:00
|
|
|
|
2017-02-23 15:10:40 +05:30
|
|
|
When using Redux, we can write a Redux middleware to track the screen.
|
2017-02-09 22:10:16 +08:00
|
|
|
|
|
|
|
```js
|
2017-02-16 09:24:16 -05:00
|
|
|
import { NavigationActions } from 'react-navigation';
|
2017-02-09 22:10:16 +08:00
|
|
|
import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';
|
|
|
|
|
|
|
|
const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID);
|
|
|
|
|
|
|
|
// gets the current screen from navigation state
|
2017-02-23 15:10:40 +05:30
|
|
|
function getCurrentScreen(getState) {
|
|
|
|
const navigationState = getState().navigation;
|
2017-02-09 22:10:16 +08:00
|
|
|
if (!navigationState) { return null; }
|
|
|
|
return navigationState.routes[navigationState.index].routeName;
|
|
|
|
}
|
|
|
|
|
|
|
|
const screenTracking = ({ getState }) => next => (action) => {
|
2017-02-16 09:24:16 -05:00
|
|
|
if (action.type !== NavigationActions.NAVIGATE && action.type !== NavigationActions.BACK)) return next(action);
|
2017-02-09 22:10:16 +08:00
|
|
|
|
|
|
|
const currentScreen = getCurrentScreen(getState);
|
|
|
|
const result = next(action);
|
|
|
|
const nextScreen = getCurrentScreen(getState);
|
|
|
|
if (nextScreen !== currentScreen) {
|
|
|
|
// the line below uses the Google Analytics tracker
|
|
|
|
// change the tracker here to use other Mobile analytics SDK.
|
|
|
|
tracker.trackScreenView(nextScreen);
|
|
|
|
}
|
|
|
|
return result;
|
|
|
|
};
|
|
|
|
|
|
|
|
export default screenTracking;
|
|
|
|
```
|
|
|
|
|
|
|
|
### Create Redux store and apply the above middleware
|
|
|
|
|
|
|
|
The `screenTracking` middleware can be applied to the store during its creation. See [Redux Integration](Redux-Integration.md) for details.
|
|
|
|
|
|
|
|
```js
|
|
|
|
const store = createStore(
|
|
|
|
combineReducers({
|
2017-02-23 15:10:40 +05:30
|
|
|
navigation: navigationReducer,
|
2017-02-09 22:10:16 +08:00
|
|
|
...
|
|
|
|
}),
|
|
|
|
applyMiddleware(
|
|
|
|
screenTracking,
|
|
|
|
...
|
|
|
|
),
|
|
|
|
);
|
|
|
|
```
|