ScreenTrackingService and UserTrackingService not triggering events in Angular 19

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:

"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:

@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:

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:

@NgModule({
  imports: [
    CommonModule,
    SampleRoutingModule
  ]
})
export class SampleModule { }

Here is the SampleRoutingModule:

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:

<a routerLink="samples">{{ 'samples' | translate }}</a>
<a routerLink="/samples/create">{{ 'create a sample' | translate }}</a>

Here is my app.config.ts file:

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:

    { provide: ScreenTrackingService },
    { provide: UserTrackingService },

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

    { 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.

This issue does not seem to follow the issue template. Make sure you provide all the required information.

For me, it's worse. I can't see the device in the Firebase console (DebugView) for debugging.

I thought I'd add a console.log.

{
  providers: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAnalytics(() => {
      const analytics = getAnalytics();
      console.log("ANALYTICS!!!!", analytics)
      return analytics;
    }),
    ScreenTrackingService,
    UserTrackingService,
  ]
}

The log doesn't appear. It turns out that even the provideAnalytics callback function isn't executed, which is why I can't even debug.

ng version

Angular CLI: 19.2.5
Node: 22.14.0
Package Manager: npm 11.2.0
OS: darwin arm64

Angular: 19.2.4
... animations, common, compiler, compiler-cli, core, elements
... forms, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.5
@angular-devkit/build-angular   19.2.5
@angular-devkit/core            19.2.5
@angular-devkit/schematics      19.2.5
@angular/cdk                    19.2.7
@angular/cli                    19.2.5
@angular/fire                   19.0.0
@angular/material               19.2.7
@angular/ssr                    19.2.5
@schematics/angular             19.2.5
rxjs                            7.8.2
typescript                      5.8.2

@dzylich

This issue does not seem to follow the issue template. Make sure you provide all the required information.

@dzylich be aware of this

@hittten

This issue does not seem to follow the issue template. Make sure you provide all the required information.

@dzylich be aware of this

Thanks @hittten, I copy and pasted the issue template from the docs provided in the repo, so I'm not sure what else I could do. Any suggestion is welcome!

@dzylich

Thanks @dzylich for opening the issue.

While the docs mention that one should simply inject the Analytics service, this is not enough as it will not instanciate and thus initialize ScreenTrackingService.

A workaround is to import the providers from AnalyticsModule: providers: [importProvidersFrom(AnalyticsModule)]
This will implicitly call the module's constructor, which forces the instanciation of ScreenTrackingService and Analytics:

angularfire/src/analytics/analytics.module.ts

Lines 60 to 65 in ec4e3bd

    
           constructor( 
        
             @Optional() _screenTrackingService: ScreenTrackingService, 
        
             @Optional() _userTrackingService: UserTrackingService, 
        
           ) { 
        
             registerVersion('angularfire', VERSION.full, 'analytics'); 
        
           }

IMHO, ideally, @angular/fire should rely on explicit initialization combined with provideAppInitializer instead of the constructor.
e.g.:

export function provideScreenTracking(): EnvironmentProviders {
  return makeEnvironmentProviders([
    ScreenTrackingService,
    provideAppInitializer(() => inject(ScreenTrackingService).init()) // `ScreenTrackingService#init` is just an example of the initialization logic
  ]);
}

Hope this helps, happy tracking! 👀

Navigation Menu

Repository navigation

ScreenTrackingService and UserTrackingService not triggering events in Angular 19 #3633

Overview of the Issue

Angular Version

Motivation for or Use Case

Browsers and Operating System

Reproduce the Error

Suggest a Fix

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	constructor(
	@Optional() _screenTrackingService: ScreenTrackingService,
	@Optional() _userTrackingService: UserTrackingService,
	) {
	registerVersion('angularfire', VERSION.full, 'analytics');
	}

ScreenTrackingService and UserTrackingService not triggering events in Angular 19 #3633

Description

Overview of the Issue

Angular Version

Motivation for or Use Case

Browsers and Operating System

Reproduce the Error

Suggest a Fix

Activity

google-oss-bot commented on Mar 4, 2025

hittten commented on Apr 2, 2025

hittten commented on Apr 2, 2025

dzylich commented on Apr 3, 2025

yjaaidi commented on Apr 21, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions