yarn add react-native-plausible-tracker
or
npm install --save react-native-plausible-tracker
Don't forget to install the peerDependencies if not already in use:
yarn add react-native-device-info
or
npm install --save react-native-device-info
See full example at example/App.tsx
import Plausible from 'react-native-plausible-tracker';
const plausible = Plausible({
domain: 'example.com', // TODO: Replace this with your domain on Plausible.io
// trackDuringDevelopment: true,
// debug: true,
});
// Elsewhere in your code
export const MyComponent() {
useEffect(() => {
plausible.trackEvent('my_component_loaded');
}, []);
const onNavigateToPaymentScreen
plausible.trackScreen('PaymentScreen');
}, []);
}
This is mostly based on https://reactnavigation.org/docs/screen-tracking/
function App() {
const navigationRef = useNavigationContainerRef();
const routeNameRef = useRef<string>();
const plausible = Plausible({
domain: 'example.com',
});
return (
<NavigationContainer
ref={navigationRef}
onReady={() => {
routeNameRef.current = navigationRef?.getCurrentRoute()?.name;
}}
onStateChange={async () => {
const previousRouteName = routeNameRef.current;
const currentRouteName = navigationRef?.getCurrentRoute()?.name;
if (currentRouteName && previousRouteName !== currentRouteName) {
await plausible.trackScreen(currentRouteName);
}
// Save the current route name for later comparison
routeNameRef.current = currentRouteName;
}}
>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Nested" component={NestedScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
Maintainers should use np for publishing to NPM