add initTrackPageview and trackPageview APIs

package.json

@@ -24,8 +24,8 @@
     "release:version": "changeset version && yarn install --lockfile-only"
   },
   "devDependencies": {
-    "@types/node": "^20.4.6",
     "@types/md5": "^2.3.2",
+    "@types/node": "^20.4.6",
     "@typescript-eslint/eslint-plugin": "^5.52.0",
     "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.9.0",
@@ -57,6 +57,7 @@
     ]
   },
   "dependencies": {
+    "@types/react-router": "^5.1.20",
     "md5": "^2.3.0",
     "perfume.js": "9.0.0-rc.3"
   }

src/index.ts

@@ -1 +1,2 @@
-export { init } from './init.ts';
+export { init } from './init';
+export { initTrackPageview } from './trackPageView';

src/storage/location.test.ts

@@ -8,9 +8,11 @@ import {
   locationInit,
   setBreadcrumbs,
   setLocation,
+  setPageviewConfig,
   uaaValuesFromUrl,
 } from '../storage/location';
 import { describe, test, expect, beforeEach } from 'vitest';
+import { DEFAULT_LOCATION } from '../storage/location';
 
 const resetState = () => {
   const location = getLocation();
@@ -40,6 +42,10 @@ describe('location', () => {
       initialUAAData: {},
       pagePath: '',
       prevPagePath: '',
+      pageviewConfig: {
+        isEnabled: false,
+        blacklistRegex: [],
+      },
     });
   });
 
@@ -56,6 +62,10 @@ describe('location', () => {
       initialUAAData: { utm_term: 'test' },
       pagePath: 'test',
       prevPagePath: 'prevTest',
+      pageviewConfig: {
+        isEnabled: false,
+        blacklistRegex: [],
+      },
     });
   });
 
@@ -72,6 +82,10 @@ describe('location', () => {
       initialUAAData: {},
       pagePath: '',
       prevPagePath: '',
+      pageviewConfig: {
+        isEnabled: false,
+        blacklistRegex: [],
+      },
     });
   });
 
@@ -166,4 +180,75 @@ describe('location', () => {
       expect(uaaValuesFromUrl()).toEqual({ utm_term: 'some-new-value' });
     });
   });
+
+  describe('pageviewConfig', () => {
+    beforeEach(() => {
+      resetState();
+      setLocation(DEFAULT_LOCATION);
+    });
+
+    test('should set only blacklistRegex', () => {
+      const { pageviewConfig } = getLocation();
+      setLocation({
+        pageviewConfig: {
+          isEnabled: pageviewConfig.isEnabled,
+          blacklistRegex: [/accounts\/.+/, /signout\/?/],
+        },
+      });
+
+      expect(getLocation().pageviewConfig).toEqual({
+        blacklistRegex: [/accounts\/.+/, /signout\/?/],
+        isEnabled: false,
+      });
+    });
+
+    test('should set only isEnabled', () => {
+      setPageviewConfig({
+        isEnabled: true,
+        blacklistRegex: [],
+      });
+
+      expect(getLocation().pageviewConfig).toEqual({
+        isEnabled: true,
+        blacklistRegex: [],
+      });
+    });
+
+    test.only('modifying pageViewConfig should not touch location properties', () => {
+      setLocation({
+        breadcrumbs: [{ label: 'test', href: 'test' }],
+        initialUAAData: { utm_term: 'test' },
+        pagePath: 'test',
+        prevPagePath: 'prevTest',
+      });
+
+      expect(getLocation()).toEqual({
+        pagePath: 'test',
+        prevPagePath: 'prevTest',
+        breadcrumbs: [{ label: 'test', href: 'test' }],
+        initialUAAData: { utm_term: 'test' },
+        pageviewConfig: {
+          isEnabled: false,
+          blacklistRegex: [],
+        },
+      });
+
+      // set pageviewConfig
+      setPageviewConfig({
+        isEnabled: true,
+        blacklistRegex: [/accounts\/.+/, /signout\/?/],
+      });
+
+      expect(getLocation()).toEqual({
+        pagePath: 'test',
+        prevPagePath: 'prevTest',
+        breadcrumbs: [{ label: 'test', href: 'test' }],
+        initialUAAData: { utm_term: 'test' },
+        pageviewConfig: {
+          isEnabled: true,
+          blacklistRegex: [/accounts\/.+/, /signout\/?/],
+        },
+      });
+    });
+  });
 });

src/storage/location.ts

@@ -5,6 +5,7 @@ import {
   AnalyticsQueries,
   ReferrerData,
   Location,
+  PageviewConfig,
 } from '../types/location';
 import { persistentData } from './persistentData';
 import { getLocation } from './storage';
