@liquidcommercedev/rmn-sdk 1.5.0-beta.4 → 1.5.0-beta.5

package/dist/index.cjs

@@ -15166,6 +15166,40 @@ const GFONT_CORMORANT = `
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap">
 `;
 
+class DataLayerMonitor {
+    constructor() {
+        if (!window.dataLayer) {
+            return;
+        }
+        this.originalPush = window.dataLayer.push;
+    }
+    static getInstance() {
+        if (!DataLayerMonitor.instance) {
+            DataLayerMonitor.instance = new DataLayerMonitor();
+        }
+        return DataLayerMonitor.instance;
+    }
+    setListener(listener) {
+        this.listener = listener;
+    }
+    start() {
+        window.dataLayer.push = (...args) => {
+            const result = this.originalPush.apply(window.dataLayer, args);
+            const pushedEvent = args[0];
+            if (this.listener) {
+                this.listener(pushedEvent);
+            }
+            return result;
+        };
+    }
+    stop() {
+        if (this.originalPush) {
+            window.dataLayer.push = this.originalPush;
+        }
+        this.listener = undefined;
+    }
+}
+
 class IntersectionObserverService {
     constructor(defaultOptions = {}) {
         this.observers = new Map();
@@ -15244,24 +15278,28 @@ class LocalStorage {
         }
     }
     setSpot(spotId, data) {
-        if (!this.spots)
-            return;
+        var _a;
         data.createdAt = Date.now();
-        this.spots.set(spotId, data);
+        (_a = this.spots) === null || _a === void 0 ? void 0 : _a.set(spotId, data);
         this.updateLocalStorage();
     }
-    getSpot(spotId) {
-        var _a;
-        return (_a = this.spots) === null || _a === void 0 ? void 0 : _a.get(spotId);
-    }
     removeSpot(spotId) {
         var _a;
         (_a = this.spots) === null || _a === void 0 ? void 0 : _a.delete(spotId);
         this.updateLocalStorage();
     }
+    getSpot(spotId) {
+        var _a;
+        return (_a = this.spots) === null || _a === void 0 ? void 0 : _a.get(spotId);
+    }
+    getSpots() {
+        if (!this.spots)
+            return undefined;
+        return this.mapToObj(this.spots);
+    }
     updateLocalStorage() {
         if (!this.spots)
-            return;
+            return undefined;
         const data = this.mapToObj(this.spots);
         localStorage.setItem(LocalStorage.localStorageKey, JSON.stringify(data));
     }
@@ -18056,6 +18094,73 @@ class PubSub {
  * unsubscribeLogin();
  */
 
+// @TODO: Add support for user to push events to our own data layer, if they don't use any analytics tool.
+// window.rmnDataLayer = window.rmnDataLayer || [];
+// For the moment, we will only focus on sites that use Google Analytics,
+// but we will add support for other analytics tools in the future.
+var AnalyticsTool;
+(function (AnalyticsTool) {
+    AnalyticsTool["GoogleAnalytics"] = "google-analytics";
+    AnalyticsTool["Other"] = "Other";
+})(AnalyticsTool || (AnalyticsTool = {}));
+class UserMonitor {
+    constructor() {
+        const analyticsTool = this.detectAnalyticsTool();
+        console.info({ analyticsTool });
+        switch (analyticsTool) {
+            case AnalyticsTool.GoogleAnalytics:
+                this.implementedMonitor = DataLayerMonitor.getInstance();
+                break;
+            case AnalyticsTool.Other:
+            default:
+                console.warn('This site uses an unsupported analytics tool.');
+                break;
+        }
+        if (analyticsTool === AnalyticsTool.Other) {
+            return;
+        }
+        this.localStorage = LocalStorage.getInstance();
+    }
+    static getInstance() {
+        if (!UserMonitor.instance) {
+            UserMonitor.instance = new UserMonitor();
+        }
+        return UserMonitor.instance;
+    }
+    start() {
+        if (!this.implementedMonitor)
+            return;
+        this.implementedMonitor.setListener((pushedEvent) => {
+            var _a;
+            console.info({ pushedEvent });
+            console.info({ spots: (_a = this.localStorage) === null || _a === void 0 ? void 0 : _a.getSpots() });
+        });
+        this.implementedMonitor.start();
+    }
+    detectAnalyticsTool() {
+        let analyticsTool = AnalyticsTool.Other;
+        // Check for Google Analytics
+        if (typeof window.ga !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // Check for Google Analytics 4
+        if (typeof window.gtag !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // Check for Google Tag Manager
+        if (typeof window.google_tag_manager !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // @TODO: Add support for other analytics tools
+        // Check for Heap Analytics
+        // Check for Mixpanel
+        // Check for Woopra
+        // Check for Segment
+        // Check for Amplitude
+        return analyticsTool;
+    }
+}
+
 class EventService {
     constructor() {
         this.pubSub = PubSub.getInstance();
@@ -18063,6 +18168,8 @@ class EventService {
         this.activeSpots = new Map();
         this.spotStates = new Map();
         this.intersectionObserver = new IntersectionObserverService();
+        // Start the user monitor, which will track and check user interactions
+        UserMonitor.getInstance().start();
     }
     static getInstance() {
         if (!EventService.instance) {
@@ -18507,6 +18614,10 @@ class LiquidCommerceRmnClient {
      */
     async injectSpotElement(params) {
         var _a;
+        if (typeof window === 'undefined' || typeof document === 'undefined') {
+            console.warn('LiquidCommerce Rmn Sdk: Methods which create elements are only available in browser environments.');
+            return;
+        }
         const config = params.config;
         let inject = params.inject;
         if (!inject.length) {

package/dist/index.esm.js

@@ -15164,6 +15164,40 @@ const GFONT_CORMORANT = `
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap">
 `;
 
+class DataLayerMonitor {
+    constructor() {
+        if (!window.dataLayer) {
+            return;
+        }
+        this.originalPush = window.dataLayer.push;
+    }
+    static getInstance() {
+        if (!DataLayerMonitor.instance) {
+            DataLayerMonitor.instance = new DataLayerMonitor();
+        }
+        return DataLayerMonitor.instance;
+    }
+    setListener(listener) {
+        this.listener = listener;
+    }
+    start() {
+        window.dataLayer.push = (...args) => {
+            const result = this.originalPush.apply(window.dataLayer, args);
+            const pushedEvent = args[0];
+            if (this.listener) {
+                this.listener(pushedEvent);
+            }
+            return result;
+        };
+    }
+    stop() {
+        if (this.originalPush) {
+            window.dataLayer.push = this.originalPush;
+        }
+        this.listener = undefined;
+    }
+}
+
 class IntersectionObserverService {
     constructor(defaultOptions = {}) {
         this.observers = new Map();
@@ -15242,24 +15276,28 @@ class LocalStorage {
         }
     }
     setSpot(spotId, data) {
-        if (!this.spots)
-            return;
+        var _a;
         data.createdAt = Date.now();
-        this.spots.set(spotId, data);
+        (_a = this.spots) === null || _a === void 0 ? void 0 : _a.set(spotId, data);
         this.updateLocalStorage();
     }
-    getSpot(spotId) {
-        var _a;
-        return (_a = this.spots) === null || _a === void 0 ? void 0 : _a.get(spotId);
-    }
     removeSpot(spotId) {
         var _a;
         (_a = this.spots) === null || _a === void 0 ? void 0 : _a.delete(spotId);
         this.updateLocalStorage();
     }
+    getSpot(spotId) {
+        var _a;
+        return (_a = this.spots) === null || _a === void 0 ? void 0 : _a.get(spotId);
+    }
+    getSpots() {
+        if (!this.spots)
+            return undefined;
+        return this.mapToObj(this.spots);
+    }
     updateLocalStorage() {
         if (!this.spots)
-            return;
+            return undefined;
         const data = this.mapToObj(this.spots);
         localStorage.setItem(LocalStorage.localStorageKey, JSON.stringify(data));
     }
@@ -18054,6 +18092,73 @@ class PubSub {
  * unsubscribeLogin();
  */
 
+// @TODO: Add support for user to push events to our own data layer, if they don't use any analytics tool.
+// window.rmnDataLayer = window.rmnDataLayer || [];
+// For the moment, we will only focus on sites that use Google Analytics,
+// but we will add support for other analytics tools in the future.
+var AnalyticsTool;
+(function (AnalyticsTool) {
+    AnalyticsTool["GoogleAnalytics"] = "google-analytics";
+    AnalyticsTool["Other"] = "Other";
+})(AnalyticsTool || (AnalyticsTool = {}));
+class UserMonitor {
+    constructor() {
+        const analyticsTool = this.detectAnalyticsTool();
+        console.info({ analyticsTool });
+        switch (analyticsTool) {
+            case AnalyticsTool.GoogleAnalytics:
+                this.implementedMonitor = DataLayerMonitor.getInstance();
+                break;
+            case AnalyticsTool.Other:
+            default:
+                console.warn('This site uses an unsupported analytics tool.');
+                break;
+        }
+        if (analyticsTool === AnalyticsTool.Other) {
+            return;
+        }
+        this.localStorage = LocalStorage.getInstance();
+    }
+    static getInstance() {
+        if (!UserMonitor.instance) {
+            UserMonitor.instance = new UserMonitor();
+        }
+        return UserMonitor.instance;
+    }
+    start() {
+        if (!this.implementedMonitor)
+            return;
+        this.implementedMonitor.setListener((pushedEvent) => {
+            var _a;
+            console.info({ pushedEvent });
+            console.info({ spots: (_a = this.localStorage) === null || _a === void 0 ? void 0 : _a.getSpots() });
+        });
+        this.implementedMonitor.start();
+    }
+    detectAnalyticsTool() {
+        let analyticsTool = AnalyticsTool.Other;
+        // Check for Google Analytics
+        if (typeof window.ga !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // Check for Google Analytics 4
+        if (typeof window.gtag !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // Check for Google Tag Manager
+        if (typeof window.google_tag_manager !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // @TODO: Add support for other analytics tools
+        // Check for Heap Analytics
+        // Check for Mixpanel
+        // Check for Woopra
+        // Check for Segment
+        // Check for Amplitude
+        return analyticsTool;
+    }
+}
+
 class EventService {
     constructor() {
         this.pubSub = PubSub.getInstance();
@@ -18061,6 +18166,8 @@ class EventService {
         this.activeSpots = new Map();
         this.spotStates = new Map();
         this.intersectionObserver = new IntersectionObserverService();
+        // Start the user monitor, which will track and check user interactions
+        UserMonitor.getInstance().start();
     }
     static getInstance() {
         if (!EventService.instance) {
@@ -18505,6 +18612,10 @@ class LiquidCommerceRmnClient {
      */
     async injectSpotElement(params) {
         var _a;
+        if (typeof window === 'undefined' || typeof document === 'undefined') {
+            console.warn('LiquidCommerce Rmn Sdk: Methods which create elements are only available in browser environments.');
+            return;
+        }
         const config = params.config;
         let inject = params.inject;
         if (!inject.length) {

package/dist/types/modules/event/helpers/datalayer.monitor.d.ts

@@ -0,0 +1,10 @@
+export declare class DataLayerMonitor {
+    private static instance;
+    private readonly originalPush;
+    private listener?;
+    private constructor();
+    static getInstance(): DataLayerMonitor;
+    setListener(listener: (data: any) => void): void;
+    start(): void;
+    stop(): void;
+}

package/dist/types/modules/event/helpers/index.d.ts

@@ -1,3 +1,4 @@
+export * from './datalayer.monitor';
 export * from './intersection.service';
 export * from './localstorage.service';
 export * from './resize.service';

package/dist/types/modules/event/helpers/localstorage.service.d.ts

@@ -1,5 +1,9 @@
 import type { RMN_SPOT_TYPE } from 'enums';
 import type { ISpotEvent } from 'modules/selection';
+export type LocalStorageSpotsMapType = Map<string, // spotId
+ILocalStorageSpot>;
+export type LocalStorageSpotsObjType = Record<string, // spotId
+ILocalStorageSpot>;
 export interface ILocalStorageSpot {
     spotId: string;
     spotType: RMN_SPOT_TYPE;
@@ -16,10 +20,11 @@ export declare class LocalStorage {
     static getInstance(): LocalStorage;
     private syncLocalStorage;
     setSpot(spotId: string, data: ILocalStorageSpot): void;
-    getSpot(spotId: string): ILocalStorageSpot | undefined;
     removeSpot(spotId: string): void;
+    getSpot(spotId: string): ILocalStorageSpot | undefined;
+    getSpots(): LocalStorageSpotsObjType | undefined;
     private updateLocalStorage;
-    clearLocalStorage(): void;
+    private clearLocalStorage;
     private removeExpiredSpots;
     private mapToObj;
     private objToMap;

package/dist/types/modules/event/index.d.ts

@@ -2,3 +2,4 @@ export * from './event.constant';
 export * from './event.interface';
 export * from './event.service';
 export * from './helpers';
+export * from './user.monitor';

package/dist/types/modules/event/user.monitor.d.ts

@@ -0,0 +1,13 @@
+export declare enum AnalyticsTool {
+    GoogleAnalytics = "google-analytics",
+    Other = "Other"
+}
+export declare class UserMonitor {
+    private static instance;
+    private readonly implementedMonitor?;
+    private readonly localStorage?;
+    private constructor();
+    static getInstance(): UserMonitor;
+    start(): void;
+    private detectAnalyticsTool;
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@liquidcommercedev/rmn-sdk",
   "description": "LiquidCommerce RMN SDK",
   "author": "LiquidCommerce Tech",
-  "version": "1.5.0-beta.4",
+  "version": "1.5.0-beta.5",
   "homepage": "https://docs.liquidcommerce.co/rmn-sdk",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",