Add analytics to the web build (close #233) (#385)

* Add analytics to the web build (close #233)

* Use bsky endpoint for analytics

package.json

@@ -40,6 +40,8 @@
     "@react-navigation/drawer": "^6.6.2",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
+    "@segment/analytics-next": "^1.51.3",
+    "@segment/analytics-react": "^1.0.0-rc1",
     "@segment/analytics-react-native": "^2.10.1",
     "@segment/sovran-react-native": "^0.4.5",
     "@tiptap/core": "^2.0.0-beta.220",

src/App.web.tsx

@@ -2,6 +2,7 @@ import React, {useState, useEffect} from 'react'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import * as view from './view/index'
+import * as analytics from 'lib/analytics'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
 import {Shell} from './view/shell/index'
 import {ToastContainer} from './view/com/util/Toast.web'
@@ -16,6 +17,7 @@ function App() {
     view.setup()
     setupState().then(store => {
       setRootStore(store)
+      analytics.init(store)
     })
   }, [])
 
@@ -26,12 +28,14 @@ function App() {
 
   return (
     <RootSiblingParent>
-      <RootStoreProvider value={rootStore}>
-        <SafeAreaProvider>
-          <Shell />
-        </SafeAreaProvider>
-        <ToastContainer />
-      </RootStoreProvider>
+      <analytics.Provider>
+        <RootStoreProvider value={rootStore}>
+          <SafeAreaProvider>
+            <Shell />
+          </SafeAreaProvider>
+          <ToastContainer />
+        </RootStoreProvider>
+      </analytics.Provider>
     </RootSiblingParent>
   )
 }

src/lib/analytics.web.tsx

@@ -1,19 +1,29 @@
-// TODO
 import React from 'react'
+import {createClient, AnalyticsProvider} from '@segment/analytics-react'
 import {RootStoreModel} from 'state/models/root-store'
 
-const _analytics = {
-  screen(_name: string) {},
-  track(_name: string, _opts: any) {},
-  identify(_userId: string, _userTraits: any) {},
-}
-export const track = _analytics.track
-export function useAnalytics() {
-  return _analytics
-}
+const segmentClient = createClient(
+  {
+    writeKey: '8I6DsgfiSLuoONyaunGoiQM7A6y2ybdI',
+  },
+  {
+    integrations: {
+      'Segment.io': {
+        apiHost: 'api.evt.bsky.app/v1',
+      },
+    },
+  },
+)
+export const track = segmentClient?.track?.bind?.(segmentClient)
 
-export function init(_store: RootStoreModel) {}
+export {useAnalytics} from '@segment/analytics-react'
+
+export function init(_store: RootStoreModel) {
+  // no init needed on web
+}
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  return children
+  return (
+    <AnalyticsProvider client={segmentClient}>{children}</AnalyticsProvider>
+  )
 }