[Tracker] Support React Native

[apaul314]

Hi there!

Any plans to support React Native somehow?

[alexanderdean]

Hi @hose314! We have no plans for React Native on our imminent roadmap. Would it look like bindings to our native mobile trackers, or would it be based on our JavaScript Tracker - what do you recommend? If the latter, this might be relevant:

snowplow/snowplow-javascript-tracker#432

[apaul314]

I'm running into the same issue and thinking where to implement analytics on native or js threads. Existing node/js snowplow trackers are not working out of the box in react-native due to the some incompatible deps.

After some experiments with React Native we decided to run in production. Our existing infrastructure tightly depends on snowplow, so we cannot move to another analytics provider and don't want to. So the question is writing native bridge or rewrite js (with support to save events on disc and react-native-device-info package)

[alexanderdean]

Makes sense @hose314 - have you considered opening a PR into either of the JS Tracker projects to achieve compatibility?

[apaul314]

I checked that core tracker itself is okay with react-native. Node.js tracker falls with request module due to the it's lies on node environment. The issue could be solved by checking if lib runs under node (but it's senseless because package is called snowplow nodejs tracker) then use some request alternative. But my suggestion is to migrate from request to axios. I can open PR if you think it's appropriate solution.

[alexanderdean]

Thanks @hose314 . @chuwy , @BenFradet - what do you reckon?

[BenFradet]

I think it might be weird to point Snowplow users using React to the node tracker so I'd lean towards adapting the js tracker.

[chuwy]

I think snowplow-nodejs-tracker's problem is that it is actually "JavaScript (CommonJS) tracker", and our snowplow-javascript-tracker is in fact "webbrowser-tracker". From this perspective it makes some sense to me to advise Node.js Tracker.

Few more advantages:

• It doesn't use all this extremely weird and hard-to-understand IO logic we have to use in snowplow-javascript-tracker
• It can be statically typed in more natural manner (snowplow_name_here('somefunc', 'argument') is not most pleasant interface)
• Snowplow JavaScript Tracker contains too much logic that makes sense only in web browsers (such as Optimizely). Maybe other things such as cross-domain linker make sense in React Native?

So if request/axios is the only problem I'd go in that direction. Especially because it should be extremely simple to fix it.

But out of curiosity, @hose314, what exactly the problem with snowplow-javascript-tracker and React Native?

[apaul314]

@chuwy from snowplow-javascript-tracker i have used only core component and everything is okay there. I've considered snowplow-nodejs-tracker as you mentioned as commonjs track and i see in docs that i can use my own emitter logic:

var t = tracker([e], 'myTracker', 'myApp', false);

[chuwy]

@hose314 snowplow-tracker-core is a separate component, you can use it without snowplow-javascript-tracker if that is helpful. Regarding nodejs tracker - yes, emitters are pretty independent components.

[apaul314]

@chuwy thanks, got it. l've bit confused because snowplow-tracker-core npm page points to snowplow-javascript-tracker.

Eventually, what you think about moving to axios in snowplow-nodejs-tracker?

[chuwy]

@hose314, yep that's because core and trackers itself reside in same repository, but core is a separate package, while tracker is assembled JS asset.

I'm ok with moving emitter to axios (@alexanderdean?) if this will make it possible to run it on React Native.

[alexanderdean]

You make a good case @chuwy. Happy with the axios change if everybody else is - it looks like a very popular / widely used library...

[sunshineo]

Hello, what's the situation now? NodeJS tracker good to go in React Native?

[apaul314]

@sunshineo My suggestion is to plug native side tracker. The main advantaged is that the crash events also will be collected to the store

[VanHoutte]

I tried the NodeJS tracker for React Native but i'm getting "undefined is not an object (evaluating 'emitters[i].input'. Any ideas?

[BenFradet]

hey @VanHoutte , feel free to raise this on our Discourse: https://discourse.snowplowanalytics.com/, you'll reach more people there 👍

[slicejacob]

@VanHoutte Did you ever post the question on Discourse?

[VanHoutte]

@VanHoutte Did you ever post the question on Discourse?

Yes I did but no response.
https://discourse.snowplowanalytics.com/t/react-native-support/2774

I managed to get it working on react native, let me know if you need help

[slicejacob]

@VanHoutte That’d be great. How did you manage to get passed the “undefined is not an object (evaluating 'emitters[i].input)” error? I followed the guide and got that as well. I also created a post on discourse and got no reply. https://discourse.snowplowanalytics.com/t/getting-emitters-i-undefined-when-using-the-node-js-tracker-in-react-native/2825

[VanHoutte]

@VanHoutte That’d be great. How did you manage to get passed the “undefined is not an object (evaluating 'emitters[i].input)” error? I followed the guide and got that as well. I also created a post on discourse and got no reply. https://discourse.snowplowanalytics.com/t/getting-emitters-i-undefined-when-using-the-node-js-tracker-in-react-native/2825

I used https://github.com/yanivkalfa/snowplow-react-native-tracker to get it working.
The library wraps the nodejs tracker onto another variable.

I use it as followed:

const snowplow = require('snowplow-react-native-tracker');

export default class App extends Component {
	constructor(props: {}) {
		super(props);

		var emitter = snowplow.Emitter;
		var tracker = snowplow.Tracker;

		const e = emitter(
			{
				endpoint: 'url of the server', // Collector endpoint
				protocol: 'https', // Optionally specify a method - http is the default
				method: 'GET', // Method - defaults to GET
				bufferSize: 5, // Only send events once n are buffered. Defaults to 1 for GET requests and 10 for POST requests.
			},
			(response: {}) => {
				console.log(response);
			},
		);

		const t = tracker({ emitters: [e], namespace: 'namespace_variable', appId: 'app_id', encodeBase64: false });

		t.setPlatform('mobile');
		t.setUserId('id');
		// t.trackPageView('myUrl', 'myPage', 'myReferrer', 'myCustomContexts');

		// t.trackStructEvent('shop', 'add-to-basket', null, 'pcs', 2);
		t.trackScreenView('name', 'id', ['context'], 500000);

		// e.flush();
	}

render() {}
}

I hope this helps.
If you have any other questions, let me know.

PS, it's possible that the formatting of the code is incorrect since i had to remove some blocks.

[slicejacob]

@VanHoutte - thanks for the quick reply. I’m noticing some differences between your setup and how it’s setup in the guide. I’ll give this a shot. Looks promising!

[VanHoutte]

@VanHoutte - thanks for the quick reply. I’m noticing some differences between your setup and how it’s setup in the guide. I’ll give this a shot. Looks promising!

Yeah i know, i had to manually dig through the library in my node_modules to get the correct working setup.

Good luck.

I can confirm that this works (well at least for me)

[slicejacob]

Thanks! I was able to get it working.