戰(zhàn)指南)
后端【免費(fèi)下載鏈接】angularfireAngular Firebase ??項(xiàng)目地址https://gitcode.com/gh_mirrors/an/angularfire點(diǎn)擊查看免費(fèi)下載本文面向使用angular/firecompat兼容版本 API 的開發(fā)者講解如何以模塊化方式接入 Google Analytics從動(dòng)態(tài)加載firebase/analytics、注入AngularFireAnalytics調(diào)用事件埋點(diǎn)到利用ScreenTrackingService/UserTrackingService自動(dòng)采集頁面瀏覽與用戶身份信息再到通過CONFIG、DEBUG_MODE、APP_NAME、APP_VERSION、COLLECTION_ENABLED五個(gè) DI Token 精細(xì)化控制采集行為。讀完本文你將能獨(dú)立完成 Analytics 的初始化配置、事件上報(bào)、屏幕追蹤與用戶標(biāo)識(shí)埋點(diǎn)并理解底層 gtag 代理的實(shí)現(xiàn)原理。注意AngularFire 現(xiàn)已提供新的 tree-shakable API見 README本文介紹的是其compat 兼容版本的用法。關(guān)于新舊 API 的差異與遷移可參閱 v7 升級(jí)指南。一、AngularFireAnalytics 是什么AngularFireAnalytics是 compat API 為 Google Analytics 提供的核心服務(wù)類。它動(dòng)態(tài)導(dǎo)入firebase/analytics庫并將 Firebase Analytics SDKfirebase.analytics.Analytics 的方法以 Promise 化promisified的形式暴露給 Angular 應(yīng)用。從源碼結(jié)構(gòu)看analytics.ts 中AngularFireAnalytics類通過?PromiseProxyfirebase.analytics.Analytics接口與?lazySDKProxy機(jī)制實(shí)現(xiàn)懶加載 代理只有在真正調(diào)用其方法時(shí)才會(huì)觸發(fā)import(firebase/compat/analytics)從而避免在應(yīng)用啟動(dòng)時(shí)同步拉取整個(gè) SDK。這一設(shè)計(jì)與 analytics.module.ts 中analytics.app.then(() undefined)的預(yù)觸發(fā)邏輯配合實(shí)現(xiàn)按需加載的同時(shí)保證首次使用即可用。API 總覽class AngularFireAnalytics { updateConfig(options: {[key:string]: any}): Promisevoid; // 來自 firebase.analytics() 代理 logEvent(eventName: string, eventParams?: {[key: string]: any}, options?: analytics.AnalyticsCallOptions): Promisevoid; setCurrentScreen(screenName: string, options?: analytics.AnalyticsCallOptions): Promisevoid; setUserId(id: string, options?: analytics.AnalyticsCallOptions): Promisevoid; setUserProperties(properties: analytics.CustomParams, options?: analytics.AnalyticsCallOptions): Promisevoid; setAnalyticsCollectionEnabled(enabled: boolean): Promisevoid; app: Promiseapp.App; } COLLECTION_ENABLED InjectionTokenboolean; APP_VERSION InjectionTokenstring; APP_NAME InjectionTokenstring; DEBUG_MODE InjectionTokenboolean; CONFIG InjectionTokenConfig;其中updateConfig是 AngularFire 額外提供的方法其余方法均來自 Firebase SDK 的代理。COLLECTION_ENABLED、APP_VERSION、APP_NAME、DEBUG_MODE、CONFIG五個(gè) InjectionToken 的實(shí)際定義位于 analytics.ts對(duì)應(yīng)注入鍵名分別為angularfire2.analytics.analyticsCollectionEnabled、appVersion、appName、debugMode與config。二、快速上手模塊導(dǎo)入與基本埋點(diǎn)1. 導(dǎo)入模塊在你的AppModule中引入AngularFireModule.initializeApp與AngularFireAnalyticsModuleimport { AngularFireAnalyticsModule } from angular/fire/compat/analytics; NgModule({ imports: [ AngularFireModule.initializeApp(environment.firebase), AngularFireAnalyticsModule ] }) export class AppModule { }AngularFireAnalyticsModule會(huì)自動(dòng)動(dòng)態(tài)導(dǎo)入并配置firebase/analytics同時(shí)默認(rèn)自動(dòng)上報(bào)一次page_view事件若想關(guān)閉該行為請(qǐng)參考下文CONFIG配置。2. 在組件中注入并上報(bào)事件將AngularFireAnalytics依賴注入到組件中即可直接調(diào)用 SDK 方法import { AngularFireAnalytics } from angular/fire/compat/analytics; constructor(analytics: AngularFireAnalytics) { analytics.logEvent(custom_event, { ... }); }logEvent支持任意的自定義事件名與事件參數(shù)參數(shù)對(duì)象會(huì)原樣透?jìng)鹘o Firebase。源碼中setUserId、setUserProperties、setCurrentScreen、setAnalyticsCollectionEnabled等方法的代理簽名均可直接使用它們各自返回Promisevoid可結(jié)合async/await使用。從測(cè)試用例 analytics.spec.ts 可以看到AngularFireAnalyticsModule導(dǎo)入后即可通過TestBed.inject(AngularFireAnalytics)獲得實(shí)例其app屬性對(duì)應(yīng) Firebase App 的 Promise始終存在——這保證了懶加載代理在任何時(shí)候都可安全注入。三、自動(dòng)屏幕追蹤ScreenTrackingService手動(dòng)上報(bào)screen_view事件當(dāng)然可行但 AngularFire 提供了ScreenTrackingService它會(huì)自動(dòng)與 Angular Router 集成在路由變化時(shí)向 Firebase 上報(bào)屏幕視圖數(shù)據(jù)。import { AngularFireAnalyticsModule, ScreenTrackingService } from angular/fire/compat/analytics; NgModule({ imports: [ AngularFireModule.initializeApp(environment.firebase), AngularFireAnalyticsModule ], providers: [ ScreenTrackingService ] }) export class AppModule { }AngularFireAnalyticsModule會(huì)在你提供ScreenTrackingService時(shí)自動(dòng)將其初始化見 analytics.module.ts 中構(gòu)造函數(shù)對(duì)Optional() screenTracking的注入。底層實(shí)現(xiàn)位于 screen-tracking.service.ts監(jiān)聽Router的ActivationEnd事件在NgZone外部訂閱以避免不必要的變更檢測(cè)由?screenViewEvent組合出包含screen_name、page_path、screen_class等參數(shù)的屏幕視圖描述該輔助函數(shù)定義于 src/analytics/screen-tracking.service.ts會(huì)同時(shí)生成firebase_screen、firebase_previous_screen、firebase_screen_id等 Firebase 標(biāo)準(zhǔn)字段并對(duì)多 outlet 場(chǎng)景做去重與分組最終調(diào)用analytics.logEvent(screen_view, params)上報(bào)事件。提示若同時(shí)提供了UserTrackingServiceScreenTrackingService會(huì)等待其初始化完成后再上報(bào)以確保屏幕事件帶上正確的用戶上下文。四、自動(dòng)用戶標(biāo)識(shí)UserTrackingService為了豐富 Analytics 數(shù)據(jù)你可以通過setUserId與setUserProperties記錄當(dāng)前登錄用戶。AngularFire 提供的UserTrackingService會(huì)動(dòng)態(tài)導(dǎo)入firebase/auth、監(jiān)聽登錄態(tài)變化并自動(dòng)為你調(diào)用setUserId。import { AngularFireAnalyticsModule, UserTrackingService } from angular/fire/compat/analytics; NgModule({ imports: [ AngularFireModule.initializeApp(environment.firebase), AngularFireAnalyticsModule ], providers: [ UserTrackingService ] }) export class AppModule { }同樣地AngularFireAnalyticsModule會(huì)在提供該服務(wù)時(shí)自動(dòng)初始化它。底層實(shí)現(xiàn)位于 user-tracking.service.ts通過AngularFireAuth的authState訂閱登錄態(tài)變化將user?.uid寫入analytics.setUserId(...)同時(shí)訂閱credential流當(dāng)存在憑據(jù)時(shí)根據(jù)isNewUser判斷上報(bào)sign_up事件并攜帶method如anonymous或各提供商 ID或login事件僅isPlatformBrowser時(shí)執(zhí)行上述邏輯SSR 環(huán)境下直接 resolve 初始化 Promise。這樣登錄/注冊(cè)事件與用戶身份就與你的 Analytics 數(shù)據(jù)自動(dòng)打通無需在業(yè)務(wù)代碼中手動(dòng)埋點(diǎn)。五、依賴注入配置五大 Token 詳解1. 用CONFIG配置 Google AnalyticsCONFIG默認(rèn){}允許你傳入 gtag.js 的配置項(xiàng)。例如跳過初始page_view事件、匿名化 IP、并對(duì)所有事件禁用廣告?zhèn)€性化信號(hào)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 { }從源碼看analytics.ts 中構(gòu)造器會(huì)在初始化完成后調(diào)用this.updateConfig(providedConfig)而updateConfig最終通過window.gtag(config, measurementId, { ...config, update: true })應(yīng)用配置analytics.ts。update: true保證配置以增量方式合并到當(dāng)前會(huì)話。更多可用配置項(xiàng)可查閱 gtag.js 官方文檔。2. 使用 DebugViewDEBUG_MODE要在 Firebase 控制臺(tái)的 Analytics DebugView 中調(diào)試事件將DEBUG_MODE設(shè)為true默認(rèn)falseproviders: [ { provide: DEBUG_MODE, useValue: true } ]底層會(huì)將{ debug_mode: 1 }通過updateConfig注入 gtag見 analytics.ts同時(shí)當(dāng)debugModeEnabled為真時(shí)控制臺(tái)會(huì)打印傳入 gtag 的原始參數(shù)以便排查analytics.ts。3. 追蹤版本采用率APP_NAME與APP_VERSION提供APP_NAME與APP_VERSION默認(rèn)undefined后你可以在 Firebase 控制臺(tái)的最新發(fā)布面板中追蹤 PWA 的版本采用情況providers: [ { provide: APP_NAME, useValue: my-app }, { provide: APP_VERSION, useValue: 1.2.3 } ]實(shí)現(xiàn)上analytics.ts 在每次event命令發(fā)送到當(dāng)前measurementId時(shí)會(huì)向事件參數(shù)中注入app_name與app_version字段從而讓版本數(shù)據(jù)隨每個(gè)事件一并上報(bào)。4. 禁用數(shù)據(jù)采集COLLECTION_ENABLED將COLLECTION_ENABLED默認(rèn)true設(shè)為false即可在當(dāng)前設(shè)備的當(dāng)前應(yīng)用上禁用 Analytics 數(shù)據(jù)采集providers: [ { provide: COLLECTION_ENABLED, useValue: false } ]此時(shí) analytics.ts 會(huì)在獲取 Analytics 實(shí)例后立即調(diào)用analytics.setAnalyticsCollectionEnabled(false)。若之后想重新開啟采集可調(diào)用analytics.setAnalyticsCollectionEnabled(true)。將這些 API 與 Cookie 配合使用即可構(gòu)建一套尊重用戶隱私偏好的靈活采集方案。六、底層原理從代理到 gtag 的完整鏈路結(jié)合 analytics.ts 源碼可以梳理 compat 版 Analytics 的核心運(yùn)行鏈路數(shù)據(jù)層準(zhǔn)備瀏覽器環(huán)境下初始化window.dataLayerL60measurementId 解析由于 Firebase 配置 JSON 中的 measurementId 并不穩(wěn)定AngularFire 通過監(jiān)聽 gtag 的config命令且args[2].origin firebase動(dòng)態(tài)捕獲真實(shí)的測(cè)量 IDL62-L74gtag 代理補(bǔ)丁用patchGtag包裝window.gtag注入app_name/app_version、開啟 DebugView 日志并將參數(shù)壓入dataLayerL76-L107。需要注意的是向 dataLayer 推入?yún)?shù)必須使用普通函數(shù)而非箭頭函數(shù)因?yàn)閍rguments對(duì)象包含索引之外的額外信息箭頭函數(shù)會(huì)導(dǎo)致#2505中Analytics 不再發(fā)送任何數(shù)據(jù)的回歸問題初始化 Promise通過檢測(cè) dataLayer 中是否已有config命令來決定立即 resolve 還是等待 firebase/analytics 完成配置L113-L125懶加載 SDK在NgZone外通過isSupported()檢測(cè)支持性后才動(dòng)態(tài)import(firebase/compat/analytics)并用?cacheInstance緩存實(shí)例L140-L156。這套設(shè)計(jì)讓 Analytics 在 SSR 環(huán)境非瀏覽器平臺(tái)下直接跳過 gtag 交互、僅 resolve 初始化 Promise避免了服務(wù)端副作用L134-L138。七、與 tree-shakable API 的關(guān)系compat API 位于 src/compat/analytics/對(duì)外導(dǎo)出見 public_api.ts對(duì)應(yīng)新的 tree-shakable API 位于 src/analytics/。兩者共享相同的屏幕/用戶追蹤設(shè)計(jì)思路如ScreenTrackingService的?screenViewEvent輔助函數(shù)即定義于新 API 目錄但使用方式不同新 API 采用provideAnalytics(...)環(huán)境提供者與AnalyticsModule按需注冊(cè)analytics.module.ts不再依賴全局firebase.analytics()代理代碼體積更小若你正從 compat 遷移到新 APIv7 升級(jí)指南 中詳細(xì)說明了這次架構(gòu)變化的原因與遷移路徑。八、常見問題與最佳實(shí)踐小結(jié)為何默認(rèn)會(huì)多一次page_view這是firebase/analytics的默認(rèn)行為若你自行通過ScreenTrackingService上報(bào)screen_view可在CONFIG中設(shè)置send_page_view: false以避免重復(fù)計(jì)數(shù)。如何只上報(bào)關(guān)鍵事件無需為每個(gè)交互都建埋點(diǎn)優(yōu)先覆蓋sign_up、login、purchase等高價(jià)值事件參數(shù)保持扁平化盡量使用字符串、數(shù)字等 JSON 可序列化值。隱私合規(guī)怎么做結(jié)合COLLECTION_ENABLED與 Cookie 判斷用戶是否同意采集同意后再調(diào)用setAnalyticsCollectionEnabled(true)開啟。調(diào)試排錯(cuò)用哪個(gè)開關(guān)開啟DEBUG_MODE: true后前往 Firebase 控制臺(tái) DebugView 實(shí)時(shí)查看事件流并留意控制臺(tái)的 gtag 參數(shù)輸出。從模塊導(dǎo)入、組件埋點(diǎn)到自動(dòng)化的屏幕/用戶追蹤再到五個(gè) DI Token 的精細(xì)化控制AngularFireAnalytics讓 Google Analytics 與 Angular 應(yīng)用的集成變得聲明式且可測(cè)試——而了解其 gtag 代理與懶加載機(jī)制能幫助你在遇到上報(bào)異常時(shí)快速定位問題根源。贊分享后端【免費(fèi)下載鏈接】angularfireAngular Firebase ??項(xiàng)目地址https://gitcode.com/gh_mirrors/an/angularfire點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Angular Google Analytics 使用指南Angular Google Analytics 使用指南 項(xiàng)目介紹 Angular Google Analytics 是一個(gè)專門為 Angular 應(yīng)用設(shè)計(jì)的前端Google Analytics Data API v1beta 入門實(shí)戰(zhàn)報(bào)表查詢、指標(biāo)維度與兼容性校驗(yàn)完全指南Google Analytics Data API v1beta 入門實(shí)戰(zhàn)報(bào)表查詢、指標(biāo)維度與兼容性校驗(yàn)完全指南 本文以 skills29/skills 倉庫AI 技能人工智能大模型企業(yè)級(jí)AI集群編排實(shí)戰(zhàn)Exo分布式推理與拓?fù)涓兄渴鹜暾改掀髽I(yè)級(jí)AI集群編排實(shí)戰(zhàn)Exo分布式推理與拓?fù)涓兄渴鹜暾改?Exo是一個(gè)革命性的企業(yè)級(jí)AI集群管理平臺(tái)通過自動(dòng)設(shè)備發(fā)現(xiàn)、RDMA over Thunder人工智能大模型本地部署模型推理服務(wù)分布式訓(xùn)練后端上一篇WarcraftHelper讓經(jīng)典魔獸爭(zhēng)霸3在現(xiàn)代系統(tǒng)上煥發(fā)新生的五大核心技術(shù)下一篇魔獸爭(zhēng)霸III終極優(yōu)化指南三步解決現(xiàn)代系統(tǒng)兼容性問題創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 AngularFire Analytics（兼容 API）入門：Google Analytics 的 Angular 集成實(shí)戰(zhàn)指南
后端【免費(fèi)下載鏈接】angularfireAngular Firebase ??項(xiàng)目地址https://gitcode.com/gh_mirrors/an/angularfire點(diǎn)擊查看免費(fèi)下載本文面向使用angular/firecompat兼容版本 API 的開發(fā)者講解如何以模塊化方式接入 Google Analytics從動(dòng)態(tài)加載firebase/analytics、注入AngularFireAnalytics調(diào)用事件埋點(diǎn)到利用ScreenTrackingService/UserTrackingService自動(dòng)采集頁面瀏覽與用戶身份信息再到通過CONFIG、DEBUG_MODE、APP_NAME、APP_VERSION、COLLECTION_ENABLED五個(gè) DI Token 精細(xì)化控制采集行為。讀完本文你將能獨(dú)立完成 Analytics 的初始化配置、事件上報(bào)、屏幕追蹤與用戶標(biāo)識(shí)埋點(diǎn)并理解底層 gtag 代理的實(shí)現(xiàn)原理。注意AngularFire 現(xiàn)已提供新的 tree-shakable API見 README本文介紹的是其compat 兼容版本的用法。關(guān)于新舊 API 的差異與遷移可參閱 v7 升級(jí)指南。一、AngularFireAnalytics 是什么AngularFireAnalytics是 compat API 為 Google Analytics 提供的核心服務(wù)類。它動(dòng)態(tài)導(dǎo)入firebase/analytics庫并將 Firebase Analytics SDKfirebase.analytics.Analytics 的方法以 Promise 化promisified的形式暴露給 Angular 應(yīng)用。從源碼結(jié)構(gòu)看analytics.ts 中AngularFireAnalytics類通過?PromiseProxyfirebase.analytics.Analytics接口與?lazySDKProxy機(jī)制實(shí)現(xiàn)懶加載 代理只有在真正調(diào)用其方法時(shí)才會(huì)觸發(fā)import(firebase/compat/analytics)從而避免在應(yīng)用啟動(dòng)時(shí)同步拉取整個(gè) SDK。這一設(shè)計(jì)與 analytics.module.ts 中analytics.app.then(() undefined)的預(yù)觸發(fā)邏輯配合實(shí)現(xiàn)按需加載的同時(shí)保證首次使用即可用。API 總覽class AngularFireAnalytics { updateConfig(options: {[key:string]: any}): Promisevoid; // 來自 firebase.analytics() 代理 logEvent(eventName: string, eventParams?: {[key: string]: any}, options?: analytics.AnalyticsCallOptions): Promisevoid; setCurrentScreen(screenName: string, options?: analytics.AnalyticsCallOptions): Promisevoid; setUserId(id: string, options?: analytics.AnalyticsCallOptions): Promisevoid; setUserProperties(properties: analytics.CustomParams, options?: analytics.AnalyticsCallOptions): Promisevoid; setAnalyticsCollectionEnabled(enabled: boolean): Promisevoid; app: Promiseapp.App; } COLLECTION_ENABLED InjectionTokenboolean; APP_VERSION InjectionTokenstring; APP_NAME InjectionTokenstring; DEBUG_MODE InjectionTokenboolean; CONFIG InjectionTokenConfig;其中updateConfig是 AngularFire 額外提供的方法其余方法均來自 Firebase SDK 的代理。COLLECTION_ENABLED、APP_VERSION、APP_NAME、DEBUG_MODE、CONFIG五個(gè) InjectionToken 的實(shí)際定義位于 analytics.ts對(duì)應(yīng)注入鍵名分別為angularfire2.analytics.analyticsCollectionEnabled、appVersion、appName、debugMode與config。二、快速上手模塊導(dǎo)入與基本埋點(diǎn)1. 導(dǎo)入模塊在你的AppModule中引入AngularFireModule.initializeApp與AngularFireAnalyticsModuleimport { AngularFireAnalyticsModule } from angular/fire/compat/analytics; NgModule({ imports: [ AngularFireModule.initializeApp(environment.firebase), AngularFireAnalyticsModule ] }) export class AppModule { }AngularFireAnalyticsModule會(huì)自動(dòng)動(dòng)態(tài)導(dǎo)入并配置firebase/analytics同時(shí)默認(rèn)自動(dòng)上報(bào)一次page_view事件若想關(guān)閉該行為請(qǐng)參考下文CONFIG配置。2. 在組件中注入并上報(bào)事件將AngularFireAnalytics依賴注入到組件中即可直接調(diào)用 SDK 方法import { AngularFireAnalytics } from angular/fire/compat/analytics; constructor(analytics: AngularFireAnalytics) { analytics.logEvent(custom_event, { ... }); }logEvent支持任意的自定義事件名與事件參數(shù)參數(shù)對(duì)象會(huì)原樣透?jìng)鹘o Firebase。源碼中setUserId、setUserProperties、setCurrentScreen、setAnalyticsCollectionEnabled等方法的代理簽名均可直接使用它們各自返回Promisevoid可結(jié)合async/await使用。從測(cè)試用例 analytics.spec.ts 可以看到AngularFireAnalyticsModule導(dǎo)入后即可通過TestBed.inject(AngularFireAnalytics)獲得實(shí)例其app屬性對(duì)應(yīng) Firebase App 的 Promise始終存在——這保證了懶加載代理在任何時(shí)候都可安全注入。三、自動(dòng)屏幕追蹤ScreenTrackingService手動(dòng)上報(bào)screen_view事件當(dāng)然可行但 AngularFire 提供了ScreenTrackingService它會(huì)自動(dòng)與 Angular Router 集成在路由變化時(shí)向 Firebase 上報(bào)屏幕視圖數(shù)據(jù)。import { AngularFireAnalyticsModule, ScreenTrackingService } from angular/fire/compat/analytics; NgModule({ imports: [ AngularFireModule.initializeApp(environment.firebase), AngularFireAnalyticsModule ], providers: [ ScreenTrackingService ] }) export class AppModule { }AngularFireAnalyticsModule會(huì)在你提供ScreenTrackingService時(shí)自動(dòng)將其初始化見 analytics.module.ts 中構(gòu)造函數(shù)對(duì)Optional() screenTracking的注入。底層實(shí)現(xiàn)位于 screen-tracking.service.ts監(jiān)聽Router的ActivationEnd事件在NgZone外部訂閱以避免不必要的變更檢測(cè)由?screenViewEvent組合出包含screen_name、page_path、screen_class等參數(shù)的屏幕視圖描述該輔助函數(shù)定義于 src/analytics/screen-tracking.service.ts會(huì)同時(shí)生成firebase_screen、firebase_previous_screen、firebase_screen_id等 Firebase 標(biāo)準(zhǔn)字段并對(duì)多 outlet 場(chǎng)景做去重與分組最終調(diào)用analytics.logEvent(screen_view, params)上報(bào)事件。提示若同時(shí)提供了UserTrackingServiceScreenTrackingService會(huì)等待其初始化完成后再上報(bào)以確保屏幕事件帶上正確的用戶上下文。四、自動(dòng)用戶標(biāo)識(shí)UserTrackingService為了豐富 Analytics 數(shù)據(jù)你可以通過setUserId與setUserProperties記錄當(dāng)前登錄用戶。AngularFire 提供的UserTrackingService會(huì)動(dòng)態(tài)導(dǎo)入firebase/auth、監(jiān)聽登錄態(tài)變化并自動(dòng)為你調(diào)用setUserId。import { AngularFireAnalyticsModule, UserTrackingService } from angular/fire/compat/analytics; NgModule({ imports: [ AngularFireModule.initializeApp(environment.firebase), AngularFireAnalyticsModule ], providers: [ UserTrackingService ] }) export class AppModule { }同樣地AngularFireAnalyticsModule會(huì)在提供該服務(wù)時(shí)自動(dòng)初始化它。底層實(shí)現(xiàn)位于 user-tracking.service.ts通過AngularFireAuth的authState訂閱登錄態(tài)變化將user?.uid寫入analytics.setUserId(...)同時(shí)訂閱credential流當(dāng)存在憑據(jù)時(shí)根據(jù)isNewUser判斷上報(bào)sign_up事件并攜帶method如anonymous或各提供商 ID或login事件僅isPlatformBrowser時(shí)執(zhí)行上述邏輯SSR 環(huán)境下直接 resolve 初始化 Promise。這樣登錄/注冊(cè)事件與用戶身份就與你的 Analytics 數(shù)據(jù)自動(dòng)打通無需在業(yè)務(wù)代碼中手動(dòng)埋點(diǎn)。五、依賴注入配置五大 Token 詳解1. 用CONFIG配置 Google AnalyticsCONFIG默認(rèn){}允許你傳入 gtag.js 的配置項(xiàng)。例如跳過初始page_view事件、匿名化 IP、并對(duì)所有事件禁用廣告?zhèn)€性化信號(hào)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 { }從源碼看analytics.ts 中構(gòu)造器會(huì)在初始化完成后調(diào)用this.updateConfig(providedConfig)而updateConfig最終通過window.gtag(config, measurementId, { ...config, update: true })應(yīng)用配置analytics.ts。update: true保證配置以增量方式合并到當(dāng)前會(huì)話。更多可用配置項(xiàng)可查閱 gtag.js 官方文檔。2. 使用 DebugViewDEBUG_MODE要在 Firebase 控制臺(tái)的 Analytics DebugView 中調(diào)試事件將DEBUG_MODE設(shè)為true默認(rèn)falseproviders: [ { provide: DEBUG_MODE, useValue: true } ]底層會(huì)將{ debug_mode: 1 }通過updateConfig注入 gtag見 analytics.ts同時(shí)當(dāng)debugModeEnabled為真時(shí)控制臺(tái)會(huì)打印傳入 gtag 的原始參數(shù)以便排查analytics.ts。3. 追蹤版本采用率APP_NAME與APP_VERSION提供APP_NAME與APP_VERSION默認(rèn)undefined后你可以在 Firebase 控制臺(tái)的最新發(fā)布面板中追蹤 PWA 的版本采用情況providers: [ { provide: APP_NAME, useValue: my-app }, { provide: APP_VERSION, useValue: 1.2.3 } ]實(shí)現(xiàn)上analytics.ts 在每次event命令發(fā)送到當(dāng)前measurementId時(shí)會(huì)向事件參數(shù)中注入app_name與app_version字段從而讓版本數(shù)據(jù)隨每個(gè)事件一并上報(bào)。4. 禁用數(shù)據(jù)采集COLLECTION_ENABLED將COLLECTION_ENABLED默認(rèn)true設(shè)為false即可在當(dāng)前設(shè)備的當(dāng)前應(yīng)用上禁用 Analytics 數(shù)據(jù)采集providers: [ { provide: COLLECTION_ENABLED, useValue: false } ]此時(shí) analytics.ts 會(huì)在獲取 Analytics 實(shí)例后立即調(diào)用analytics.setAnalyticsCollectionEnabled(false)。若之后想重新開啟采集可調(diào)用analytics.setAnalyticsCollectionEnabled(true)。將這些 API 與 Cookie 配合使用即可構(gòu)建一套尊重用戶隱私偏好的靈活采集方案。六、底層原理從代理到 gtag 的完整鏈路結(jié)合 analytics.ts 源碼可以梳理 compat 版 Analytics 的核心運(yùn)行鏈路數(shù)據(jù)層準(zhǔn)備瀏覽器環(huán)境下初始化window.dataLayerL60measurementId 解析由于 Firebase 配置 JSON 中的 measurementId 并不穩(wěn)定AngularFire 通過監(jiān)聽 gtag 的config命令且args[2].origin firebase動(dòng)態(tài)捕獲真實(shí)的測(cè)量 IDL62-L74gtag 代理補(bǔ)丁用patchGtag包裝window.gtag注入app_name/app_version、開啟 DebugView 日志并將參數(shù)壓入dataLayerL76-L107。需要注意的是向 dataLayer 推入?yún)?shù)必須使用普通函數(shù)而非箭頭函數(shù)因?yàn)閍rguments對(duì)象包含索引之外的額外信息箭頭函數(shù)會(huì)導(dǎo)致#2505中Analytics 不再發(fā)送任何數(shù)據(jù)的回歸問題初始化 Promise通過檢測(cè) dataLayer 中是否已有config命令來決定立即 resolve 還是等待 firebase/analytics 完成配置L113-L125懶加載 SDK在NgZone外通過isSupported()檢測(cè)支持性后才動(dòng)態(tài)import(firebase/compat/analytics)并用?cacheInstance緩存實(shí)例L140-L156。這套設(shè)計(jì)讓 Analytics 在 SSR 環(huán)境非瀏覽器平臺(tái)下直接跳過 gtag 交互、僅 resolve 初始化 Promise避免了服務(wù)端副作用L134-L138。七、與 tree-shakable API 的關(guān)系compat API 位于 src/compat/analytics/對(duì)外導(dǎo)出見 public_api.ts對(duì)應(yīng)新的 tree-shakable API 位于 src/analytics/。兩者共享相同的屏幕/用戶追蹤設(shè)計(jì)思路如ScreenTrackingService的?screenViewEvent輔助函數(shù)即定義于新 API 目錄但使用方式不同新 API 采用provideAnalytics(...)環(huán)境提供者與AnalyticsModule按需注冊(cè)analytics.module.ts不再依賴全局firebase.analytics()代理代碼體積更小若你正從 compat 遷移到新 APIv7 升級(jí)指南 中詳細(xì)說明了這次架構(gòu)變化的原因與遷移路徑。八、常見問題與最佳實(shí)踐小結(jié)為何默認(rèn)會(huì)多一次page_view這是firebase/analytics的默認(rèn)行為若你自行通過ScreenTrackingService上報(bào)screen_view可在CONFIG中設(shè)置send_page_view: false以避免重復(fù)計(jì)數(shù)。如何只上報(bào)關(guān)鍵事件無需為每個(gè)交互都建埋點(diǎn)優(yōu)先覆蓋sign_up、login、purchase等高價(jià)值事件參數(shù)保持扁平化盡量使用字符串、數(shù)字等 JSON 可序列化值。隱私合規(guī)怎么做結(jié)合COLLECTION_ENABLED與 Cookie 判斷用戶是否同意采集同意后再調(diào)用setAnalyticsCollectionEnabled(true)開啟。調(diào)試排錯(cuò)用哪個(gè)開關(guān)開啟DEBUG_MODE: true后前往 Firebase 控制臺(tái) DebugView 實(shí)時(shí)查看事件流并留意控制臺(tái)的 gtag 參數(shù)輸出。從模塊導(dǎo)入、組件埋點(diǎn)到自動(dòng)化的屏幕/用戶追蹤再到五個(gè) DI Token 的精細(xì)化控制AngularFireAnalytics讓 Google Analytics 與 Angular 應(yīng)用的集成變得聲明式且可測(cè)試——而了解其 gtag 代理與懶加載機(jī)制能幫助你在遇到上報(bào)異常時(shí)快速定位問題根源。贊分享后端【免費(fèi)下載鏈接】angularfireAngular Firebase ??項(xiàng)目地址https://gitcode.com/gh_mirrors/an/angularfire點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Angular Google Analytics 使用指南Angular Google Analytics 使用指南 項(xiàng)目介紹 Angular Google Analytics 是一個(gè)專門為 Angular 應(yīng)用設(shè)計(jì)的前端Google Analytics Data API v1beta 入門實(shí)戰(zhàn)報(bào)表查詢、指標(biāo)維度與兼容性校驗(yàn)完全指南Google Analytics Data API v1beta 入門實(shí)戰(zhàn)報(bào)表查詢、指標(biāo)維度與兼容性校驗(yàn)完全指南 本文以 skills29/skills 倉庫AI 技能人工智能大模型企業(yè)級(jí)AI集群編排實(shí)戰(zhàn)Exo分布式推理與拓?fù)涓兄渴鹜暾改掀髽I(yè)級(jí)AI集群編排實(shí)戰(zhàn)Exo分布式推理與拓?fù)涓兄渴鹜暾改?Exo是一個(gè)革命性的企業(yè)級(jí)AI集群管理平臺(tái)通過自動(dòng)設(shè)備發(fā)現(xiàn)、RDMA over Thunder人工智能大模型本地部署模型推理服務(wù)分布式訓(xùn)練后端上一篇WarcraftHelper讓經(jīng)典魔獸爭(zhēng)霸3在現(xiàn)代系統(tǒng)上煥發(fā)新生的五大核心技術(shù)下一篇魔獸爭(zhēng)霸III終極優(yōu)化指南三步解決現(xiàn)代系統(tǒng)兼容性問題創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考