Google Analytics Integration

Setup Instructions

1. Create a Google Analytics Account

1. Go to the Google Analytics website.
2. Sign in with your Google account or create a new one.
3. Click on Admin in the sidebar.
4. Under the Account column, click Create Account.
   • Fill in your account name and configure the data-sharing settings according to your preference.
5. Under the Property column, click Create Property:
   • Name your property.
   • Select your reporting time zone and currency.
   • Choose GA4 (Google Analytics 4) as the property type.

2. Obtain Your Tracking ID

1. After creating the property, click Web in the property setup options.
2. Enter your website URL and name.
3. Click Create Stream.
4. Copy the Measurement ID (e.g., G-XXXXXXXXXX). This is your tracking ID.

3. Integrate Google Analytics with Your Angular App

3.1. Add Google Analytics in Your App

1. Open main.ts file in backend/src folder.
2. Add the Google Analytics module and tracking ID as shown below:

bootstrapApplication(AppComponent, {
  providers: [
    // some code
    importProvidersFrom(NgxGoogleAnalyticsModule.forRoot('YOUR_TRACKING_ID')) // Replace 'YOUR_TRACKING_ID' with your Measurement ID (e.g., G-XXXXXXXXXX).
    // other code
  ],
}).catch(err => console.error(err));

3. Replace YOUR_TRACKING_ID with the Measurement ID obtained earlier.

3.2. Add Automatic Page View Tracking (Optional)

To track page views automatically, ensure your app uses Angular Router. The ngx-google-analytics module will handle routing events automatically.

3.3. Track Events (Optional)

To track custom events, you can use the NgxGoogleAnalyticsService:

import { Component } from '@angular/core';
import { NgxGoogleAnalyticsService } from 'ngx-google-analytics';
 
@Component({
  selector: 'app-button',
  standalone: true,
  template: `<button (click)="trackEvent()">Click Me</button>`,
})
export class ButtonComponent {
  constructor(private ga: NgxGoogleAnalyticsService) {}
 
  trackEvent() {
    this.ga.event('button_click', 'user_interaction', 'Button clicked');
  }
}

Notes

• Ensure you publish your app's changes to reflect the integration.
• In production, configure any required privacy policies or cookie consent mechanisms for compliance.

Ready to Deploy?

You’re all set! Google Analytics will now start tracking your application’s activity. Refer to your Google Analytics dashboard for real-time and detailed insights.