@technoapple/ga4 1.0.4 → 1.1.0

package/src/plugins/url-change-tracker.ts

@@ -0,0 +1,84 @@
+import { GA4Plugin, SendFunction, UrlChangeTrackerOptions } from '../types/plugins';
+
+/**
+ * Automatically tracks URL changes in Single Page Applications.
+ *
+ * Intercepts `history.pushState()`, optionally `history.replaceState()`,
+ * and `popstate` events, sending a `page_view` event for each navigation.
+ */
+export class UrlChangeTracker implements GA4Plugin {
+    private send: SendFunction;
+    private trackReplaceState: boolean;
+    private shouldTrackUrlChange?: UrlChangeTrackerOptions['shouldTrackUrlChange'];
+    private hitFilter?: UrlChangeTrackerOptions['hitFilter'];
+    private currentPath: string;
+    private originalPushState: History['pushState'];
+    private originalReplaceState: History['replaceState'];
+    private boundPopState: () => void;
+
+    constructor(send: SendFunction, options?: UrlChangeTrackerOptions) {
+        this.send = send;
+        this.trackReplaceState = options?.trackReplaceState ?? false;
+        this.shouldTrackUrlChange = options?.shouldTrackUrlChange;
+        this.hitFilter = options?.hitFilter;
+
+        this.currentPath = location.pathname + location.search;
+        this.originalPushState = history.pushState;
+        this.originalReplaceState = history.replaceState;
+        this.boundPopState = this.onUrlChange.bind(this);
+
+        // Monkey-patch history.pushState
+        const self = this;
+        history.pushState = function (...args: Parameters<History['pushState']>) {
+            self.originalPushState.apply(history, args);
+            self.onUrlChange();
+        };
+
+        // Optionally monkey-patch history.replaceState
+        if (this.trackReplaceState) {
+            history.replaceState = function (...args: Parameters<History['replaceState']>) {
+                self.originalReplaceState.apply(history, args);
+                self.onUrlChange();
+            };
+        }
+
+        window.addEventListener('popstate', this.boundPopState);
+    }
+
+    private onUrlChange(): void {
+        // Use setTimeout to ensure the URL has been updated
+        setTimeout(() => {
+            const newPath = location.pathname + location.search;
+
+            const shouldTrack = this.shouldTrackUrlChange
+                ? this.shouldTrackUrlChange(newPath, this.currentPath)
+                : newPath !== this.currentPath;
+
+            if (!shouldTrack) return;
+
+            this.currentPath = newPath;
+
+            let params: Record<string, unknown> = {
+                page_path: location.pathname,
+                page_title: document.title,
+                page_location: location.href,
+            };
+
+            if (this.hitFilter) {
+                const filtered = this.hitFilter(params);
+                if (filtered === null) return;
+                params = filtered;
+            }
+
+            this.send('page_view', params);
+        }, 0);
+    }
+
+    remove(): void {
+        window.removeEventListener('popstate', this.boundPopState);
+        history.pushState = this.originalPushState;
+        if (this.trackReplaceState) {
+            history.replaceState = this.originalReplaceState;
+        }
+    }
+}

package/src/types/dataLayer.ts

@@ -1,10 +1,10 @@
-interface KeyValuePair {
-    [key:string|number]: any;
-  }
-
-interface DataLayerObject extends KeyValuePair{
-    event?: string;
-    value?: string;
-}
-
+interface KeyValuePair {
+    [key:string|number]: any;
+  }
+
+interface DataLayerObject extends KeyValuePair{
+    event?: string;
+    value?: string;
+}
+
 export {DataLayerObject};

package/src/types/global.ts

@@ -1,13 +1,13 @@
-import { DataLayerObject } from "./dataLayer";
-import { gtag } from "./gtag";
-
-declare global {
-  
-
-  interface Window {
-      dataLayer: Array<DataLayerObject>;
-      gtag:gtag;
-    }
-  }
-
+import { DataLayerObject } from "./dataLayer";
+import { gtag } from "./gtag";
+
+declare global {
+  
+
+  interface Window {
+      dataLayer: Array<DataLayerObject>;
+      gtag:gtag;
+    }
+  }
+
 export {};

package/src/types/gtag.ts

