TP-39844 google analytics

App.tsx

@@ -1,35 +1,35 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   AppState,
-  KeyboardAvoidingView,
   LogBox,
-  Permission,
+  type Permission,
   PermissionsAndroid,
   Platform,
   StatusBar,
 } from 'react-native';
 import { Provider } from 'react-redux';
 import { init as initApm } from '@cobo/apm-rum-react-native';
-import store, { persistor } from './src/store/store';
 import { PersistGate } from 'redux-persist/integration/react';
-
 import { NavigationContainer } from '@react-navigation/native';
+import * as Sentry from '@sentry/react-native';
+import codePush from 'react-native-code-push';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import CodePush from 'react-native-code-push';
+import analytics from '@react-native-firebase/analytics';
+import store, { persistor } from './src/store/store';
+
 import { navigationRef } from './src/components/utlis/navigationUtlis';
 import FullScreenLoader from './RN-UI-LIB/src/components/FullScreenLoader';
 import { toastConfigs, ToastContainer } from './RN-UI-LIB/src/components/toast';
 
-import * as Sentry from '@sentry/react-native';
 import { APM_APP_NAME, APM_BASE_URL, ENV, SENTRY_DSN } from './src/constants/config';
 import { COLORS } from './RN-UI-LIB/src/styles/colors';
-import codePush from 'react-native-code-push';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import { LocalStorageKeys, PermissionsToCheck } from './src/common/Constants';
 import Permissions from './src/screens/permissions/Permissions';
 import { setJsErrorHandler } from './src/services/exception-handler.service';
 import SuspenseLoader from './RN-UI-LIB/src/components/suspense_loader/SuspenseLoader';
 import ErrorBoundary from './src/common/ErrorBoundary';
-import CodePush from 'react-native-code-push';
-import { TDocumentObj } from './src/screens/caseDetails/interface';
+import { type TDocumentObj } from './src/screens/caseDetails/interface';
 import AuthRouter from './src/screens/auth/AuthRouter';
 import { initSentry } from './src/components/utlis/sentry';
 
@@ -77,9 +77,11 @@ const askForPermissions = async (setPermissions: React.Dispatch<React.SetStateAc
   }
 };
 
