import * as i0 from '@angular/core'; import { OnInit, OnChanges, SimpleChanges, InjectionToken, ModuleWithProviders } from '@angular/core'; import { Mark } from '@ama-sdk/core'; import { Observable } from 'rxjs'; import * as _ngrx_store from '@ngrx/store'; import { ActionReducer, Action, ReducerTypes, ActionCreator } from '@ngrx/store'; import { Serializer } from '@o3r/core'; /** * Category */ interface Category { /** Primary category */ primaryCategory: string; /** Sub category */ subCategory?: string; } /** * The event information */ interface EventInfo { /** Event key */ key?: string; /** Event name */ eventName: string; /** Page id */ pageId?: string; /** Timestamp */ timeStamp?: string; /** Product id */ productId?: string; /** Component id */ componentId?: string; } /** * An event attribute */ interface Attribute { /** Attribute key */ key: string; /** Attribute value */ value: string; /** Attribute to defined if it is a sensitive data or not */ isSensitiveData?: boolean; } /** * The event context */ interface EventContext { /** Category */ category?: Category; /** Event information */ eventInfo: EventInfo; /** List of attribute */ attributes?: Attribute[]; } /** * Generic analytics event */ interface AnalyticsEvent extends EventContext { } /** * Generic model for the parameter of `ConstructorAnalyticsEvent` */ interface ConstructorAnalyticsEventParameters { [key: string]: any; } /** * Type for AnalyticsEvent classes */ type ConstructorAnalyticsEvent = new (parameters?: ConstructorAnalyticsEventParameters) => T; /** * Dictionary of analytics events */ interface AnalyticsEvents { [key: string]: ConstructorAnalyticsEvent; } /** * Trackable item */ interface Trackable { /** * Analytics events */ readonly analyticsEvents: T; } /** The UI event object which will be emitted by event tracker service */ interface UiEventPayload { /** The event which takes place in the DOM */ nativeEvent: Event; /** The custom object with additional information about the event captured */ context: EventContext; } /** The custom event object which will be emitted by event tracker service */ interface CustomEventPayload { /** The custom object with additional information about the event captured */ context: EventContext; } /** The event name which has to be tracked */ type TrackEventName = keyof GlobalEventHandlersEventMap; /** * Event timing marks * Those marks are meant to be used either as start and end of an event (e.g. a server call) * either as lower and upper bound for a specific mark (e.g. first paint) */ interface EventTiming { /** Timestamp of the start of an event or lower bound for a time mark */ startTime: number; /** Timestamp of the end of an event or upper bound for a time mark */ endTime?: number; } /** Perceived events marks */ interface PerceivedEvents { /** * Mark the time from the navigation start until the loading indicator triggers * {@link https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint|FP} */ FP?: EventTiming; /** * Marks the time when the page appears to be meaningfully complete * This is essentially the paint after which the biggest above-the-fold layout change has happened, and web fonts have loaded. * {@link https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint|FMP} */ FMP?: EventTiming; /** Marks the time when the page considers it has all the data to become interactive */ dataReady?: EventTiming; } /** Network metrics for a server call */ interface ServerCallMetric { /** Request url */ url: string; /** Http request method */ httpMethod?: string; /** Time taken for a server call; Start time when the call has fired and end time when the call has finished */ timing: EventTiming; /** Custom error object added for a request; ex. An error object when the network is down */ error?: Error; /** Status code of the response */ httpStatus?: number; /** Size of the response in bytes */ responseSize?: number; /** If available, it identifies the call with the server logs (e.g. ama-request-id for DxAPI calls) */ requestId?: string; } /** Custom mark event added on a page */ interface CustomEventMarks { /** Name of the metric needed */ label: string; /** Time range taken for the added mark */ timing: EventTiming; } /** Object structure for first load of the app */ interface FirstLoadDataPayload { /** Time between navigation is triggered and the connection is opened to the network in ms */ connection: number; /** Time between the connection is opened to the network (connectEnd) and the first byte of response is received (responseStart) in ms */ request: number; /** The duration while the response is received in ms; from the first byte from response received to the last one */ response: number; /** DOM loading. Time between browser resources received and DOM rendered in ms */ DOM: number; /** The total page load time in ms */ total: number; } /** The performance event object which will be emitted by event tracker service for a page */ interface PerfEventPayload { /** The page name (route or page code or naming convention) where the performance events are tracked */ page: string; /** Marks for perceived events */ perceived: PerceivedEvents; /** Marks for the first load of the app */ firstLoad?: FirstLoadDataPayload; /** Server calls in the page, excluding the resources calls */ serverCalls: ServerCallMetric[]; /** Custom marks added to the page */ customMarks: CustomEventMarks[]; } declare abstract class BaseTrackEvents { private readonly el; private readonly trackEventsService; private readonly renderer; /** * Custom object to be stored when the click event is captured */ abstract trackEventContext?: EventContext; /** * Class to create the EventContext */ abstract trackEventContextConstructor?: ConstructorAnalyticsEvent; /** * Parameter that should be given to the */ abstract trackEventContextConstructorParameters?: ConstructorAnalyticsEventParameters; /** * Store the functions returned by the angular renderer when an event listener is built * The functions can be called to destroy the associated listeners */ protected unlistenFns: (() => void)[]; /** Array of track events objects */ protected trackingEvents: TrackEventName[]; /** Flag for the tracking mode */ protected isTrackingActive: boolean; constructor(); /** * Create the listener for the given event * @param event name */ protected nativeListen(event: TrackEventName): () => void; /** Create the events listeners */ listen(): void; /** Remove the created events listeners */ unlisten(): void; /** * Keep the events to be listen and create the listener event for the given event name * @param event name */ trackEvent(event: TrackEventName): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Directive to capture the 'click' event on the reference element. * The captured event will be exposed via EventTrackService * @example * ```html * * * ``` */ declare class TrackClickDirective extends BaseTrackEvents implements OnInit { /** * @inheritdoc */ trackEventContext?: EventContext; /** * @inheritdoc */ trackEventContextConstructor?: ConstructorAnalyticsEvent; /** * @inheritdoc */ trackEventContextConstructorParameters?: ConstructorAnalyticsEventParameters; ngOnInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Directive to capture the events given as input, on the reference element. * The captured event will be exposed via EventTrackService * @example * ```html * * * ``` */ declare class TrackEventsDirective extends BaseTrackEvents implements OnChanges { /** * @inheritdoc */ trackEventContext?: EventContext; /** * @inheritdoc */ trackEventContextConstructor?: ConstructorAnalyticsEvent; /** * @inheritdoc */ trackEventContextConstructorParameters?: ConstructorAnalyticsEventParameters; /** The list of events to listen */ trackEventNames: TrackEventName[]; ngOnChanges(changes: SimpleChanges): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Directive to capture the 'focus' event on the reference element. * The captured event will be exposed via EventTrackService * @example * ```html * * * ``` */ declare class TrackFocusDirective extends BaseTrackEvents implements OnInit { /** * @inheritdoc */ trackEventContext?: EventContext; /** * @inheritdoc */ trackEventContextConstructor?: ConstructorAnalyticsEvent; /** * @inheritdoc */ trackEventContextConstructorParameters?: ConstructorAnalyticsEventParameters; ngOnInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** Controls the activation of mesurements and ui events tracking */ interface TrackActive { /** Boolean to activate/deactivate the ui event tracking */ uiTracking: boolean; /** Boolean to activate/deactivate performace measurements */ perfTracking: boolean; } /** Track events service configuration object */ interface EventTrackConfiguration { /** Defines how many values will be kept in performance metrics stream */ perfBufferSize: number; /** Defines how many values will be kept in ui events stream */ uiEventsBufferSize: number; /** If true, it will use the browser API to get the value of the FP for the first time; */ useBrowserApiForFirstFP: boolean; /** Controls the activation of mesurements and ui events tracking */ activate: TrackActive; /** * Request ID header from call (default: {@link defaultEventTrackConfiguration.requestIdHeader}) * @default 'ama-request-id' */ requestIdHeader: string; /** * Trace header from call (default: {@link defaultEventTrackConfiguration.traceHeader}) * @default 'traceparent' */ traceHeader: string; } /** Default configuration of tracking service */ declare const defaultEventTrackConfiguration: { readonly perfBufferSize: 10; readonly uiEventsBufferSize: 20; readonly useBrowserApiForFirstFP: false; readonly requestIdHeader: "ama-request-id"; readonly traceHeader: "traceparent"; readonly activate: { readonly uiTracking: true; readonly perfTracking: true; }; }; /** Tracking service configuration token used to override the default configuration */ declare const EVENT_TRACK_SERVICE_CONFIGURATION: InjectionToken>; /** * Check if input is of type {@link PerformanceNavigationTiming} * @param entry PerformanceEntry * @returns type indicator if {@link entry} meets the condition of {@link PerformanceNavigationTiming} */ declare function isPerformanceNavigationEntry(entry: PerformanceEntry | undefined): entry is PerformanceNavigationTiming; /** The initial value of the performance measurements */ declare const performanceMarksInitialState: Readonly; /** * Service to expose the tracked events as streams. Also provide a way to activate/deactivate the tracking */ declare class EventTrackService { private readonly uiEventTrack; private readonly customEventTrack; private readonly perfEventTrack; private readonly uiTrackingActivated; private readonly perfTrackingActivated; private firstPaint?; /** UI captured events as stream */ uiEventTrack$: Observable; /** Custom captured events as stream */ customEventTrack$: Observable; /** Performance captured events as stream */ perfEventTrack$: Observable; /** Stream of booleans for the ui tracking mode active/inactive */ uiTrackingActive$: Observable; /** Stream of booleans for the performance tracking mode active/inactive */ perfTrackingActive$: Observable; /** True if the perf tracking is activated; false otherwise */ private isPerfTrackingActive; /** Boolean to indicate the first load of the application */ private isFirstLoad; private _performancePayload; /** Performance payload object */ private get performancePayload(); /** Performance payload object */ private set performancePayload(value); private readonly requestIdHeader; private readonly traceHeader; private readonly router; private readonly zone; private readonly config; constructor(); /** * Create metrics object for the first load of the application */ private createFirstLoadData; /** * Populate performance payload with FP object * @param FP */ private addFPToPerfPayload; /** * Reset all metrics to initial state; Add the pageName on top of it */ resetPerfMarks(): void; /** * Mark the first load metrics using the navigation API. * This has to be called only once in a single page application, being meaningful only for the first load * This mark is populated by default in this service when the NavigationEnd event of the router emits for the first time */ markFirstLoad(): void; /** * Mark the first paint value * Store the first paint timing value to be emitted at Navigation End * @param emit If true, sets the FP to the current page. Otherwise, wait for next NavigationEnd event to happen */ markFP(emit?: boolean): Promise; /** * Mark the first meaningful paint value. * @param markOnlyFirstLoad If false, marks the FMP for subsequent loads else only for the first load of the application */ markFMP(markOnlyFirstLoad?: boolean): Promise; /** * Add data ready perceived event * This probe marks the time when the page considers it has all the data to become interactive */ markDataReady(): Promise; /** * Add a custom event and its measurements * @param label The event name */ addCustomMark(label: string): Promise; /** * Add a server call object in the list of server calls metrics * @param serverCall The object to add in the server calls metrics */ addServerCallMark(serverCall: ServerCallMetric): void; /** * Add a SDK server call mark, in the list of server calls metrics. * In order to have requestId for the API calls, your server has to expose 'ama-request-id' via Access-Control-Expose-Headers * @param serverMark The mark object */ addSDKServerCallMark(serverMark: Mark): Promise; /** * Add a custom event and mark the start time, and returns the element index * @param label Event name * @returns the element index if tracking is active. Otherwise, -1 */ startCustomMark(label: string): number; /** * End the event mark given in parameter; * Returns false if the custom event is not found in the list of custom marks; true otherwise * @param eventIndex Index of the custom event to be marked as ended */ endCustomMark(eventIndex: number): boolean; /** * The goal of this method is to compute a time range duration between the moment you call the function (lower bound timestamp) * and the end of the composite rendering (upper bound measurement - a time mark that occurs after the real composite) * For the first load of the application, the start time is considered as the start of navigation to ensure a cumulative measure. * It is using the 'NgZone' service to runOutsideAngular to prevent any change detection to occur, nor angular error handling, speeding up the measurement. * Example {@link markFMP} is called in {@link ngAfterViewInit}, the end time will be computed once the render pipeline stage completed the changes triggered by the javascript */ getTiming(): Promise; /** * Add an event to the stream of captured UI events * @param uiEvent emitted event object */ addUiEvent(uiEvent: UiEventPayload): void; /** * Add an event to the stream of captured custom events * @param customEvent emitted event object */ addCustomEvent(customEvent: CustomEventPayload): void; /** * Activate/deactivate the tracking mode for UI events * @param activate activation/deactivation boolean */ toggleUiTracking(activate: boolean): void; /** * Activate/deactivate the tracking mode for performance measurements * @param activate activation/deactivation boolean */ togglePerfTracking(activate: boolean): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * The interface for Hero component, which determines the Time To Interactive (TTI) for a page * It follows a Tree data structure, with the root node as the Page and the hero components as * its children. Each child can have its own hero components. The TTI for the page * would be computed using a bottom-up approach starting from the children at the bottom (leaf nodes). */ interface HeroComponent extends RegisterHeroComponentPayload { /** The Time To Interactive(TTI) measure for the component */ TTI: number; /** * Boolean to indicate if the TTI for the component * has been explicitly measured and logged */ hasBeenLogged?: boolean; /** * List of API endpoints used in the Hero component and it's subcomponents * These are the API's invoked when the TTI is measured */ involvedApiEndpoints?: string[]; /** * Actual TTI measure of the component, * doesn't change upon it's children Max TTI value */ componentTTI?: number; } /** The interface for the register hero component payload, which is used to register a hero component and its children */ interface RegisterHeroComponentPayload { /** The identifier of the hero component */ id: string; /** * Boolean to indicate if the TTI computation should take into account * the TTI of the component itself in addition to that of its child components */ measureSelf?: boolean; /** The identifiers of the children hero components */ children?: HeroComponent[]; } /** * EventTrack store state */ interface EventTrackState { /** The hero component for computing TTI */ heroComponent: HeroComponent; /** * Boolean to indicate the completion of TTI computation * TTI for a hero component is considered to be computed * only when the TTI of all its children have been computed * eg: for a component A having B and C as children, this value * is set only when TTI for all A, B and C have been set */ isTTIComputed: boolean; } /** * Name of the EventTrack Store */ declare const EVENT_TRACK_STORE_NAME = "eventTrack"; /** * EventTrack Store Interface */ interface EventTrackStore { /** EventTrack state */ [EVENT_TRACK_STORE_NAME]: EventTrackState; } /** * The payload for setting TTI for a hero component */ interface SetHeroComponentTTIPayload { /** * The identifier of the hero component */ id: string; /** * The TTI measure for the hero component */ TTI: number; /** * List of API endpoints used in the Hero component and it's subcomponents * These are the API's invoked when the TTI is measured */ involvedApiEndpoints?: string[]; } /** * Clear the current store object and replace it with the new one */ declare const setEventTrack: _ngrx_store.ActionCreator<"[EventTrack] set", (props: { model: EventTrackState; }) => { model: EventTrackState; } & _ngrx_store.Action<"[EventTrack] set">>; /** * Change a part or the whole object in the store. */ declare const updateEventTrack: _ngrx_store.ActionCreator<"[EventTrack] update", (props: Partial<{ model: EventTrackState; }>) => Partial<{ model: EventTrackState; }> & _ngrx_store.Action<"[EventTrack] update">>; /** * Clear the whole state, return to the initial one */ declare const resetEventTrack: _ngrx_store.ActionCreator<"[EventTrack] reset", () => _ngrx_store.Action<"[EventTrack] reset">>; /** * Register hero component in the store */ declare const registerHeroComponent: _ngrx_store.ActionCreator<"[EventTrack] register hero component", (props: { model: RegisterHeroComponentPayload; }) => { model: RegisterHeroComponentPayload; } & _ngrx_store.Action<"[EventTrack] register hero component">>; /** * Set the TTI measure for a hero component in the store */ declare const setHeroComponentTTI: _ngrx_store.ActionCreator<"[EventTrack] set hero component TTI", (props: { model: SetHeroComponentTTIPayload; }) => { model: SetHeroComponentTTIPayload; } & _ngrx_store.Action<"[EventTrack] set hero component TTI">>; /** Token of the EventTrack reducer */ declare const EVENT_TRACK_REDUCER_TOKEN: InjectionToken>>; /** Provide default reducer for EventTrack store */ declare function getDefaultEventTrackReducer(): ActionReducer>; declare class EventTrackStoreModule { static forRoot(reducerFactory: () => ActionReducer): ModuleWithProviders; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** The initial value of the Hero component */ declare const heroComponentInitialState: HeroComponent; /** * eventTrack initial state */ declare const eventTrackInitialState: EventTrackState; /** * List of basic actions for EventTrack */ declare const eventTrackReducerFeatures: ReducerTypes[]; /** * EventTrack Store default reducer */ declare const eventTrackReducer: _ngrx_store.ActionReducer>; /** Select EventTrack State */ declare const selectEventTrackState: _ngrx_store.MemoizedSelector>; /** Select hero component status */ declare const selectHeroComponentStatus: _ngrx_store.MemoizedSelector number | undefined>; declare const eventTrackStorageSync: Readonly>; export { EVENT_TRACK_REDUCER_TOKEN, EVENT_TRACK_SERVICE_CONFIGURATION, EVENT_TRACK_STORE_NAME, EventTrackService, EventTrackStoreModule, TrackClickDirective, TrackEventsDirective, TrackFocusDirective, defaultEventTrackConfiguration, eventTrackInitialState, eventTrackReducer, eventTrackReducerFeatures, eventTrackStorageSync, getDefaultEventTrackReducer, heroComponentInitialState, isPerformanceNavigationEntry, performanceMarksInitialState, registerHeroComponent, resetEventTrack, selectEventTrackState, selectHeroComponentStatus, setEventTrack, setHeroComponentTTI, updateEventTrack }; export type { AnalyticsEvent, AnalyticsEvents, Attribute, Category, ConstructorAnalyticsEvent, ConstructorAnalyticsEventParameters, CustomEventMarks, CustomEventPayload, EventContext, EventInfo, EventTiming, EventTrackConfiguration, EventTrackState, EventTrackStore, FirstLoadDataPayload, HeroComponent, PerceivedEvents, PerfEventPayload, RegisterHeroComponentPayload, ServerCallMetric, SetHeroComponentTTIPayload, TrackActive, TrackEventName, Trackable, UiEventPayload }; //# sourceMappingURL=o3r-analytics.d.ts.map