@@ -14,6 +15,10 @@ export const DEFAULT_LOCATION = {
   initialUAAData: {},
   pagePath: '',
   prevPagePath: '',
+  pageviewConfig: {
+    isEnabled: false,
+    blacklistRegex: [],
+  },
 };
 
 const UAA_QUERIES: AnalyticsQueries[] = [
@@ -34,6 +39,11 @@ export function setBreadcrumbs(breadcrumbs: Breadcrumb[]) {
   Object.assign(location, { breadcrumbs });
 }
 
+export function setPageviewConfig(pageviewConfig: PageviewConfig) {
+  const location = getLocation();
+  Object.assign(location, { pageviewConfig });
+}
+
 export function setLocation(data: SetLocation) {
   const location = getLocation();
   Object.assign(location, data);

src/trackPageView.ts

@@ -0,0 +1,74 @@
+/**
+ *  This entire file will eventually be moved to the React open-analytics package
+ */
+
+import { RouteComponentProps } from 'react-router';
+import { markNTBT } from './utils/perfume';
+import { PAGEVIEW_EVENT_TYPE } from './utils/constants';
+import { trackEvent } from './trackEvent';
+import { ActionType, ComponentType } from './types/perfume';
+import { getLocation, getConfig } from './storage/storage';
+import { setPageviewConfig } from './storage/location';
+
+/**
+ * Public method to manually track a pageview
+ */
+
+type LogPageViewOptions = {
+  callMarkNTBT?: boolean;
+};
+
+type RouterHistory = RouteComponentProps['history'];
+
+type TrackPageviewOptions = {
+  blacklistRegex?: RegExp[];
+  browserHistory: RouterHistory;
+};
+
+export const getUrlPathname = (): string => {
+  return window?.location?.pathname || '';
+};
+
+export function trackPageView(
+  options: LogPageViewOptions = { callMarkNTBT: true }
+) {
+  const config = getConfig();
+  const {
+    pageviewConfig: { blacklistRegex },
+  } = getLocation();
+
+  // Stop log if platform is not initialized
+  if (config.platform === 'unknown') {
+    return;
+  }
+
+  // Avoid pageview for blacklist pathnames
+  if (blacklistRegex.some((r: RegExp) => r.test(getUrlPathname()))) {
+    return;
+  }
+  trackEvent({
+    name: PAGEVIEW_EVENT_TYPE,
+    action: ActionType.render,
+    component: ComponentType.page,
+  });
+  if (options.callMarkNTBT) {
+    markNTBT();
+  }
+}
+
+/**
+ * Initiate auto instrumentation for the `pageview` events.
+ */
+export const initTrackPageview = ({
+  blacklistRegex,
+  browserHistory,
+}: TrackPageviewOptions) => {
+  setPageviewConfig({
+    blacklistRegex: blacklistRegex || [],
+    isEnabled: true,
+  });
+  trackPageView({ callMarkNTBT: false });
+  browserHistory.listen(() => {
+    trackPageView();
+  });
+};

src/types/event.ts

@@ -12,11 +12,6 @@ export type Event = RequiredData & OptionalData;
 
 export type Importance = 'low' | 'high';
 
-export type PageviewConfig = {
-  blacklistRegex: RegExp[];
-  isEnabled: boolean;
-};
-
 type ValidationData = {
   action: string;
   component: string;

src/types/location.ts

@@ -8,6 +8,11 @@ export type ReferrerData = {
   referring_domain?: string;
 };
 
+export type PageviewConfig = {
+  blacklistRegex: RegExp[];
+  isEnabled: boolean;
+};
+
 export type UAAData = {
   fbclid?: string;
   gclid?: string;
@@ -38,6 +43,7 @@ export type Location = {
   initialUAAData: UAAData;
   pagePath: string;
   prevPagePath: string;
+  pageviewConfig: PageviewConfig;
 };
 
 export type SetLocation = Partial<Location>;

src/types/storage.ts

@@ -1,10 +1,10 @@
 import { Config } from './config';
 import { Scheduler } from './scheduler';
-import { Metric } from './metric.ts';
+import { Metric } from './metric';
 import { Event } from './event';
 import { Location } from './location';
-import { Identity } from './identity.ts';
-import { Device } from './device.ts';
+import { Identity } from './identity';
+import { Device } from './device';
 import { NetworkLayer } from './networkLayer';
 
 export type Storage = {

src/utils/constants.ts

@@ -1,3 +1,5 @@
+export const PAGEVIEW_EVENT_TYPE = 'pageview';
+
 type PerformanceEvents = Record<
   string,
   {

src/utils/enhancers.test.ts

@@ -13,7 +13,6 @@ import {
   getStorage,
 } from '../storage/storage';
 import { Event } from '../types/event';
-import { pageview } from './pageView';
 import * as time from './time';
 import { timeStone } from './time';
 import { init as setConfig } from '../storage/config';
@@ -162,17 +161,19 @@ describe('enhance', () => {
 
   describe('events', () => {
     let event: Event;
-    const pageView = pageview;
 
     beforeEach(() => {
       const location = getLocation();
-      Object.assign(location, { pagePath: null, initialUAAData: {} });
+      Object.assign(location, {
+        pagePath: null,
+        initialUAAData: {},
+        pageviewConfig: { isEnabled: false },
+      });
       event = {
         action: 'testAction',
         component: 'testComponent',
         name: 'testName',
       };
-      Object.assign(pageView, { isEnabled: false });
       Object.assign(timeStone, { timeStart: 1583872606122 });
       const identity = getIdentity();
       Object.assign(identity, { locale: null });
@@ -189,7 +190,7 @@ describe('enhance', () => {
           pagePath: 'testPagePath',
           prevPagePath: 'testPrevPagePath',
         });
-        Object.assign(pageView, { isEnabled: true });
+        Object.assign(location.pageviewConfig, { isEnabled: true });
         eventEnhancers(event);
         expect(event).toEqual({
           action: 'testAction',

src/utils/enhancers.ts

@@ -16,7 +16,6 @@ import {
   uaaValuesFromUrl,
 } from '../storage/location.ts';
 import { SetDeviceSize } from '../types/device.ts';
-import { pageview } from './pageView.ts';
 
 const setLanguageCode = () => {
   const identity = getIdentity();
@@ -135,7 +134,7 @@ const enhanceProperties = (
 
 const pageviewEnhancer = <T extends Event>(entity: T) => {
   const location = getLocation();
-  if (pageview.isEnabled) {
+  if (location.pageviewConfig.isEnabled) {
     Object.assign(entity, getPageviewProperties(location));
   }