Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Plausible on React Native #1871

thecaffeinatedengineer started this conversation in Anything Else
Discussion options

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 ?

You must be logged in to vote

Replies: 3 comments 4 replies

Comment options

thanks for reaching out @ianchikwature! could you use our npm package for that? see https://www.npmjs.com/package/plausible-tracker

You must be logged in to vote
4 replies
Comment options

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)

Comment options

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 = {};

full script

Comment options

I have been scratching my head over this. Thank you @sturmenta

Comment options

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?

Comment options

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));
 }
}
You must be logged in to vote
0 replies
Comment options

Hi @thecaffeinatedengineer

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!

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

AltStyle によって変換されたページ (->オリジナル) /