feat: add preset event _page_load (#40)

Co-authored-by: xiaoweii <xiaoweii@amazom.com>

Author: zhu-xiaowei

README.md

@@ -156,6 +156,7 @@ ClickstreamAnalytics.init({
    isTrackClickEvents: true,
    isTrackSearchEvents: true,
    isTrackScrollEvents: true,
+   isTrackPageLoadEvents: true,
    pageType: PageType.SPA,
    isLogEvents: false,
    authCookie: "your auth cookie",
@@ -170,13 +171,14 @@ Here is an explanation of each property:
 - **appId (Required)**: the app id of your project in control plane.
 - **endpoint (Required)**: the endpoint path you will upload the event to AWS server.
 - **sendMode**: EventMode.Immediate, EventMode.Batch, default is Immediate mode.
-- **sendEventsInterval**: event sending interval millisecond, works only bath send mode, the default value is `5000`
+- **sendEventsInterval**: event sending interval millisecond, works only bath send mode, the default value is `5000`
 - **isTrackPageViewEvents**: whether auto record page view events in browser, default is `true`
 - **isTrackUserEngagementEvents**: whether auto record user engagement events in browser, default is `true`
 - **isTrackClickEvents**: whether auto record link click events in browser, default is `true`
 - **isTrackSearchEvents**: whether auto record search result page events in browser, default is `true`
 - **isTrackScrollEvents**: whether auto record page scroll events in browser, default is `true`
-- **pageType**: the website type, `SPA` for single page application, `multiPageApp` for multiple page application, default is `SPA`. This attribute works only when the attribute `isTrackPageViewEvents`'s value is `true`.
+- **isTrackPageLoadEvents**: whether auto record page load performance events in browser, default is `false`
+- **pageType**: the website type, `SPA` for single page application, `multiPageApp` for multiple page application, default is `SPA`. This attribute works only when the attribute `isTrackPageViewEvents`'s value is `true`
 - **isLogEvents**: whether to print out event json for debugging, default is false.
 - **authCookie**: your auth cookie for AWS application load balancer auth cookie.
 - **sessionTimeoutDuration**: the duration for session timeout millisecond, default is 1800000
@@ -197,6 +199,7 @@ ClickstreamAnalytics.updateConfigure({
   isTrackClickEvents: false,
   isTrackScrollEvents: false,
   isTrackSearchEvents: false,
+  isTrackPageLoadEvents: false,
 });
 ```
 

jest.config.ts

@@ -15,4 +15,5 @@ module.exports = {
 	testMatch: ['**/*.test.ts'],
 	moduleFileExtensions: ['ts', 'js'],
 	testEnvironment: 'jsdom',
+	coveragePathIgnorePatterns: ['test'],
 };

src/provider/ClickstreamProvider.ts

@@ -20,6 +20,7 @@ import { EventRecorder } from './EventRecorder';
 import { BrowserInfo } from '../browser';
 import { PageViewTracker, SessionTracker } from '../tracker';
 import { ClickTracker } from '../tracker/ClickTracker';
+import { PageLoadTracker } from '../tracker/PageLoadTracker';
 import { ScrollTracker } from '../tracker/ScrollTracker';
 import {
 	AnalyticsEvent,
@@ -47,6 +48,7 @@ export class ClickstreamProvider implements AnalyticsProvider {
 	pageViewTracker: PageViewTracker;
 	clickTracker: ClickTracker;
 	scrollTracker: ScrollTracker;
+	pageLoadTracker: PageLoadTracker;
 
 	constructor() {
 		this.configuration = {
@@ -59,6 +61,7 @@ export class ClickstreamProvider implements AnalyticsProvider {
 			isTrackClickEvents: true,
 			isTrackSearchEvents: true,
 			isTrackScrollEvents: true,
+			isTrackPageLoadEvents: false,
 			pageType: PageType.SPA,
 			isLogEvents: false,
 			sessionTimeoutDuration: 1800000,
@@ -86,10 +89,12 @@ export class ClickstreamProvider implements AnalyticsProvider {
 		this.pageViewTracker = new PageViewTracker(this, this.context);
 		this.clickTracker = new ClickTracker(this, this.context);
 		this.scrollTracker = new ScrollTracker(this, this.context);
+		this.pageLoadTracker = new PageLoadTracker(this, this.context);
 		this.sessionTracker.setUp();
 		this.pageViewTracker.setUp();
 		this.clickTracker.setUp();
 		this.scrollTracker.setUp();
+		this.pageLoadTracker.setUp();
 		if (configuration.sendMode === SendMode.Batch) {
 			this.startTimer();
 		}

src/provider/Event.ts

@@ -70,6 +70,43 @@ export class Event {
 		OUTBOUND: '_outbound',
 		SEARCH_KEY: '_search_key',
 		SEARCH_TERM: '_search_term',
+		TIMING_ATTRIBUTES: [
+			'duration',
+			'deliveryType',
+			'nextHopProtocol',
+			'renderBlockingStatus',
+			'startTime',
+			'redirectStart',
+			'redirectEnd',
+			'workerStart',
+			'fetchStart',
+			'domainLookupStart',
+			'domainLookupEnd',
+			'connectStart',
+			'secureConnectionStart',
+			'connectEnd',
+			'requestStart',
+			'firstInterimResponseStart',
+			'responseStart',
+			'responseEnd',
+			'transferSize',
+			'encodedBodySize',
+			'decodedBodySize',
+			'responseStatus',
+			'unloadEventStart',
+			'unloadEventEnd',
+			'domInteractive',
+			'domContentLoadedEventStart',
+			'domContentLoadedEventEnd',
+			'domComplete',
+			'loadEventStart',
+			'loadEventEnd',
+			'type',
+			'redirectCount',
+			'activationStart',
+			'criticalCHRestart',
+			'serverTiming',
+		],
 	};
 
 	static readonly PresetEvent = {
@@ -84,6 +121,7 @@ export class Event {
 		CLICK: '_click',
 		SEARCH: '_search',
 		SCROLL: '_scroll',
+		PAGE_LOAD: '_page_load',
 	};
 
 	static readonly Constants = {

src/provider/EventRecorder.ts

@@ -35,10 +35,7 @@ export class EventRecorder {
 	record(event: AnalyticsEvent, isImmediate = false) {
 		if (this.context.configuration.isLogEvents) {
 			logger.level = LOG_TYPE.DEBUG;
-			logger.debug(
-				`Logged event ${event.event_type}, event attributes:\n
-				${JSON.stringify(event)}`
-			);
+			logger.debug(`Logged event ${event.event_type}\n`, event);
 		}
 		const currentMode = this.context.configuration.sendMode;
 		if (currentMode === SendMode.Immediate || isImmediate) {

src/tracker/PageLoadTracker.ts

@@ -0,0 +1,67 @@
+/**
+ *  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance
+ *  with the License. A copy of the License is located at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  or in the 'license' file accompanying this file. This file is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES
+ *  OR CONDITIONS OF ANY KIND, express or implied. See the License for the specific language governing permissions
+ *  and limitations under the License.
+ */
+
+import { BaseTracker } from './BaseTracker';
+import { Event } from '../provider';
+import { ClickstreamAttribute } from '../types';
+
+export class PageLoadTracker extends BaseTracker {
+	observer: PerformanceObserver;
+
+	init() {
+		this.trackPageLoad = this.trackPageLoad.bind(this);
+		if (this.isSupportedEnv()) {
+			this.observer = new PerformanceObserver(() => {
+				this.trackPageLoad();
+			});
+			this.observer.observe({ entryTypes: ['navigation'] });
+		}
+		if (this.isPageLoaded()) {
+			this.trackPageLoad();
+		}
+	}
+
+	trackPageLoad() {
+		if (!this.context.configuration.isTrackPageLoadEvents) return;
+		const performanceEntries = performance.getEntriesByType('navigation');
+		if (performanceEntries && performanceEntries.length > 0) {
+			const latestPerformance =
+				performanceEntries[performanceEntries.length - 1];
+			const eventAttributes: ClickstreamAttribute = {};
+			for (const key in latestPerformance) {
+				const value = (latestPerformance as any)[key];
+				const valueType = typeof value;
+				if (Event.ReservedAttribute.TIMING_ATTRIBUTES.includes(key)) {
+					if (valueType === 'string' || valueType === 'number') {
+						eventAttributes[key] = value;
+					} else if (Array.isArray(value) && value.length > 0) {
+						eventAttributes[key] = JSON.stringify(value);
+					}
+				}
+			}
+			this.provider.record({
+				name: Event.PresetEvent.PAGE_LOAD,
+				attributes: eventAttributes,
+			});
+		}
+	}
+
+	isPageLoaded() {
+		const performanceEntries = performance.getEntriesByType('navigation');
+		return performanceEntries?.[0]?.duration > 0 || false;
+	}
+
+	isSupportedEnv(): boolean {
+		return !!performance && !!PerformanceObserver;
+	}
+}

src/types/Analytics.ts

@@ -31,6 +31,7 @@ export interface Configuration {
 	isTrackClickEvents?: boolean;
 	isTrackScrollEvents?: boolean;
 	isTrackSearchEvents?: boolean;
+	isTrackPageLoadEvents?: boolean;
 }
 
 export enum SendMode {

test/ClickstreamAnalytics.test.ts

@@ -10,6 +10,7 @@
  *  OR CONDITIONS OF ANY KIND, express or implied. See the License for the specific language governing permissions
  *  and limitations under the License.
  */
+import { setUpBrowserPerformance } from "./browser/BrowserUtil";
 import { ClickstreamAnalytics, Item, SendMode } from '../src';
 import { NetRequest } from '../src/network/NetRequest';
 import { Event } from '../src/provider';
@@ -22,6 +23,7 @@ describe('ClickstreamAnalytics test', () => {
 		jest
 			.spyOn(NetRequest, 'sendRequest')
 			.mockImplementation(mockSendRequestSuccess);
+		setUpBrowserPerformance();
 	});
 
 	afterEach(() => {

test/browser/BrowserUtil.ts

@@ -0,0 +1,98 @@
+/**
+ *  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance
+ *  with the License. A copy of the License is located at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  or in the 'license' file accompanying this file. This file is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES
+ *  OR CONDITIONS OF ANY KIND, express or implied. See the License for the specific language governing permissions
+ *  and limitations under the License.
+ */
+import { MockObserver } from './MockObserver';
+
+export function setUpBrowserPerformance() {
+	(global as any).PerformanceObserver = MockObserver;
+	setPerformanceEntries(false);
+}
+
+export function setPerformanceEntries(isLoaded = true) {
+	Object.defineProperty(window, 'performance', {
+		writable: true,
+		value: {
+			getEntriesByType: jest
+				.fn()
+				.mockImplementation(
+					isLoaded ? getEntriesByType : getEntriesByTypeUnload
+				),
+		},
+	});
+}
+
+function getEntriesByType(): PerformanceEntryList {
+	return <PerformanceEntry[]>(<unknown>[
+		{
+			name: 'https://aws.amazon.com/cn/',
+			entryType: 'navigation',
+			startTime: 0,
+			duration: 3444.4000000059605,
+			initiatorType: 'navigation',
+			deliveryType: 'indirect',
+			nextHopProtocol: 'h2',
+			renderBlockingStatus: 'non-blocking',
+			workerStart: 0,
+			redirectStart: 2,
+			redirectEnd: 2.2,
+			fetchStart: 2.2000000178813934,
+			domainLookupStart: 2.2000000178813934,
+			domainLookupEnd: 2.2000000178813934,
+			connectStart: 2.2000000178813934,
+			secureConnectionStart: 2.2000000178813934,
+			connectEnd: 2.2000000178813934,
+			requestStart: 745.9000000059605,
+			responseStart: 1006.7000000178814,
+			firstInterimResponseStart: 0,
+			responseEnd: 1321.300000011921,
+			transferSize: 167553,
+			encodedBodySize: 167253,
+			decodedBodySize: 1922019,
+			responseStatus: 200,
+			serverTiming: [
+				{
+					name: 'cache',
+					duration: 0,
+					description: 'hit-front',
+				},
+				{
+					name: 'host',
+					duration: 0,
+					description: 'cp3062',
+				},
+			],
+			unloadEventStart: 1011.9000000059605,
+			unloadEventEnd: 1011.9000000059605,
+			domInteractive: 1710.9000000059605,
+			domContentLoadedEventStart: 1712.7000000178814,
+			domContentLoadedEventEnd: 1714.7000000178814,
+			domComplete: 3440.4000000059605,
+			loadEventStart: 3444.2000000178814,
+			loadEventEnd: 3444.4000000059605,
+			type: 'reload',
+			redirectCount: 0,
+			activationStart: 0,
+			criticalCHRestart: 0,
+		},
+	]);
+}
+
+function getEntriesByTypeUnload(): PerformanceEntryList {
+	return <PerformanceEntry[]>(<unknown>[
+		{
+			name: 'https://aws.amazon.com/cn/',
+			entryType: 'navigation',
+			startTime: 0,
+			duration: 0,
+		},
+	]);
+}

test/browser/MockObserver.ts

@@ -0,0 +1,27 @@
+/**
+ *  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance
+ *  with the License. A copy of the License is located at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  or in the 'license' file accompanying this file. This file is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES
+ *  OR CONDITIONS OF ANY KIND, express or implied. See the License for the specific language governing permissions
+ *  and limitations under the License.
+ */
+export class MockObserver {
+	private readonly callback: () => void;
+
+	constructor(callback: () => void) {
+		this.callback = callback;
+	}
+
+	observe(options: any) {
+		console.log(options);
+	}
+
+	call() {
+		this.callback();
+	}
+}