@brainfish-ai/web-tracker - npm Package Compare versions

Comparing version 0.0.4-alpha.5 to 0.0.4-alpha.6

dist/index.js

@@ -1,1 +0,1 @@
-export{T as Tracker}from"./tracker-BndE_qUK.mjs";
+export{T as Tracker}from"./index-Dj8O_Q7a.mjs";

package.json

 {
   "name": "@brainfish-ai/web-tracker",
-  "version": "0.0.4-alpha.5",
+  "version": "0.0.4-alpha.6",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "description": "Brainfish Tracker for Web",

src/index.ts

@@ -1,2 +0,191 @@
-export * from './tracker';
-export * from './types.d';
+/* eslint-disable @typescript-eslint/unbound-method */
+
+import type {
+  TrackerSdkOptions,
+  TrackProperties,
+} from '@brainfish-ai/tracker-sdk';
+import { TrackerSdk } from '@brainfish-ai/tracker-sdk';
+import { screenshot } from './utils/snapshot';
+
+export type * from '@brainfish-ai/tracker-sdk';
+
+export type TrackerOptions = TrackerSdkOptions & {
+  trackOutgoingLinks?: boolean;
+  trackScreenViews?: boolean;
+  trackAttributes?: boolean;
+  trackHashChanges?: boolean;
+};
+
+function toCamelCase(str: string) {
+  return str.replace(/([-_][a-z])/gi, ($1) =>
+    $1.toUpperCase().replace('-', '').replace('_', ''),
+  );
+}
+
+export class Tracker extends TrackerSdk {
+  private lastPath = '';
+  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+    static mock: any;
+
+  constructor(public options: TrackerOptions) {
+    super({
+      sdk: 'web',
+      sdkVersion: __PACKAGE_VERSION__,
+      ...options,
+    });
+
+    if (!this.isServer()) {
+      this.setGlobalProperties({
+        __referrer: document.referrer,
+      });
+
+      if (this.options.trackOutgoingLinks) {
+        this.trackOutgoingLinks();
+      }
+
+      if (this.options.trackScreenViews) {
+        this.trackScreenViews();
+      }
+
+      if (this.options.trackAttributes) {
+        this.trackAttributes();
+      }
+    }
+  }
+
+  private debounce(func: () => void, delay: number) {
+    this.debounceTimer && clearTimeout(this.debounceTimer);
+    this.debounceTimer = setTimeout(func, delay);
+  }
+
+  private isServer() {
+    return typeof document === 'undefined';
+  }
+
+  public trackOutgoingLinks() {
+    if (this.isServer()) {
+      return;
+    }
+
+    document.addEventListener('click', (event) => {
+      const target = event.target as HTMLElement;
+      const link = target.closest('a');
+      if (link && target) {
+        const href = link.getAttribute('href');
+        if (href?.startsWith('http')) {
+          super.track('link_out', {
+            href,
+            text:
+              link.innerText ||
+              link.getAttribute('title') ||
+              target.getAttribute('alt') ||
+              target.getAttribute('title'),
+          });
+        }
+      }
+    });
+  }
+
+  public trackScreenViews() {
+    if (this.isServer()) {
+      return;
+    }
+
+    this.screenView();
+
+    const oldPushState = history.pushState;
+    history.pushState = function pushState(...args) {
+      const ret = oldPushState.apply(this, args);
+      window.dispatchEvent(new Event('pushstate'));
+      window.dispatchEvent(new Event('locationchange'));
+      return ret;
+    };
+
+    const oldReplaceState = history.replaceState;
+    history.replaceState = function replaceState(...args) {
+      const ret = oldReplaceState.apply(this, args);
+      window.dispatchEvent(new Event('replacestate'));
+      window.dispatchEvent(new Event('locationchange'));
+      return ret;
+    };
+
+    window.addEventListener('popstate', function () {
+      window.dispatchEvent(new Event('locationchange'));
+    });
+
+    const eventHandler = () => this.debounce(() => this.screenView(), 50);
+
+    if (this.options.trackHashChanges) {
+      window.addEventListener('hashchange', eventHandler);
+    } else {
+      window.addEventListener('locationchange', eventHandler);
+    }
+  }
+
+  public trackAttributes() {
+    if (this.isServer()) {
+      return;
+    }
+
+    document.addEventListener('click', (event) => {
+      const target = event.target as HTMLElement;
+      const btn = target.closest('button');
+      const anchor = target.closest('a');
+      const element = btn?.getAttribute('data-track')
+        ? btn
+        : anchor?.getAttribute('data-track')
+          ? anchor
+          : null;
+      if (element) {
+        const properties: Record<string, unknown> = {};
+        for (const attr of element.attributes) {
+          if (attr.name.startsWith('data-') && attr.name !== 'data-track') {
+            properties[toCamelCase(attr.name.replace(/^data-/, ''))] =
+              attr.value;
+          }
+        }
+        const name = element.getAttribute('data-track');
+        if (name) {
+          super.track(name, properties);
+        }
+      }
+    });
+  }
+
+  async screenView(properties?: TrackProperties): Promise<void>;
+  async screenView(path: string, properties?: TrackProperties): Promise<void>;
+  async screenView(
+    pathOrProperties?: string | TrackProperties,
+    propertiesOrUndefined?: TrackProperties,
+  ): Promise<void> {
+    if (this.isServer()) {
+      return;
+    }
+
+    let path: string;
+    let properties: TrackProperties | undefined;
+
+    if (typeof pathOrProperties === 'string') {
+      path = pathOrProperties;
+      properties = propertiesOrUndefined;
+    } else {
+      path = window.location.href;
+      properties = pathOrProperties;
+    }
+
+    if (this.lastPath === path) {
+      return;
+    }
+
+    // capture screenshot
+    const snapshot = await screenshot();
+
+    this.lastPath = path;
+    super.track('screen_view', {
+      ...(properties ?? {}),
+      screenshot: snapshot,
+      __path: path,
+      __title: document.title,
+    });
+  }
+}

src/tracker.ts

@@ -1,192 +0,31 @@
-/* eslint-disable @typescript-eslint/unbound-method */
+import { Tracker } from './index';
 
-import type {
-    TrackerSdkOptions,
-    TrackProperties,
-  } from '@brainfish-ai/tracker-sdk';
-  import { TrackerSdk } from '@brainfish-ai/tracker-sdk';
-  import { screenshot } from './utils/snapshot';
-  
-  export type * from '@brainfish-ai/tracker-sdk';
-  
-  export type TrackerOptions = TrackerSdkOptions & {
-    trackOutgoingLinks?: boolean;
-    trackScreenViews?: boolean;
-    trackAttributes?: boolean;
-    trackHashChanges?: boolean;
-  };
-  
-  function toCamelCase(str: string) {
-    return str.replace(/([-_][a-z])/gi, ($1) =>
-      $1.toUpperCase().replace('-', '').replace('_', ''),
-    );
+declare global {
+  interface Window {
+    tracker: {
+      q?: [string, ...any[]];
+      (method: string, ...args: any[]): void;
+    };
   }
-  
-  export class Tracker extends TrackerSdk {
-    private lastPath = '';
-    private debounceTimer: ReturnType<typeof setTimeout> | null = null;
-      static mock: any;
-  
-    constructor(public options: TrackerOptions) {
-      super({
-        sdk: 'web',
-        sdkVersion: __PACKAGE_VERSION__,
-        ...options,
-      });
-  
-      if (!this.isServer()) {
-        this.setGlobalProperties({
-          __referrer: document.referrer,
-        });
-  
-        if (this.options.trackOutgoingLinks) {
-          this.trackOutgoingLinks();
-        }
-  
-        if (this.options.trackScreenViews) {
-          this.trackScreenViews();
-        }
-  
-        if (this.options.trackAttributes) {
-          this.trackAttributes();
-        }
+}
+
+((window) => {
+  if (window.tracker && 'q' in window.tracker) {
+    const queue = window.tracker.q || [];
+    const tracker = new Tracker(queue.shift()[1]) as any;
+    queue.forEach((item) => {
+      if (item[0] in tracker) {
+        tracker[item[0]](...item.slice(1));
       }
-    }
-  
-    private debounce(func: () => void, delay: number) {
-      this.debounceTimer && clearTimeout(this.debounceTimer);
-      this.debounceTimer = setTimeout(func, delay);
-    }
-  
-    private isServer() {
-      return typeof document === 'undefined';
-    }
-  
-    public trackOutgoingLinks() {
-      if (this.isServer()) {
-        return;
-      }
-  
-      document.addEventListener('click', (event) => {
-        const target = event.target as HTMLElement;
-        const link = target.closest('a');
-        if (link && target) {
-          const href = link.getAttribute('href');
-          if (href?.startsWith('http')) {
-            super.track('link_out', {
-              href,
-              text:
-                link.innerText ||
-                link.getAttribute('title') ||
-                target.getAttribute('alt') ||
-                target.getAttribute('title'),
-            });
-          }
-        }
-      });
-    }
-  
-    public trackScreenViews() {
-      if (this.isServer()) {
-        return;
-      }
-  
-      this.screenView();
-  
-      const oldPushState = history.pushState;
-      history.pushState = function pushState(...args) {
-        const ret = oldPushState.apply(this, args);
-        window.dispatchEvent(new Event('pushstate'));
-        window.dispatchEvent(new Event('locationchange'));
-        return ret;
-      };
-  
-      const oldReplaceState = history.replaceState;
-      history.replaceState = function replaceState(...args) {
-        const ret = oldReplaceState.apply(this, args);
-        window.dispatchEvent(new Event('replacestate'));
-        window.dispatchEvent(new Event('locationchange'));
-        return ret;
-      };
-  
-      window.addEventListener('popstate', function () {
-        window.dispatchEvent(new Event('locationchange'));
-      });
-  
-      const eventHandler = () => this.debounce(() => this.screenView(), 50);
-  
-      if (this.options.trackHashChanges) {
-        window.addEventListener('hashchange', eventHandler);
+    });
+
+    window.tracker = (t, ...args) => {
+      const fn = tracker[t] ? tracker[t].bind(tracker) : undefined;
+      if (typeof fn === 'function') {
+        fn(...args);
       } else {
-        window.addEventListener('locationchange', eventHandler);
+        console.warn(`tracker.js: ${t} is not a function`);
       }
-    }
-  
-    public trackAttributes() {
-      if (this.isServer()) {
-        return;
-      }
-  
-      document.addEventListener('click', (event) => {
-        const target = event.target as HTMLElement;
-        const btn = target.closest('button');
-        const anchor = target.closest('a');
-        const element = btn?.getAttribute('data-track')
-          ? btn
-          : anchor?.getAttribute('data-track')
-            ? anchor
-            : null;
-        if (element) {
-          const properties: Record<string, unknown> = {};
-          for (const attr of element.attributes) {
-            if (attr.name.startsWith('data-') && attr.name !== 'data-track') {
-              properties[toCamelCase(attr.name.replace(/^data-/, ''))] =
-                attr.value;
-            }
-          }
-          const name = element.getAttribute('data-track');
-          if (name) {
-            super.track(name, properties);
-          }
-        }
-      });
-    }
-  
-    async screenView(properties?: TrackProperties): Promise<void>;
-    async screenView(path: string, properties?: TrackProperties): Promise<void>;
-    async screenView(
-      pathOrProperties?: string | TrackProperties,
-      propertiesOrUndefined?: TrackProperties,
-    ): Promise<void> {
-      if (this.isServer()) {
-        return;
-      }
-  
-      let path: string;
-      let properties: TrackProperties | undefined;
-  
-      if (typeof pathOrProperties === 'string') {
-        path = pathOrProperties;
-        properties = propertiesOrUndefined;
-      } else {
-        path = window.location.href;
-        properties = pathOrProperties;
-      }
-  
-      if (this.lastPath === path) {
-        return;
-      }
-  
-      // capture screenshot
-      const snapshot = await screenshot();
-  
-      this.lastPath = path;
-      super.track('screen_view', {
-        ...(properties ?? {}),
-        screenshot: snapshot,
-        __path: path,
-        __title: document.title,
-      });
-    }
+    };
   }
-  
+})(window);

vite.config.ts

@@ -23,3 +23,3 @@ import { defineConfig } from 'vite';
     lib: {
-      entry: ['src/index.ts', 'src/cdn.ts'],
+      entry: ['index.ts', 'src/tracker.ts'],
       formats: ['es'],
@@ -26,0 +26,0 @@ fileName: (format, entryName) => `${entryName}.js`,

No alert changes

Worsened metrics

Total package byte prevSize

20963

decreased by-1.75%

No dependency changes