-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Plausible on React Native #1871
-
Hi,
Does anyone know how to log analytics in React Native? I've seen integrations online for Web but I haven't seen anything for Native devices.
Any help or pointers ?
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 3 comments 4 replies
-
thanks for reaching out @ianchikwature! could you use our npm package for that? see https://www.npmjs.com/package/plausible-tracker
Beta Was this translation helpful? Give feedback.
All reactions
-
I found it was possible to get this working by mocking out the location / document objects:
import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; import Plausible from 'plausible-tracker' window.location = { "ancestorOrigins": {}, "href": "https://bront.xyz/", "origin": "https://bront.xyz", "protocol": "https:", "host": "bront.xyz", "hostname": "bront.xyz", "port": "", "pathname": "/", "search": "", "hash": "" }; window.document = {}; const plausible = Plausible({ domain: 'bront.xyz' }) plausible.trackEvent('hello', { callback: () => console.log('sent event') }); export default function App() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <StatusBar style="auto" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
any interest in building some basic support for react-native into the library by handling this for the developer automatically? this could be done in a generic way by making it possible to run the library outside of a web browser (without adding any dependencies on any node apis)
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 9 -
❤️ 3
-
window.location crashes in dev (NotSupportedError: Cannot set "location"., js engine: hermes)
and
setLocationHref crashes in prod (the apps closes)
so ...
import { setLocationHref } from '@expo/metro-runtime/build/location/Location.native.js'; if (__DEV__) { setLocationHref('https://asd.xyz/'); } else { // @ts-ignore window.location = { href: 'https://asd.xyz/', origin: 'https://asd.xyz', protocol: 'https:', host: 'asd.xyz', hostname: 'asd.xyz', port: '', pathname: '/', search: '', hash: '', }; } // @ts-ignore window.document = {};
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 3
-
I have been scratching my head over this. Thank you @sturmenta
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 2
-
Has anyone got this working in a production app? We've implemented this in our app while the event tracking works we got very high user and visitor numbers in plausible. How does the tracker identify visitors?
Beta Was this translation helpful? Give feedback.
All reactions
-
Has anyone got this working in a production app? We've implemented this in our app while the event tracking works we got very high user and visitor numbers in plausible. How does the tracker identify visitors?
I'm using:
import DeviceInfo from 'react-native-device-info';
async function recordPageView(urlFragment) {
try {
const userAgent = await DeviceInfo.getUserAgent();
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000 /* ms */);
const url = "https://" + HOST + "/" + urlFragment;
await fetch(
"https://plausible.io/api/event",
{
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
"User-Agent": userAgent,
},
body: JSON.stringify({
name: "pageview",
domain: HOST,
url: url,
}),
signal: controller.signal,
}
);
clearTimeout(timeoutId);
} catch (e) {
info("recordPageView error to " + urlFragment + ": " + getErrors(e));
}
}
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 3
-
I ran into the same problem and didn’t find a good solution, so I created a new package for it: expo-plausible
.
It’s a Plausible Analytics client for Expo / React Native. It gives you a provider + hook to send events, with optional offline queueing, batching, and consent helpers.
Docs and examples are in the README. Hope it helps!
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1