angular / angular/angularfire

ScreenTrackingService and UserTrackingService not triggering events in Angular 19

Offen
#3,633 5 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
7.8k
Forks
2.2k
Ø Merge
22 Std. 28 Min.
Gemergte PRs (30 T.)
6

Beschreibung

### Overview of the Issue
Using Angular 19 and AngularFire 19, the ScreenTrackingService and UserTrackingService do not trigger events.

### Angular Version
Here is a section of my package.json:
```json
"dependencies": {
"@angular/animations": "^19.0.0",
"@angular/cdk": "^19.1.2",
"@angular/common": "^19.0.0",
"@angular/compiler": "^19.0.0",
"@angular/core": "^19.0.0",
"@angular/fire": "^19.0.0",
"@angular/forms": "^19.0.0",
"@angular/platform-browser": "^19.0.0",
"@angular/platform-browser-dynamic": "^19.0.0",
"@angular/router": "^19.0.0",
"@ngrx/signals": "^19.0.0",
"@ngrx/store": "^19.0.0",
"@ngrx/store-devtools": "^19.0.0",
"@ngx-translate/core": "^16.0.4",
"@ngx-translate/http-loader": "^16.0.1",
"@tailwindcss/postcss": "^4.0.0",
"lodash": "^4.17.21",
"postcss": "^8.5.1",
"rxjs": "~7.8.0",
"tailwindcss": "^4.0.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"
},
```

### Motivation for or Use Case
These services are supposed to automatically log router and firebase authentication events. When I use the logEvent function from the analytics package, events are logged, but I do not see any events logged from ScreenTrackingService and UserTrackingService

### Browsers and Operating System
I am using Chrome Version 133.0.6943.142 (Official Build) (64-bit) on Windows 10

### Reproduce the Error
On the DebugView in the Firebase Console, I can see the page_view event for the initial page load.

When I click links to routes around my app, or when I login and logout, I do not see any events.

Here is a component where I am manually triggering an event, and I can see the event in the DebugView:

```ts
@Component({
selector: 'app-home',
imports: [CommonModule, SharedModule, TranslateModule, RouterModule],
templateUrl: './home.component.html',
styleUrl: './home.component.css'
})
export class HomeComponent {
readonly analytics = inject(Analytics);

chooseSample(sample: { name: string, words: string[] }) {
logEvent(this.analytics, 'select_item', {
items: [{ item_name: sample.name }],
item_list_name: 'Samples',
item_list_id: 'samples'
});
}
}
```

Here is my app.routes.ts file:

```ts
export const routes: Routes = [
{
path: '',
loadComponent: () => import('./home/home.component').then(c => c.HomeComponent)
},
{
path: 'samples',
loadChildren: () => import('./samples/sample.module').then(c => c.SampleModule)
},
];
```

Here is the sample.module file:
```ts
@NgModule({
imports: [
CommonModule,
SampleRoutingModule
]
})
export class SampleModule { }
```

Here is the SampleRoutingModule:

```ts
const routes: Routes = [
{
path: '',
component: ListComponent
},
{
path: 'create',
component: CreateComponent
},
{
path: 'view/:id',
component: ViewComponent
},
{
path: 'edit/:id',
component: EditComponent
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SampleRoutingModule { }
```

On the HomeComponent, I link to the various pages in the SampleModule like this:

```html
{{ 'samples' | translate }}
{{ 'create a sample' | translate }}
```

Here is my app.config.ts file:

```ts
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideHttpClient(),
importProvidersFrom([TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: httpLoaderFactory,
deps: [HttpClient],
},
})]),
provideRouter(routes, withInMemoryScrolling({ anchorScrolling: 'enabled'})),
provideStore({}),
provideStoreDevtools({ maxAge: 25, logOnly: environment.production, trace: true, traceLimit: 50 }),
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
const auth = getAuth();
if (!environment.production) {
connectAuthEmulator(auth, 'http://192.168.1.104:9099', { disableWarnings: true });
}
return auth;
}),
provideAnalytics(() => getAnalytics()),
ScreenTrackingService,
UserTrackingService,
provideAppCheck(() => {
if (!environment.production) {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
const provider = new ReCaptchaEnterpriseProvider(environment.reCaptchaSiteKey);
return initializeAppCheck(undefined, { provider, isTokenAutoRefreshEnabled: true });
}),
provideFirestore(() => {
const firestore = getFirestore();
if (!environment.production) {
connectFirestoreEmulator(firestore, '192.168.1.104', 8080);
}
return firestore;
}),
provideFunctions(() => {
const functions = getFunctions();
if (!environment.production) {
connectFunctionsEmulator(functions, '192.168.1.104', 5001);
}
return functions;
})
]
};
```

I also tried these configs in the app config and the result was the same:

```ts
{ provide: ScreenTrackingService },
{ provide: UserTrackingService },
```

```ts
{ provide: ScreenTrackingService, useClass: ScreenTrackingService },
{ provide: UserTrackingService, useClass: UserTrackingService },
```

```ts
{ provide: ScreenTrackingService, useExisting: ScreenTrackingService },
{ provide: UserTrackingService, useExisting: UserTrackingService },
```

### Suggest a Fix
When I run the Google Analytics Debugger, I can see events logging in the console from the logEvent function call in the HomeComponent. When I click various router links, I do not see any logs in the console. When I log in and out (using firebase auth signInWithPopup), I don't see any logs.

I added some debugger breakpoints in the ScreenTrackingService and UserTrackingService. The breakpoints at the top of the file are hit, so the file is loading. But the breakpoints in the constructors and ɵscreenViewEvent function are not hit at all.

It seems like the ScreenTrackingService and UserTrackingService are not getting constructed, called, or instantiated.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit app.config.ts sowie den Einstiegspunkten ScreenTrackingService und UserTrackingService und bilde anschließend die Navigation aus app.routes.ts sowie die Authentifizierungsänderungen mit signInWithPopup nach. Prüfe, warum die Service-Konstruktoren und ɵscreenViewEvent nicht erreicht werden. Als erledigt gilt die Aufgabe, wenn Routenänderungen und Anmelden/Abmelden die erwarteten Ereignisse in Firebase DebugView erzeugen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, firebase, typescript
Bereich
analytics, authentication, frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.