-const App = () => {
+function App() {
   const [permissions, setPermissions] = React.useState(true);
   const [isGlobalDocumentMapLoaded, setIsGlobalDocumentMapLoaded] = React.useState(false);
+  const routeNameRef = React.useRef(null);
+  const [routeName, setRouteName] = useState('Unknown');
 
   initApm({
     serviceName: APM_APP_NAME,
@@ -108,10 +110,65 @@ const App = () => {
     };
   }, []);
 
+  const handleOnNavigationStateChange = async () => {
+    const previousRouteName = routeNameRef.current;
+    const currentRouteName = navigationRef.current.getCurrentRoute().name;
+    if (previousRouteName !== currentRouteName) {
+      await analytics().logScreenView({
+        screen_name: currentRouteName,
+        screen_class: currentRouteName,
+      });
+      // For funnel creation
+      await analytics().logEvent('screen_view', {
+        screen_name: currentRouteName,
+        screen_class: currentRouteName,
+      });
+    }
+    routeNameRef.current = currentRouteName;
+    return null;
+  };
+
+  const getActiveRouteName = (state) => {
+    if (!state || typeof state.index !== 'number') {
+      return 'Unknown';
+    }
+    const route = state.routes[state.index];
+    if (route.state) {
+      return getActiveRouteName(route.state);
+    }
+    return route.name;
+  };
+
   return (
     <Provider store={store}>
       <PersistGate loading={<FullScreenLoader loading />} persistor={persistor}>
-        <NavigationContainer ref={navigationRef}>
+        <NavigationContainer
+          ref={navigationRef}
+          onStateChange={async (state) => {
+            const currentRouteName = getActiveRouteName(state);
+            console.log('get route name', currentRouteName, routeName);
+            if (routeName !== currentRouteName) {
+              analytics()
+                .logScreenView({
+                  screen_name: currentRouteName,
+                  screen_class: currentRouteName,
+                })
+                .then((res) => {
+                  console.log('response from analytics', res);
+                })
+                .catch((err) => {
+                  console.log('error from analytics', err);
+                });
+
+              await analytics().logEvent('screen_view', {
+                screen_name: currentRouteName,
+                screen_class: currentRouteName,
+              });
+
+              setRouteName(currentRouteName);
+            }
+          }}
+        >
           <StatusBar backgroundColor={COLORS.BACKGROUND.INDIGO_DARK} />
           <SuspenseLoader
             fallBack={<FullScreenLoader loading />}
@@ -125,7 +182,7 @@ const App = () => {
       </PersistGate>
     </Provider>
   );
-};
+}
 
 const AppWithSentry = Sentry.wrap(App);
 

android/app/build.gradle

@@ -267,6 +267,8 @@ dependencies {
 
     //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:+"  // From node_modules
+    implementation project(path: ":@react-native-firebase_analytics")
+
 
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
 
@@ -326,3 +328,4 @@ def isNewArchitectureEnabled() {
     return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
 }
 apply plugin: 'com.google.gms.google-services'
+

android/app/google-services.json

@@ -9,7 +9,7 @@
       "client_info": {
         "mobilesdk_app_id": "1:60755663443:android:988149d3da3c00d38584a6",
         "android_client_info": {
-          "package_name": "com.avapp"
+          "package_name": "com.avapp.qa"
         }
       },
       "oauth_client": [

android/app/src/main/java/com/avapp/MainApplication.java

@@ -15,6 +15,8 @@ import java.util.List;
 import com.microsoft.codepush.react.CodePush;
 import android.database.CursorWindow;
 import java.lang.reflect.Field;
+import io.invertase.firebase.analytics.ReactNativeFirebaseAnalyticsPackage;
+
 
 public class MainApplication extends Application implements ReactApplication {
 
@@ -32,6 +34,7 @@ public class MainApplication extends Application implements ReactApplication {
           // Packages that cannot be autolinked yet can be added manually here, for example:
           // packages.add(new MyReactNativePackage());
             packages.add(new DeviceUtilsModulePackage());
+            //packages.add(new ReactNativeFirebaseAnalyticsPackage());
           return packages;
         }
 

android/settings.gradle

@@ -2,6 +2,8 @@ rootProject.name = 'AVAPP'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app', ':react-native-code-push'
 include ':react-native-version-number'
+include ':@react-native-firebase_analytics'
+
 includeBuild('../node_modules/react-native-gradle-plugin')
 
 if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
@@ -12,4 +14,6 @@ if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true")
 }
 project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
 
-project(':react-native-version-number').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-version-number/android')
+project(':react-native-version-number').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-version-number/android')
+
+project(':@react-native-firebase_analytics').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-firebase/analytics/android')

package.json

@@ -30,6 +30,7 @@
     "@react-native-async-storage/async-storage": "1.17.11",
     "@react-native-clipboard/clipboard": "^1.11.2",
     "@react-native-community/netinfo": "9.3.7",
+    "@react-native-firebase/analytics": "16.4.6",
     "@react-native-firebase/app": "16.4.6",
     "@react-native-firebase/auth": "16.5.0",
     "@react-native-firebase/crashlytics": "16.5.0",

yarn.lock

@@ -1603,6 +1603,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-9.3.7.tgz#92407f679f00bae005c785a9284e61d63e292b34"
   integrity sha512-+taWmE5WpBp0uS6kf+bouCx/sn89G9EpR4s2M/ReLvctVIFL2Qh8WnWfBxqK9qwgmFha/uqjSr2Gq03OOtiDcw==
 
+"@react-native-firebase/analytics@16.4.6":
+  version "16.4.6"
+  resolved "https://registry.yarnpkg.com/@react-native-firebase/analytics/-/analytics-16.4.6.tgz#833b871014de49091cc3f50f98dbc1920b346097"
+  integrity sha512-Gp6kD3RCIy3f9u0pQgGfp5jGwNwLLxo2blsXbTsj/yHOE4g+leH/wojPPENs1yc2g6OMhzGYbO19/beCP6bIng==
+
 "@react-native-firebase/app@16.4.6":
   version "16.4.6"
   resolved "https://registry.yarnpkg.com/@react-native-firebase/app/-/app-16.4.6.tgz#929a86894b401352259e21d4cb4dab1d37de2bc7"
@@ -3399,7 +3404,7 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-dayjs@1.11.9:
+dayjs@^1.11.9:
   version "1.11.9"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.9.tgz#9ca491933fadd0a60a2c19f6c237c03517d71d1a"
   integrity sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==