How to integrate Google Analytics in Angular 16 standalone components without app.module.ts

Other Questions Google Analytics
1

I’m working with an Angular 16 project that uses standalone components instead of the traditional module structure. I need to add Google Analytics tracking to my application but I’m running into issues.

I tried using the ngx-google-analytics package and attempted to add NgxGoogleAnalyticsModule to the providers array in my main.ts file (similar to how I handle other imports that would normally go in app.module.ts). However, this approach gives me a TypeScript error:

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { NgxGoogleAnalyticsModule } from 'ngx-google-analytics';

bootstrapApplication(AppComponent, {
  providers: [
    NgxGoogleAnalyticsModule.forRoot('GA_TRACKING_ID') // This causes the error
  ]
});

The error message states: Type 'ModuleWithProviders' is not assignable to type 'Provider | EnvironmentProviders'

What’s the correct approach for setting up Google Analytics in Angular 16 apps that don’t use traditional modules? Are there better packages or methods specifically designed for standalone component architecture?

2

Both solutions work, but there’s a cleaner approach. Skip the manual gtag calls and configuration - automate the whole Google Analytics integration instead.

I built a workflow that handles everything: page views, user events, custom conversions across all my Angular apps. It sets up gtag, injects tracking code, and manages different environments (dev, staging, prod) without touching code.

The workflow watches route changes in your standalone components and sends data to GA4 automatically. No importing gtag in every component or missing tracking calls when you add pages.

Bonus: I set it up to pull analytics data back and create automated reports. So I get tracking AND insights with zero manual integration code.

This scales way better than hardcoding gtag calls. When Google updates their API or you want other analytics tools, just update the automation instead of hunting through component files.

3

Skip the module compatibility headaches and go with gtag directly - it works great with standalone components. Install with npm install gtag @types/gtag, then add the Google Analytics script tags to your index.html. In main.ts, import gtag and configure it before bootstrapping: import { gtag } from 'gtag'; gtag('config', 'YOUR_GA_ID'); After that, you can inject gtag into any component for custom tracking. I’ve used this setup since switching to standalone components last year - way more reliable than trying to force older Angular packages to work with the new architecture. Plus you get all the latest GA4 features without waiting for third-party updates.

4

I faced a similar challenge transitioning to standalone components with Angular 16. The issue arises because NgxGoogleAnalyticsModule.forRoot() returns a ModuleWithProviders, which isn’t compatible with the new provider system. Instead, I opted for the official @google-analytics/gtag package. Begin by installing it using npm install gtag, then configure it directly in your main.ts file. Import gtag and set it up like this: gtag(‘config’, ‘YOUR_GA_TRACKING_ID’); After that, bootstrap your application with the necessary providers. To enhance your setup, create an injectable service that wraps gtag calls, giving you finer control and reducing reliance on third-party libraries that may not be updated for standalone architecture. This approach has been running smoothly in production for several months.