refactor: trackPageLifecycleEvents fn

rudderlabs · Oct 9, 2024 · 02ffa04 · 02ffa04
1 parent 9c4a494
commit 02ffa04
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 57 deletions.
diff --git a/packages/analytics-js-common/src/types/LoadOptions.ts b/packages/analytics-js-common/src/types/LoadOptions.ts
@@ -109,8 +109,8 @@ export type PreConsentOptions = {
 };
 
 export enum PageLifecycleEvents {
-  PAGELOADED = 'Page Loaded',
-  PAGEUNLOADED = 'Page Unloaded',
+  LOADED = 'Page Loaded',
+  UNLOADED = 'Page Unloaded',
 }
 
 export type TrackPageLifecycleOptions = {

diff --git a/packages/analytics-js/src/app/RudderAnalytics.ts b/packages/analytics-js/src/app/RudderAnalytics.ts
@@ -153,60 +153,59 @@ class RudderAnalytics implements IRudderAnalytics<IAnalytics> {
     loadOptions?: Partial<LoadOptions>,
   ) {
     const { trackPageLifecycle, useBeacon } = loadOptions ?? {};
-    const { events = [], enabled = false, options = {} } = trackPageLifecycle ?? {};
-    if (enabled) {
-      const visitId = generateUUID();
-      const pageLoadedTimestamp = Date.now();
-      if (events.length === 0 || events.includes(PageLifecycleEvents.PAGELOADED)) {
-        preloadedEventsArray.unshift([
-          'track',
-          PageLifecycleEvents.PAGELOADED,
-          { visitId },
-          {
-            originalTimestamp: new Date(pageLoadedTimestamp).toISOString(),
-            ...options,
-          },
-        ]);
-      }
-      if (events.length === 0 || events.includes(PageLifecycleEvents.PAGEUNLOADED)) {
-        if (useBeacon === true) {
-          // Register the page unloaded lifecycle event listeners
-          onPageLeave((isAccessible: boolean) => {
-            if (isAccessible === false) {
-              const visitDuration = Date.now() - pageLoadedTimestamp;
-              if (!state.lifecycle.loaded.value) {
-                preloadedEventsArray.unshift([
-                  'track',
-                  PageLifecycleEvents.PAGEUNLOADED,
-                  {
-                    visitId,
-                    visitDuration,
-                  },
-                  {
-                    ...options,
-                  },
-                ]);
-              } else {
-                this.track(
-                  PageLifecycleEvents.PAGEUNLOADED,
-                  {
-                    visitId,
-                    visitDuration,
-                  },
-                  {
-                    ...options,
-                  },
-                );
-              }
-            }
-          });
-        } else {
-          // throw warning if beacon is disabled
-          this.logger.warn(PAGE_UNLOAD_ON_BEACON_DISABLED_WARNING());
-        }
+    const {
+      events = [PageLifecycleEvents.LOADED, PageLifecycleEvents.UNLOADED],
+      enabled = false,
+      options = {},
+    } = trackPageLifecycle ?? {};
+
+    if (!enabled) {
+      return;
+    }
+
+    const visitId = generateUUID();
+    const pageLoadedTimestamp = Date.now();
+
+    // track page loaded event
+    if (events.length === 0 || events.includes(PageLifecycleEvents.LOADED)) {
+      preloadedEventsArray.unshift([
+        'track',
+        PageLifecycleEvents.LOADED,
+        { visitId },
+        {
+          ...options,
+          originalTimestamp: new Date(pageLoadedTimestamp).toISOString(),
+        },
+      ]);
+    }
+
+    // track page unloaded event
+    if (events.length === 0 || events.includes(PageLifecycleEvents.UNLOADED)) {
+      if (useBeacon === true) {
+        // Register the page unloaded lifecycle event listeners
+        onPageLeave((isAccessible: boolean) => {
+          if (isAccessible === false && state.lifecycle.loaded.value) {
+            const pageUnloadedTimestamp = Date.now();
+            const visitDuration = pageUnloadedTimestamp - pageLoadedTimestamp;
+            this.track(
+              PageLifecycleEvents.UNLOADED,
+              {
+                visitId,
+                visitDuration,
+              },
+              {
+                ...options,
+                originalTimestamp: new Date(pageUnloadedTimestamp).toISOString(),
+              },
+            );
+          }
+        });
+      } else {
+        // throw warning if beacon is disabled
+        this.logger.warn(PAGE_UNLOAD_ON_BEACON_DISABLED_WARNING);
       }
-      setExposedGlobal(GLOBAL_PRELOAD_BUFFER, clone(preloadedEventsArray));
     }
+    setExposedGlobal(GLOBAL_PRELOAD_BUFFER, clone(preloadedEventsArray));
   }
 
   /**

diff --git a/packages/analytics-js/src/constants/logMessages.ts b/packages/analytics-js/src/constants/logMessages.ts
@@ -257,8 +257,7 @@ const INVALID_POLYFILL_URL_WARNING = (
 const BAD_COOKIES_WARNING = (key: string) =>
   `The cookie data for ${key} seems to be encrypted using SDK versions < v3. The data is dropped. This can potentially stem from using SDK versions < v3 on other sites or web pages that can share cookies with this webpage. We recommend using the same SDK (v3) version everywhere or avoid disabling the storage data migration.`;
 
-const PAGE_UNLOAD_ON_BEACON_DISABLED_WARNING = (): string =>
-  `Page Unloaded event is only supported for Beacon transport mechanism. Please set useBeacon to true to enable this feature.`;
+const PAGE_UNLOAD_ON_BEACON_DISABLED_WARNING = `Page Unloaded event can only be tracked when the Beacon transport is active. Please enable "useBeacon" load API option.`;
 
 export {
   UNSUPPORTED_CONSENT_MANAGER_ERROR,

diff --git a/packages/analytics-js/src/state/slices/loadOptions.ts b/packages/analytics-js/src/state/slices/loadOptions.ts
@@ -44,7 +44,7 @@ const defaultLoadOptions: LoadOptions = {
   useServerSideCookies: false,
   trackPageLifecycle: {
     enabled: false,
-    events: [PageLifecycleEvents.PAGELOADED, PageLifecycleEvents.PAGEUNLOADED],
+    events: [PageLifecycleEvents.LOADED, PageLifecycleEvents.UNLOADED],
   },
 };