No data is displayed in DebugView for web

[shinji1985]

Describe the bug I tried to implement firebase analytics in my ionic capacitor app. Its working in iOS without any problem. But when i debug for web, no data is displayed in DebugView even though i enable chrome extension for debug. Is it possible to display web analytics data in DebugView?

To Reproduce

1. Setup firebase analytics in reference to https://devdactic.com/firebase-analytics-ionic/
2. Run ionic serve
3. Enable chrome extension - Google Analytics Debugger -
4. Reload browser

Screenshots No data is displayed in DebugView in firebase.

Ionic Info:

Ionic:

   Ionic CLI                     : 6.13.1
   Ionic Framework               : @ionic/angular 5.5.3
   @angular-devkit/build-angular : 0.1100.7
   @angular-devkit/schematics    : 11.0.7
   @angular/cli                  : 11.0.7
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.6
   @capacitor/core : 2.4.6

Utility:

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run (update available: 1.3.0)   : 1.0.0

System:

   NodeJS : v14.4.0
   npm    : 7.7.6
   OS     : macOS Big Sur

Package.json:

 "dependencies": {
    "@angular/common": "~11.0.5",
    "@angular/core": "~11.0.5",
    "@angular/forms": "~11.0.5",
    "@angular/platform-browser": "~11.0.5",
    "@angular/platform-browser-dynamic": "~11.0.5",
    "@angular/router": "~11.0.5",
    "@capacitor-community/camera-preview": "^2.0.0-beta.0",
    "@capacitor-community/firebase-analytics": "^0.2.1",
    "@capacitor/android": "^2.4.6",
    "@capacitor/core": "2.4.6",
    "@capacitor/ios": "^2.4.6",
    "@ionic-native/badge": "^5.31.1",
    "@ionic-native/location-accuracy": "^5.31.1",
    "@ionic-native/open-native-settings": "^5.31.1",
    "@ionic/angular": "^5.5.2",
    "@ionic/pwa-elements": "^3.0.2",
    "@ionic/storage": "^2.3.1",
    "cordova-open-native-settings": "^1.5.3",
    "cordova-plugin-badge": "^0.8.8",
    "cordova-plugin-request-location-accuracy": "^2.3.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.5",
    "@angular/cli": "~11.0.5",
    "@angular/compiler": "~11.0.5",
    "@angular/compiler-cli": "~11.0.5",
    "@angular/language-service": "~11.0.5",
    "@capacitor/cli": "2.4.6",
    "@ionic/angular-toolkit": "^2.3.3",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "^4.0.5"
  },

[brownoxford]

Hello @shinji1985, it would be helpful to see the parts of your code where you initialize firebase so that I can try and reproduce this issue in a test environment. Also, can you please make sure that you are not running any kind of network ad blocker locally (e.g., pi-hole) that might prevent your app from communicating analytics traffic with Firebase.

[shinji1985]

@brownoxford Thank you for your reply. I just made a project to test only web behavior from scratch and pushed code to GitHub. https://github.com/shinji1985/firebase-analytics-web-test NOTE: before running the app, need to specify firebaseConfig in https://github.com/shinji1985/firebase-analytics-web-test/blob/master/src/environments/environment.ts NOTE: I referred the code in https://devdactic.com/firebase-analytics-ionic/

Its still not working for web debug view. I checked ad-blocker disabled. Thank you for your help.

this is ionic info of the new project

Ionic:

   Ionic CLI                     : 6.13.1 
   Ionic Framework               : @ionic/angular 5.6.3
   @angular-devkit/build-angular : 0.1102.7
   @angular-devkit/schematics    : 11.2.7
   @angular/cli                  : 11.2.7
   @ionic/angular-toolkit        : 3.1.1

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run (update available: 1.3.0)   : 1.0.0

System:

   NodeJS : v14.4.0
   npm    : 7.7.6
   OS     : macOS Big Sur

[brownoxford]

@shinji1985 I was able to get this working locally using the repository you provided, thank you for that! The trick is that not only do you have to install the GA debugger chrome extension, you also have to explicitly turn it on by clicking on it in the extension list available from the icon in the top-right of your browser window.

When enabled, it should say "ON" as in the following screenshot:

I will keep this open for now, as it seems that better documentation is appropriate for this.

[shinji1985]

@brownoxford Thank you for your investigation. I rechecked behavior again. Absolutely I turn the GA debugger on like this.

It seems that something data is sent to firebase like this.

But no data is still displayed in firebase analytics.

I rechecked firebaseConfig also.

Anyway, I found the app https://github.com/shinji1985/firebase-analytics-web-test worked correctly in your environment. so i think there is something wrong in my environment. Do you know there is any other reason?

[shinji1985]

I tried to make another project - google analytics, firebase, ionic project - from scratch again. but no data is still displayed in debug view for web...

[brownoxford]

Are you certain that the firebase analytics debug view you are looking at in your browser is the same one configured in the ionic app? Based on your console image it does look like the debugger is working and data is being sent to google, so I'm not sure why it would not be showing up.

[shinji1985]

Thank you for considering the reason. I will check it more carefully.

[karen1au]

hey @shinji1985 , I'm having the same issue except in my Chrome debugger it said Not Connected instead of debugger not found. I'm using Capacitor 2.4.7 and 0.3.1 for this plugin. Did you get to resolve your issue?

[gasci]

For me the web analytics doesn't work at all :)