invertase / react-native-firebase

🔥 A well-tested feature-rich modular Firebase implementation for React Native. Supports both iOS & Android platforms for all Firebase services.
https://rnfirebase.io
Other
11.71k stars 2.22k forks source link

[🐛] tracking page not set issue #6266

Closed Stackerr closed 2 years ago

Stackerr commented 2 years ago

Issue

Describe your issue here

hello, I installed and implement google analytics on react-native app. and receive logScreenEvent. we check page-name but all page name on the table is (not set)
so we can't check what page is renewal.

previous i checked all page-name are only UIViewController, and Activity, and (not set) i guess that problem is automatic reporting paramter set default true. so I changed that parameter is false, and also add AndroidManifest.xml to code

is it complete to set up for tracking page ?

image

Project Files

Javascript

Click To Expand

#### `package.json`: ```json # N/A ``` #### `firebase.json` for react-native-firebase v6: ```json # N/A ```

iOS

Click To Expand

#### `ios/Podfile`: - [ ] I'm not using Pods - [x] I'm using Pods and my Podfile looks like: ```ruby # N/A ``` #### `AppDelegate.m`: ```objc // N/A ```


Android

Click To Expand

#### Have you converted to AndroidX? - [ ] my application is an AndroidX application? - [ ] I am using `android/gradle.settings` `jetifier=true` for Android compatibility? - [ ] I am using the NPM package `jetifier` for react-native compatibility? #### `android/build.gradle`: ```groovy // N/A ``` #### `android/app/build.gradle`: ```groovy // N/A ``` #### `android/settings.gradle`: ```groovy // N/A ``` #### `MainApplication.java`: ```java // N/A ``` #### `AndroidManifest.xml`: ```xml ```


Environment

Click To Expand

**`react-native info` output:** ``` OUTPUT GOES HERE ``` - **Platform that you're experiencing the issue on**: - [ ] iOS - [ ] Android - [ ] **iOS** but have not tested behavior on Android - [ ] **Android** but have not tested behavior on iOS - [ ] Both - **`react-native-firebase` version you're using that has this issue:** - `e.g. 5.4.3` - **`Firebase` module(s) you're using that has the issue:** - `e.g. Instance ID` - **Are you using `TypeScript`?** - `Y/N` & `VERSION`


mikehardy commented 2 years ago

Hi there! react-native does not use multiple activities or views like a more traditional native app, so automated screen tracking does not work that way. The activity (android) and view (ios) truly are just one, for every react-native screen.

What you want is to hook in to your navigation library and use the libraries page transition hooks to log events, most of them have guides, for instance:

https://reactnavigation.org/docs/screen-tracking

Stackerr commented 2 years ago

HI, I checked screen-tracking and already we adjust it in. but we still find (not set) but page-name or class how can I do for this?

and I confuse about why above horizontal bar chart give information about number of viewing customer given period but below page doesn't separate pages and only available for checking is (not set)

if I miss about of this. please how to solve this.

mikehardy commented 2 years ago

I use it, it works for me. Not sure why it's not working for you, sorry.


        <NavigationContainer
          // This allows us to navigate from anywhere, statically
          ref={(navigator) => NavigationService.setTopLevelNavigator(navigator)}
          onReady={() => {
            currentRoute = NavigationService.getCurrentRoute();
            // Send our initial analytics hit now that the navigator is ready
            if (currentRoute) {
              // console.log(`RootView::render - initial analytics hit with ${currentRoute.name}`);
              Analytics.analyticsScreen(currentRoute.name);
              Analytics.analyticsEvent(currentRoute.name);
            }

            NavigationService.performPendingNavigation();
          }}
          // This allows us to track screens in analytics
          onStateChange={async () => {
            // console.log(
            //   `RootView::NavigationContainer::onStateChange currentState ${JSON.stringify(
            //     currentState
            //   )}`
            // );

            // Update our state to match the perhaps-newly shuffled screens
            previousRoute = currentRoute;
            currentRoute = NavigationService.getCurrentRoute();
            const prevScreen = previousRoute?.name;
            const currentScreen = currentRoute?.name;

            if (prevScreen && currentScreen && prevScreen !== currentScreen) {
              Analytics.analyticsScreen(currentScreen);
              Analytics.analyticsEvent(currentScreen);
            }
            if (!prevScreen) {
              Analytics.analyticsScreen('errorUndefinedPrevScreen');
            }
            if (!currentScreen) {
              Analytics.analyticsScreen('errorUndefinedCurrentScreen');
            }

I see (not set) in the report, but over last 12 months it is at zero.

Stackerr commented 2 years ago

hello, mikehardy I have a question about your code about screen-view

are you embed your code above react-native-app default root? example app function

I appreciated your reply, thank you

mikehardy commented 2 years ago

I'm not sure I completely understand, but in my app, that file is basically in App.js (or it could be), and it is the first and only thing inside the outermost view in my app. It holds all the other views (and does their navigation / routing for them)

Ong26 commented 2 years ago

Hi @Stackerr , did you solve this issue?