Plausible on React Native

[thecaffeinatedengineer]

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 ?

[metmarkosaric]

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

[brentvatne]

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)

[sturmenta]

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

[njoguamos]

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

[ArtRabbit]

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?

[findhumane]

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));
  }
}

[umidjon-2231]

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!