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

@@ -182,4 +182,21 @@ 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');
+
+    dispatchWindowEvent('beforeunload');
+
+    expect(evCallback).toHaveBeenCalledTimes(1);
+    expect(evCallback).toHaveBeenNthCalledWith(1, true);
+    setTimeout(() => {
+      expect(evCallback).toHaveBeenCalledTimes(1);
+      expect(evCallback).toHaveBeenNthCalledWith(1, false);
+    }, 0);
+  });
 });

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

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