keen / keen-js

https://keen.io/ JavaScript SDKs. Track users and visualise the results. Demo http://keen.github.io/keen-dataviz.js/
MIT License
578 stars 143 forks source link

React Native support? #410

Closed vkarpov15 closed 6 years ago

vkarpov15 commented 8 years ago
import Keen from 'keen-js'

const client = new Keen({
  projectId: 'my project id here',
  writeKey: 'my write key here'
})

On react native crashes at this line with 3.4.1. Porting 61e5a530af706a63bb1f77d91165a8e223a984c7 into it still gives a bunch of errors because y'all rely on document being present in several places (for dataviz + jsonp), which breaks because react native doesn't have document. In theory this should work because it bypasses dataviz's dependency on document:

import Keen from 'keen-js/src/core'
import addEvent from 'keen-js/src/core/lib/addEvent'

Keen.prototype.addEvent = addEvent

const client = new Keen({
  projectId: 'my project id here',
  writeKey: 'my write key here',
  requestType: 'post'
})

I haven't quite tried it (currently just going the route of using superagent to make a POST directly) because that's a little more monkeypatching than I'm comfortable with.

rgoldiez commented 8 years ago

I'm using keen charts in my RN app by embedding in a WebView. If you're just doing keen queries (not charting w/ their lib) you can do a fetch() in RN and pass the required end point and body to get back a query result.

tbarn commented 8 years ago

Thanks for the note @rgoldiez @vkarpov15!

We are starting a transition over to the new Javascript libraries. Have you had a chance the check them out with React Native?

Tracking: https://github.com/keen/keen-tracking.js Analysis: https://github.com/keen/keen-analysis.js Viz: https://github.com/keen/keen-dataviz.js

HideyaSwider commented 7 years ago

I ran into this problem as well. Tracking is not compatible with React Native for now. It looks like it's designed for web use, ie: referencing document.createElement, or window.document, etc.

@tbarn are you guys working on supporting React Native?

rgoldiez commented 7 years ago

@HideyaBenAbderrahmen - I'm using keen with react native but I'm not doing tracking from my app. Just analysis and visualizations. For tracking, you could always use the react native fetch polypill and post your event data to Keen's rest endpoint.

tbarn commented 7 years ago

@HideyaBenAbderrahmen for right now, my answer is the same as @rgoldiez. We are exploring more React Native support in the future within our libraries, but for right now the Keen API itself should have no issues with using fetch in React Native.

ruckus commented 6 years ago

I, too, had not realized keen-js is not RN compatible and integrated it into my project; then had issues and found this GH Issue.

Fortunately, as @rgoldiez and @tbarn mention above its easy to build our own tracker that uses Keen REST API to post events. Here is some basic code:

'use strict';

import { Platform } from 'react-native';

export default class Analytics {
  static track(event, params) {
    let collection = `mobile.${event}`;
    let headers = {
      'Authorization': KEEN.writeKey,
      'Content-Type': 'application/json'
    };
    let url = `https://api.keen.io/3.0/projects/${KEEN.projectId}/events/${collection}`;
    let d = {
      platform: Platform.OS
    };
    Object.assign(d, params);
    fetch(url, {method:'POST', headers: headers, body: JSON.stringify(d)})
    .then(res => {
      console.log("Keen OK", res);
    })
    .catch(err => {
      console.log("Keen Error", err);
    });
  }
}

Call like

Analytics.track("signins", {meta: "data"});