feat: track time spent on a page

README.md

@@ -78,10 +78,10 @@ npm install @rudderstack/analytics-js --save
 ```javascript
 import { RudderAnalytics } from '@rudderstack/analytics-js';
 
-const rudderanalytics = new RudderAnalytics();
+const rudderAnalytics = new RudderAnalytics();
 rudderAnalytics.load(<WRITE_KEY>, <DATA_PLANE_URL>, {});
 
-export { rudderanalytics };
+export { rudderAnalytics };
 ```
 
 - **For CJS using the `require` method**:
@@ -92,7 +92,7 @@ var RudderAnalytics = require('@rudderstack/analytics-js');
 const rudderAnalytics = new RudderAnalytics();
 rudderAnalytics.load(<WRITE_KEY>, <DATA_PLANE_URL>, {});
 
-exports.rudderanalytics = rudderAnalytics;
+exports.rudderAnalytics = rudderAnalytics;
 ```
 
 ### Sample implementations

packages/analytics-js-common/__tests__/utilities/page.test.ts

@@ -17,6 +17,7 @@ describe('onPageLeave', () => {
   };
 
   beforeEach(() => {
+    jest.useFakeTimers();
     setVisibilityState('visible');
   });
 
@@ -182,4 +183,22 @@ describe('onPageLeave', () => {
 
     expect(evCallback).toHaveBeenNthCalledWith(2, false);
   });
+
+  it('should fire the callback on beforeunload event on the next tick even when the tab is inactive', () => {
+    const evCallback = jest.fn();
+    onPageLeave(evCallback);
+
+    setVisibilityState('hidden');
+    dispatchDocumentEvent('visibilitychange');
+
+    expect(evCallback).toHaveBeenCalledTimes(1);
+    expect(evCallback).toHaveBeenNthCalledWith(1, true);
+
+    jest.runAllTimers();
+
+    dispatchWindowEvent('beforeunload');
+
+    expect(evCallback).toHaveBeenCalledTimes(2);
+    expect(evCallback).toHaveBeenNthCalledWith(2, false);
+  });
 });

packages/analytics-js-common/src/types/ApplicationState.ts

@@ -83,6 +83,17 @@ export type LifecycleState = {
   dataPlaneUrl: Signal<string | undefined>;
 };
 
+export type AutoTrackState = {
+  enabled: Signal<boolean>;
+  pageLifecycle: PageLifecycleState;
+};
+
+export type PageLifecycleState = {
+  enabled: Signal<boolean>;
+  visitId: Signal<string | undefined>;
+  pageLoadedTimestamp: Signal<number | undefined>;
+};
+
 export type LoadOptionsState = Signal<LoadOptions>;
 
 // TODO: define the metrics that we need to track
@@ -191,6 +202,7 @@ export interface ApplicationState {
   storage: StorageState;
   serverCookies: ServerCookiesState;
   dataPlaneEvents: DataPlaneEventsState;
+  autoTrack: AutoTrackState;
 }
 
 export type DebouncedFunction = (...args: any[]) => void;

packages/analytics-js-common/src/types/LoadOptions.ts

@@ -108,6 +108,23 @@
   events?: PreConsentEventsOptions;
 };
 
+export enum PageLifecycleEvents {
+  LOADED = 'Page Loaded',
+  UNLOADED = 'Page Unloaded',
+}
+
+export type PageLifecycleOptions = {
+  enabled: boolean; // default false
+  events?: PageLifecycleEvents[];
+  options?: ApiOptions;
+};
+
+export type AutoTrackOptions = {
+  enabled?: boolean; // default false
+  options?: ApiOptions;
+  pageLifecycle?: PageLifecycleOptions;
+};
+
 /**
  * Represents the options parameter in the load API
  */
@@ -150,6 +167,7 @@
   externalAnonymousIdCookieName?: string;
   useServerSideCookies?: boolean;
   dataServiceEndpoint?: string;
+  autoTrack?: AutoTrackOptions;
 };
 
 export type ConsentOptions = {

packages/analytics-js-common/src/utilities/page.ts

@@ -12,6 +12,13 @@ const onPageLeave = (callback: (isAccessible: boolean) => void) => {
     pageLeft = true;
 
     callback(isAccessible);
+
+    // Reset pageLeft on the next tick
+    // to ensure callback executes for other listeners
+    // when closing an inactive browser tab.
+    setTimeout(() => {
+      pageLeft = false;
+    }, 0);
   }
 
   // Catches the unloading of the page (e.g., closing the tab or navigating away).

packages/analytics-js/.size-limit.mjs

@@ -7,53 +7,53 @@ export default [
     name: 'Core - Legacy - NPM (ESM)',
     path: 'dist/npm/legacy/esm/index.mjs',
     import: '*',
-    limit: '48 KiB',
+    limit: '48.5 KiB',
   },
   {
     name: 'Core - Legacy - NPM (CJS)',
     path: 'dist/npm/legacy/cjs/index.cjs',
     import: '*',
-    limit: '48 KiB',
+    limit: '48.5 KiB',
   },
   {
     name: 'Core - Legacy - NPM (UMD)',
     path: 'dist/npm/legacy/umd/index.js',
     import: '*',
-    limit: '48 KiB',
+    limit: '48.5 KiB',
   },
   {
     name: 'Core - Legacy - CDN',
     path: 'dist/cdn/legacy/iife/rsa.min.js',
-    limit: '48 KiB',
+    limit: '48.5 KiB',
   },
   {
     name: 'Core - Modern - NPM (ESM)',
     path: 'dist/npm/modern/esm/index.mjs',
     import: '*',
-    limit: '24.5 KiB',
+    limit: '25 KiB',
   },
   {
     name: 'Core - Modern - NPM (CJS)',
     path: 'dist/npm/modern/cjs/index.cjs',
     import: '*',
-    limit: '24.5 KiB',
+    limit: '25 KiB',
   },
   {
     name: 'Core - Modern - NPM (UMD)',
     path: 'dist/npm/modern/umd/index.js',
     import: '*',
-    limit: '24.5 KiB',
+    limit: '25 KiB',
   },
   {
     name: 'Core - Modern - CDN',
     path: 'dist/cdn/modern/iife/rsa.min.js',
-    limit: '24.5 KiB',
+    limit: '25 KiB',
   },
   {
     name: 'Core (Bundled) - Legacy - NPM (ESM)',
     path: 'dist/npm/legacy/bundled/esm/index.mjs',
     import: '*',
-    limit: '48 KiB',
+    limit: '48.5 KiB',
   },
   {
     name: 'Core (Bundled) - Legacy - NPM (CJS)',
@@ -65,19 +65,19 @@ export default [
     name: 'Core (Bundled) - Legacy - NPM (UMD)',
     path: 'dist/npm/legacy/bundled/umd/index.js',
     import: '*',
-    limit: '48 KiB',
+    limit: '48.5 KiB',
   },
   {
     name: 'Core (Bundled) - Modern - NPM (ESM)',
     path: 'dist/npm/modern/bundled/esm/index.mjs',
     import: '*',
-    limit: '39 KiB',
+    limit: '39.5 KiB',
   },
   {
     name: 'Core (Bundled) - Modern - NPM (CJS)',
     path: 'dist/npm/modern/bundled/cjs/index.cjs',
     import: '*',
-    limit: '39.5 KiB',
+    limit: '40 KiB',
   },
   {
     name: 'Core (Bundled) - Modern - NPM (UMD)',
@@ -101,13 +101,13 @@ export default [
     name: 'Core (Content Script) - Legacy - NPM (UMD)',
     path: 'dist/npm/legacy/content-script/umd/index.js',
     import: '*',
-    limit: '47.5 KiB',
+    limit: '48 KiB',
   },
   {
     name: 'Core (Content Script) - Modern - NPM (ESM)',
     path: 'dist/npm/modern/content-script/esm/index.mjs',
     import: '*',
-    limit: '38.5 KiB',
+    limit: '39 KiB',
   },
   {
     name: 'Core (Content Script) - Modern - NPM (CJS)',
@@ -119,6 +119,6 @@ export default [
     name: 'Core (Content Script) - Modern - NPM (UMD)',
     path: 'dist/npm/modern/content-script/umd/index.js',
     import: '*',
-    limit: '38.5 KiB',
+    limit: '39 KiB',
   },
 ];