This package is part of a group that, when installed together, will allow for easy self-hosted mobile app analytics. Without a backend counterpart, this package doesn't do anything.
This package can be used with a wide variety of hybrid app frameworks, and this README will highlight how to use this package with each of them.
Basic installation
Install the package with NPM:
npm i jw-app-analytics
Basic usage
You can trigger events by calling the trigger
method like this:
// This triggers an event you should have registered in your backend. It's always nice to register an 'open_app' event.
AnalyticsService.shared.trigger('open_app');
To enable the tracking of user sessions in your app you'll need to pass true
to the userJourneyEnabled
parameter of the setup
function:
AnalyticsService.shared.setup('http://127.0.0.1:8000', info.uuid, true);
Ionic Setup (Capacitor)
Add the following imports to your AppComponent.ts
:
import { Plugins, AppState } from '@capacitor/core';
import { AnalyticsService } from 'jw-app-analytics';
const { App } = Plugins;
const { Device } = Plugins;
Then add the following code to the initializeApp
function:
Device.getInfo().then(info => {
AnalyticsService.shared.setup('http://127.0.0.1:8000', info.uuid);
AnalyticsService.shared.trigger('open_app');
App.addListener('appStateChange', (state: AppState) => {
if (state.isActive) {
AnalyticsService.shared.willEnterForeground();
} else {
AnalyticsService.shared.didEnterBackground();
}
});
});
React Native Setup
Add the following imports to your App.js
:
import { AppState } from 'react-native';
import * as DeviceInfo from 'react-native-device-info';
import { AnalyticsService } from 'jw-app-analytics';
Then add the following properties to the state:
state = {
appState: AppState.currentState,
};
Then implement the componentDidMount
and componentWillUnmount
as shown below:
componentDidMount() {
const appId = DeviceInfo.default.getUniqueID();
AnalyticsService.shared.setup('http://127.0.0.1:8000', appId);
AnalyticsService.shared.trigger('open_app');
AppState.addEventListener('change', this._handleAppStateChange);
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = (nextAppState) => {
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
AnalyticsService.shared.willEnterForeground();
} else if (this.state.appState.match(/active/) && nextAppState.match(/background/)) {
AnalyticsService.shared.didEnterBackground();
}
this.setState({ appState: nextAppState });
}