Deployed the page to Github Pages.

This commit is contained in:
Batuhan Berk Başoğlu 2024-11-03 21:30:09 -05:00
parent 1d79754e93
commit 2c89899458
Signed by: batuhan-basoglu
SSH key fingerprint: SHA256:kEsnuHX+qbwhxSAXPUQ4ox535wFHu/hIRaa53FzxRpo
62797 changed files with 6551425 additions and 15279 deletions

View file

@ -0,0 +1,137 @@
# Getting started with Google Analytics
`AngularFireAnalytics` dynamically imports the `firebase/analytics` library and provides a promisified version of the [Firebase Analytics SDK (`firebase.analytics.Analytics`)](https://firebase.google.com/docs/reference/js/firebase.analytics.Analytics.html).
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
### API:
```ts
class AngularFireAnalytics {
updateConfig(options: {[key:string]: any}): Promise<void>;
// from firebase.analytics() proxy:
logEvent(eventName: string, eventParams?: {[key: string]: any}, options?: analytics.AnalyticsCallOptions): Promise<void>;
setCurrentScreen(screenName: string, options?: analytics.AnalyticsCallOptions): Promise<void>;
setUserId(id: string, options?: analytics.AnalyticsCallOptions): Promise<void>;
setUserProperties(properties: analytics.CustomParams, options?: analytics.AnalyticsCallOptions): Promise<void>;
setAnalyticsCollectionEnabled(enabled: boolean): Promise<void>;
app: Promise<app.App>;
}
COLLECTION_ENABLED = InjectionToken<boolean>;
APP_VERSION = InjectionToken<string>;
APP_NAME = InjectionToken<string>;
DEBUG_MODE = InjectionToken<boolean>;
CONFIG = InjectionToken<Config>;
```
### Usage:
```ts
import { AngularFireAnalyticsModule } from '@angular/fire/compat/analytics';
@NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebase),
AngularFireAnalyticsModule
]
})
export class AppModule { }
```
`AngularFireAnalyticsModule` will dynamically import and configure `firebase/analytics`. A `page_view` event will automatically be logged (see `CONFIG` below if you wish to disable this behavior.)
In your component you can then dependency inject `AngularFireAnalytics` and make calls against the SDK:
```ts
import { AngularFireAnalytics } from '@angular/fire/compat/analytics';
constructor(analytics: AngularFireAnalytics) {
analytics.logEvent('custom_event', { ... });
}
```
## Tracking Screen Views
You can log [`screen_view` events](https://firebase.google.com/docs/reference/js/firebase.analytics.Analytics.html#parameters_10) yourself of course, but AngularFire provides the `ScreenTrackingService` which automatically integrates with the Angular Router to provide Firebase with screen view tracking. You simply can integrate like so:
```ts
import { AngularFireAnalyticsModule, ScreenTrackingService } from '@angular/fire/compat/analytics';
@NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebase),
AngularFireAnalyticsModule
],
providers: [
ScreenTrackingService
]
})
export class AppModule { }
```
`AngularFireAnalyticsModule` will initialize `ScreenTrackingService` if it is provided.
## Tracking User Identifiers
To enrich your Analytics data you can track the currently signed in user by setting [`setuserid`](https://firebase.google.com/docs/reference/js/firebase.analytics.Analytics.html#setuserid) and [`setUserProperties`](https://firebase.google.com/docs/reference/js/firebase.analytics.Analytics.html#set-user-properties). AngularFire provides a `UserTrackingService` which will dynamically import `firebase/auth`, monitor for changes in the logged in user, and call `setuserid` for you automatically.
```ts
import { AngularFireAnalyticsModule, UserTrackingService } from '@angular/fire/compat/analytics';
@NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebase),
AngularFireAnalyticsModule
],
providers: [
UserTrackingService
]
})
export class AppModule { }
```
`AngularFireAnalyticsModule` will initialize `UserTrackingService` if it is provided.
## Configuration with Dependency Injection
### Configure Google Analtyics with `CONFIG`
Using the `CONFIG` DI Token (*default: {}*) will allow you to configure Google Analytics. E.g, you could skip sending the initial `page_view` event, anonymize IP addresses, and disallow ads personalization signals for all events like so:
```ts
import { AngularFireAnalyticsModule, CONFIG } from '@angular/fire/compat/analytics';
@NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebase),
AngularFireAnalyticsModule
],
providers: [
{ provide: CONFIG, useValue: {
send_page_view: false,
allow_ad_personalization_signals: false,
anonymize_ip: true
} }
]
})
export class AppModule { }
```
See the gtag.js documentation to learn of the different configuration options at your disposal.
### Use DebugView `DEBUG_MODE`
To use [DebugView in Analytics](https://console.firebase.google.com/project/_/analytics/debugview) set `DEBUG_MODE` to `true` (*default: false*).
### Track deployments with `APP_NAME` and `APP_VERSION`
If you provide `APP_NAME` and `APP_VERSION` (*default: undefined*) you will be able to [track version adoption](https://console.firebase.google.com/project/_/analytics/latestrelease) of your PWA.
### Disable analytics collection via `COLLECTION_ENABLED`
If you set `COLLECTION_ENABLED` (*default: true*) to `false` then analytics collection will be disabled for this app on this device. To opt back in to analytics collection you could then call `setAnalyticsCollectionEnabled(true)`.
Putting these APIs to use with cookies would allow you to create a flexible analytics collection scheme that would respect your user's desire for privacy.