@@ -1,260 +1,260 @@
-
-/**
- * gtag definition, referenced via here https://developers.google.com/tag-platform/gtagjs/reference
- * 
- */
-type requestedFieldCallback = (fieldName:string) => void;
-type eventCallback = () => void;
-
-interface KeyValueParams {
-  [key:string]: string | number | boolean;
-}
-
-interface ConsentParams {
-  ad_storage: 'granted' | 'denied';
-  analytics_storage: 'granted' | 'denied';
-  wait_for_update: number;
-}
-
-interface ControlParams {
-  groups: string;
-  send_to: string;
-  event_callback:eventCallback;
-  event_timeout:number;
-}
-
-interface ItemParameters {
-  item_id: string;
-  item_name: string;
-  affiliation?:string;
-  coupon?:string;
-  discount?:number;
-  index?:number;
-  item_brand?:string;
-  item_category?:string;
-  item_category2?:string;
-  item_category3?:string;
-  item_category4?:string;
-  item_category5?:string;
-  item_list_id?:string;
-  item_list_name?:string;
-  item_variant?:string;
-  location_id?:string;
-  price?:number;
-  quantity?:number;
-}
-
-interface PromotionParameters extends ItemParameters {
-  creative_name?:string;
-  creative_slot?:string;
-  promotion_id?:string;
-  promotion_name?:string;
-}
-
-interface AddPaymentInfo {
-  currency: string;
-  value: number;
-  coupon?:string;
-  payment_type?:string;
-  items:Array<ItemParameters>;
-}
-
-interface AddShippingInfo {
-  currency:string;
-  value:number;
-  coupon?:string;
-  shipping_tier?:string;
-  items: Array<ItemParameters>;
-}
-
-interface AddToCart {
-  currency:string;
-  value:number;
-  items:Array<ItemParameters>;
-}
-
-interface AddToWishlistOrRemoveFromCart {
-  currency:string;
-  value:number;
-  items:Array<ItemParameters>;
-}
-
-interface EarnVirtualCurrency {
-  earn_virtual_currency?:string;
-  value?:number;
-}
-
-interface Exception {
-  description?:string;
-  fatal?:boolean;
-}
-
-interface GenerateLead {
-  currency:string;
-  value:number;
-}
-
-interface LevelEnd {
-  level_name?: string;
-  success?:boolean;
-}
-
-interface LevelUp {
-  level?: number;
-  character?:string;
-}
-
-interface PageView {
-  page_location?: string;
-  client_id?: string;
-  language?: string;
-  page_encoding?: string;
-  page_title?: string;
-  user_agent?: string;
-}
-
-interface PostScore {
-  score:number;
-  level?:number;
-  character?:string;
-}
-
-interface PurchaseRefund {
-  currency:string;
-  transaction_id:string;
-  value:number;
-  coupon?:string;
-  shipping?:number;
-  tax?:number;
-  items:Array<ItemParameters>;
-}
-
-interface SelectContent {
-  content_type?:string;
-  content_id?:string;
-}
-
-interface SelectItem {
-  item_list_id?:string;
-  item_list_name?:string;
-  items:Array<ItemParameters>;
-}
-
-interface SelectPromotion {
-  creative_name?:string;
-  creative_slot?:string;
-  promotion_id?:string;
-  promotion_name?:string;
-  items:Array<PromotionParameters>;
-}
-
-interface Share {
-  method?:string;
-  content_type?:string;
-  item_id?:string;
-}
-
-interface SignUp {
-  method?:string;
-}
-
-interface SpendVirtualCurrency {
-  value:number;
-  virtual_currency_name:string;
-  item_name:string;
-}
-
-interface UnlockAchievement {
-  achievement_id:string;
-}
-
-interface ViewCart {
-  currency:string;
-  value:number;
-  items: Array<ItemParameters>
-}
-
-interface ViewItem {
-  currency:string;
-  value:number;
-  items:Array<ItemParameters>;
-}
-
-interface ViewItemList {
-  item_list_id?:string;
-  item_list_name?:string;
-  items:Array<ItemParameters>;
-}
-
-interface ViewPromotion {
-  creative_name?:string;
-  creative_slot?:string;
-  promotion_id?:string;
-  promotion_name?:string;
-  items:Array<PromotionParameters>;
-}
-
-interface ViewSearchResults {
-  search_term?:string;
-}
-
-interface JoinGroup {
-  group_id?:string;
-}
-
-interface LevelStart {
-  level_name:string
-}
-
-interface Login {
-  login?:string;
-}
-
-interface Search {
-  search_term:string
-}
-
-interface gtag {
-  (command:'config', TARGET_ID:string, configInfo?: KeyValueParams | ControlParams): void;
-  (command:'js', value: Date):void;
-  (command:'get', TARGET_ID:string, fieldName:string, callbackFunc: requestedFieldCallback): void;
-  (command:'set', customerParameter: KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'add_payment_info', customerParameter:AddPaymentInfo | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'add_shipping_info', customerParameter:AddShippingInfo | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'add_to_cart', customerParameter:AddToCart | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'add_to_wishlist', customerParameter:AddToWishlistOrRemoveFromCart | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'begin_checkout', customerParameter:AddToWishlistOrRemoveFromCart | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'earn_virtual_currency', customerParameter:EarnVirtualCurrency | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'exception', customerParameter:Exception | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'generate_lead', customerParameter:GenerateLead | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'join_group', customerParameter:JoinGroup | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'level_end', customerParameter:LevelEnd | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'level_start', customerParameter:LevelStart | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'level_up', customerParameter:LevelUp | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'login', customerParameter:Login | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'page_view', customerParameter:PageView | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'post_score', customerParameter:PostScore | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'purchase', customerParameter:PurchaseRefund | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'refund', customerParameter:PurchaseRefund | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'remove_from_cart', customerParameter:AddToWishlistOrRemoveFromCart | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'search', customerParameter:Search | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'select_content', customerParameter:SelectContent | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'select_item', customerParameter:SelectItem | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'select_promotion', customerParameter:SelectPromotion | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'share', customerParameter:Share | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'sign_up', customerParameter:SignUp | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'spend_virtual_currency', customerParameter:SpendVirtualCurrency | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'tutorial_begin', customerParameter:KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'tutorial_complete', customerParameter:KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'unlock_achievement', customerParameter:UnlockAchievement | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'view_cart', customerParameter:ViewCart | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'view_item', customerParameter:ViewItem | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'view_item_list', customerParameter:ViewItemList | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'view_promotion', customerParameter:ViewPromotion | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:'view_search_results', customerParameter:ViewSearchResults | KeyValueParams | ControlParams):void;
-  (command:'event', eventName:string, customerParameter:KeyValueParams | ControlParams):void;
-  (command:'consent', consent:'default', customerParameter:ConsentParams | KeyValueParams):void;
-  (command:'consent', consent:'update', customerParameter:ConsentParams | KeyValueParams):void;
-}
-
+
+/**
+ * gtag definition, referenced via here https://developers.google.com/tag-platform/gtagjs/reference
+ * 
+ */
+type requestedFieldCallback = (fieldName:string) => void;
+type eventCallback = () => void;
+
+interface KeyValueParams {
+  [key:string]: string | number | boolean;
+}
+
+interface ConsentParams {
+  ad_storage: 'granted' | 'denied';
+  analytics_storage: 'granted' | 'denied';
+  wait_for_update: number;
+}
+
+interface ControlParams {
+  groups: string;
+  send_to: string;
+  event_callback:eventCallback;
+  event_timeout:number;
+}
+
+interface ItemParameters {
+  item_id: string;
+  item_name: string;
+  affiliation?:string;
+  coupon?:string;
+  discount?:number;
+  index?:number;
+  item_brand?:string;
+  item_category?:string;
+  item_category2?:string;
+  item_category3?:string;
+  item_category4?:string;
+  item_category5?:string;
+  item_list_id?:string;
+  item_list_name?:string;
+  item_variant?:string;
+  location_id?:string;
+  price?:number;
+  quantity?:number;
+}
+
+interface PromotionParameters extends ItemParameters {
+  creative_name?:string;
+  creative_slot?:string;
+  promotion_id?:string;
+  promotion_name?:string;
+}
+
+interface AddPaymentInfo {
+  currency: string;
+  value: number;
+  coupon?:string;
+  payment_type?:string;
+  items:Array<ItemParameters>;
+}
+
+interface AddShippingInfo {
+  currency:string;
+  value:number;
+  coupon?:string;
+  shipping_tier?:string;
+  items: Array<ItemParameters>;
+}
+
+interface AddToCart {
+  currency:string;
+  value:number;
+  items:Array<ItemParameters>;
+}
+
+interface AddToWishlistOrRemoveFromCart {
+  currency:string;
+  value:number;
+  items:Array<ItemParameters>;
+}
+
+interface EarnVirtualCurrency {
+  earn_virtual_currency?:string;
+  value?:number;
+}
+
+interface Exception {
+  description?:string;
+  fatal?:boolean;
+}
+
+interface GenerateLead {
+  currency:string;
+  value:number;
+}
+
+interface LevelEnd {
+  level_name?: string;
+  success?:boolean;
+}
+
+interface LevelUp {
+  level?: number;
+  character?:string;
+}
+
+interface PageView {
+  page_location?: string;
+  client_id?: string;
+  language?: string;
+  page_encoding?: string;
+  page_title?: string;
+  user_agent?: string;
+}
+
+interface PostScore {
+  score:number;
+  level?:number;
+  character?:string;
+}
+
+interface PurchaseRefund {
+  currency:string;
+  transaction_id:string;
+  value:number;
+  coupon?:string;
+  shipping?:number;
+  tax?:number;
+  items:Array<ItemParameters>;
+}
+
+interface SelectContent {
+  content_type?:string;
+  content_id?:string;
+}
+
+interface SelectItem {
+  item_list_id?:string;
+  item_list_name?:string;
+  items:Array<ItemParameters>;
+}
+
+interface SelectPromotion {
+  creative_name?:string;
+  creative_slot?:string;
+  promotion_id?:string;
+  promotion_name?:string;
+  items:Array<PromotionParameters>;
+}
+
+interface Share {
+  method?:string;
+  content_type?:string;
+  item_id?:string;
+}
+
+interface SignUp {
+  method?:string;
+}
+
+interface SpendVirtualCurrency {
+  value:number;
+  virtual_currency_name:string;
+  item_name:string;
+}
+
+interface UnlockAchievement {
+  achievement_id:string;
+}
+
+interface ViewCart {
+  currency:string;
+  value:number;
+  items: Array<ItemParameters>
+}
+
+interface ViewItem {
+  currency:string;
+  value:number;
+  items:Array<ItemParameters>;
+}
+
+interface ViewItemList {
+  item_list_id?:string;
+  item_list_name?:string;
+  items:Array<ItemParameters>;
+}
+
+interface ViewPromotion {
+  creative_name?:string;
+  creative_slot?:string;
+  promotion_id?:string;
+  promotion_name?:string;
+  items:Array<PromotionParameters>;
+}
+
+interface ViewSearchResults {
+  search_term?:string;
+}
+
+interface JoinGroup {
+  group_id?:string;
+}
+
+interface LevelStart {
+  level_name:string
+}
+
+interface Login {
+  login?:string;
+}
+
+interface Search {
+  search_term:string
+}
+
+interface gtag {
+  (command:'config', TARGET_ID:string, configInfo?: KeyValueParams | ControlParams): void;
+  (command:'js', value: Date):void;
+  (command:'get', TARGET_ID:string, fieldName:string, callbackFunc: requestedFieldCallback): void;
+  (command:'set', customerParameter: KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'add_payment_info', customerParameter:AddPaymentInfo | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'add_shipping_info', customerParameter:AddShippingInfo | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'add_to_cart', customerParameter:AddToCart | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'add_to_wishlist', customerParameter:AddToWishlistOrRemoveFromCart | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'begin_checkout', customerParameter:AddToWishlistOrRemoveFromCart | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'earn_virtual_currency', customerParameter:EarnVirtualCurrency | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'exception', customerParameter:Exception | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'generate_lead', customerParameter:GenerateLead | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'join_group', customerParameter:JoinGroup | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'level_end', customerParameter:LevelEnd | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'level_start', customerParameter:LevelStart | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'level_up', customerParameter:LevelUp | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'login', customerParameter:Login | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'page_view', customerParameter:PageView | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'post_score', customerParameter:PostScore | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'purchase', customerParameter:PurchaseRefund | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'refund', customerParameter:PurchaseRefund | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'remove_from_cart', customerParameter:AddToWishlistOrRemoveFromCart | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'search', customerParameter:Search | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'select_content', customerParameter:SelectContent | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'select_item', customerParameter:SelectItem | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'select_promotion', customerParameter:SelectPromotion | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'share', customerParameter:Share | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'sign_up', customerParameter:SignUp | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'spend_virtual_currency', customerParameter:SpendVirtualCurrency | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'tutorial_begin', customerParameter:KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'tutorial_complete', customerParameter:KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'unlock_achievement', customerParameter:UnlockAchievement | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'view_cart', customerParameter:ViewCart | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'view_item', customerParameter:ViewItem | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'view_item_list', customerParameter:ViewItemList | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'view_promotion', customerParameter:ViewPromotion | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:'view_search_results', customerParameter:ViewSearchResults | KeyValueParams | ControlParams):void;
+  (command:'event', eventName:string, customerParameter:KeyValueParams | ControlParams):void;
+  (command:'consent', consent:'default', customerParameter:ConsentParams | KeyValueParams):void;
+  (command:'consent', consent:'update', customerParameter:ConsentParams | KeyValueParams):void;
+}
+
 export {gtag, KeyValueParams};