feat: optimise for GA4, add sendPageView for element clicked

dist/foresight.js

@@ -239,7 +239,7 @@ var Foresight = /** @class */ (function () {
             return window['gtm'](__assign(__assign({ 'event': data.action, 'event_label': data.label, 'event_category': data.category, 'non_interaction': !data.interaction }, data.metrics), data.dimensions));
         }
         if (typeof window['gtag'] === 'function') {
-            return window['gtag']('event', data.action, __assign(__assign({ 'event_label': data.label, 'event_category': data.category, 'non_interaction': !data.interaction }, data.metrics), data.dimensions));
+            return window['gtag']('event', data.action, __assign(__assign(__assign(__assign(__assign({}, data.metrics), data.dimensions), (data.label ? { label: data.label } : {})), (data.category ? { category: data.category } : {})), { 'non_interaction': !data.interaction }));
         }
         if (typeof window['ga'] === 'function') {
             return window['ga']('send', {
@@ -335,6 +335,10 @@ var Foresight = /** @class */ (function () {
             data.interaction = false;
         }
         this.send(data);
+        if (element.hasAttribute('data-track:page-view')) {
+            var pagePath = element.getAttribute('data-track:page-view') || window.location.pathname;
+            this.sendPageView(pagePath);
+        }
     };
     /**
      * Handles a view event on an element that is being tracked by Foresight.
@@ -395,6 +399,18 @@ var Foresight = /** @class */ (function () {
         };
         this.send(scrollData);
     };
+    /**
+     * Send a page view event manually.
+     * @param {string} pagePath The page path to send. Defaults to current location.
+     */
+    Foresight.prototype.sendPageView = function (pagePath) {
+        if (pagePath === void 0) { pagePath = window.location.pathname; }
+        if (typeof window['gtag'] === 'function') {
+            window['gtag']('event', 'page_view', {
+                page_path: pagePath
+            });
+        }
+    };
     Foresight.defaultOptions = {
         defer: false,
         observerOptions: {},
@@ -1147,9 +1163,9 @@ window.IntersectionObserverEntry = IntersectionObserverEntry;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var toArray_1 = __webpack_require__(3);
-exports.toArray = toArray_1.default;
+Object.defineProperty(exports, "toArray", { enumerable: true, get: function () { return toArray_1.default; } });
 var debounce_1 = __webpack_require__(4);
-exports.debounce = debounce_1.default;
+Object.defineProperty(exports, "debounce", { enumerable: true, get: function () { return debounce_1.default; } });
 
 
 /***/ }),
@@ -1175,6 +1191,7 @@ exports.default = toArray;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.debounce = void 0;
 /**
  * Returns a debounced function that as long as it continues to be invoked,
  * will not be triggered until it stops being called for N milliseconds.

src/foresight.ts

@@ -204,11 +204,11 @@ class Foresight {
 
     if (typeof window['gtag'] === 'function') {
       return window['gtag']('event', data.action, {
-        'event_label': data.label,
-        'event_category': data.category,
-        'non_interaction': !data.interaction,
         ...data.metrics,
-        ...data.dimensions
+        ...data.dimensions,
+        ...(data.label ? { label: data.label } : {}),
+        ...(data.category ? { category: data.category } : {}),
+        'non_interaction': !data.interaction
       });
     }
 
@@ -320,6 +320,11 @@ class Foresight {
     }
 
     this.send(<EventData> data);
+
+    if (element.hasAttribute('data-track:page-view')) {
+      const pagePath = element.getAttribute('data-track:page-view') || window.location.pathname;
+      this.sendPageView(pagePath);
+    }
   }
 
   /**
@@ -386,6 +391,18 @@ class Foresight {
     }
     this.send(scrollData);
   }
+
+  /**
+   * Send a page view event manually.
+   * @param {string} pagePath The page path to send. Defaults to current location.
+   */
+  sendPageView(pagePath: string = window.location.pathname) {
+    if (typeof window['gtag'] === 'function') {
+      window['gtag']('event', 'page_view', {
+        page_path: pagePath
+      });
+    }
+  }
 }
 
 export = Foresight;

typings/foresight.d.ts

@@ -125,5 +125,10 @@ declare class Foresight {
      */
     private _onScroll;
     private _onUnload;
+    /**
+     * Send a page view event manually.
+     * @param {string} pagePath The page path to send. Defaults to current location.
+     */
+    sendPageView(pagePath?: string): void;
 }
 export = Foresight;