The Mediajel React Native Tracker is a React Native wrapper around the Snowplow React Native Tracker. It provides a simple way to track events in your React Native app and send them to our Snowplow collector.
From the root of your React Native project:
npm install --save @mediajel/react-native-tracker
npx pod-install
In your ios/Podfile
file (unless using Expo Go), please add the FMDB
dependency with modular_headers
set to true
. This is necessary to make the FMDB
package generate module maps so that it can be used by the tracker:
pod 'FMDB', :modular_headers => true
Then, instrument the tracker in your app and start tracking events. For example:
import { createMediajelTracker } from '@mediajel/react-native-tracker';
// Replace with your App ID
const tracker = createMediajelTracker('AppIdHere');
Replace with your GAID or IDFA of the user This is necessary for us to report on attributed transactions We recommend this library if you don't already have a way of capturing the user's GAID or IDFA
tracker.setUserId("GAID-or-IDFA-Here");
Example with the react-native-idfa-aaid
library
import { createMediajelTracker } from '@mediajel/react-native-tracker';
import ReactNativeIdfaAaid, { AdvertisingInfoResponse } from '@sparkfabrik/react-native-idfa-aaid';
const MyComponent: React.FC = () => {
const [idfa, setIdfa] = useState<string | null>();
const tracker = createMediajelTracker('AppIdHere');
useEffect(() => {
ReactNativeIdfaAaid.getAdvertisingInfo()
.then((res: AdvertisingInfoResponse) => !res.isAdTrackingLimited && tracker.setUserId(res.id))
}, []);
}
Tracking a transaction event
tracker.trackEcommerceTransactionEvent({
orderId: '1234',
totalValue: 15,
affiliation: 'Womens Apparel',
taxValue: 1.5,
shipping: 2.99,
city: 'San Jose',
state: 'California',
country: 'USA',
currency: 'USD',
items: [
{
sku: 'DD44',
name: 'T-Shirt',
category: 'Green Medium',
price: 15,
quantity: 1,
currency: 'USD',
},
],
});
The Snowplow React Native Tracker also provides first-class support for TypeScript, as it is fully typed.
See also our DemoApp for an example implementation.
Assuming a react-native environment is set up, from the root of the repository:
yarn
To run the unit tests, simply execute:
yarn test
Replace "placeholder" with the URI for your Snowplow Mini or other Snowplow collector in DemoApp/App.js
.
For Android:
yarn example android
Note: Linux users who want to run the DemoApp for Android, would also need to run yarn start
in a separate terminal.
For iOS:
yarn example ios
Snowplow React-Native Tracker is being end-to-end tested using Snowplow Micro and Detox. To run these tests locally:
- Start your Snowplow Micro instance locally.
- Replace the
placeholder
value for thecollectorEndpoint
variable inexample/src/App.js
(use the network IP address of your computer or ngrok). - Start the end-to-end tests:
- On Android, run
yarn e2e:android
- On iOS, run
yarn e2e:ios
- On Android, run