@ginger-ai/ginger-js 0.0.2 → 0.0.3

package/README.md

@@ -24,6 +24,12 @@ Install via NPM:
 npm install @ginger-ai/ginger-js
 ```
 
+Install via Yarn:
+
+```bash
+yarn add @ginger-ai/ginger-js
+```
+
 ## Implementation Guide
 
 ### NPM Implementation
@@ -33,7 +39,7 @@ import { GingerJsClient } from "@ginger-ai/ginger-js";
 
 async function initializeGinger() {
   const gingerjs = new GingerJsClient({
-    apikey: "your-api-key"
+    apikey: "Public-Key"
   });
   const response = await gingerjs.initialize();
 
@@ -60,7 +66,7 @@ The library operates through a request session-based architecture:
 2. **Behavior Tracking** (Optional):
    - Requires: `event_type`, `request_id`, and `track_fields`
    - Monitors specified input elements for user interaction
-3. **Data Submission**: Returns a structured◊◊ response:
+3. **Data Submission**: Returns a structured response:
    ```javascript
    {
      event_id: number,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ginger-ai/ginger-js",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "GingerJs JavaScript agent for Single page application (SPA)",
   "main": "dist/ginger.cjs.js",
   "module": "dist/ginger.esm.js",

package/src/behaviour/computeFieldInputMetrics.ts

@@ -0,0 +1,106 @@
+import { FieldMetrics } from "../core";
+
+interface computeFieldParams {
+  id: string;
+  event: any;
+  currentField: any;
+  focusFields: any;
+}
+
+export const computeFieldInputMetrics = ({
+  id,
+  event,
+  currentField,
+  focusFields,
+}: computeFieldParams) => {
+  const now = performance.now();
+  const lastKeyStrokeTime = currentField.ended_at;
+
+  const isCorrected = isCorrectionAction(event.inputType);
+  const isPaste = isPasteAction(event.inputType);
+  const isPause = isPauseAction(now, lastKeyStrokeTime);
+  const isAutoFill = isAutofillAction(event, currentField);
+  const focusTime = focusFields?.[id];
+
+  const started_at = currentField.started_at || now;
+  const paste_count = currentField.paste_count + (isPaste ? 1 : 0);
+  const autofill_count = currentField.autofill_count + (isAutoFill ? 1 : 0);
+  const pauses = currentField.pauses + (isPause ? 1 : 0);
+  const corrections_count =
+    currentField.corrections_count + (isCorrected ? 1 : 0);
+  const interaction_count = currentField.interaction_count + 1;
+  const characters_count = event.target.value.length;
+  const pause_durations = calculatePauseDurations(currentField, isPause, now);
+  const hesitation_time = calculateHesitationTime(started_at, focusTime);
+
+  return {
+    ...currentField,
+    field_name: id,
+    started_at,
+    ended_at: now,
+    interaction_count,
+    characters_count,
+    paste_count,
+    autofill_count,
+    corrections_count,
+    pauses,
+    hesitation_time,
+    pause_durations,
+  };
+};
+
+const isCorrectionAction = (inputType: string) =>
+  inputType === "deleteContentBackward" ||
+  inputType == "deleteContentForward" ||
+  inputType == "deleteSoftLineBackward";
+
+const isPasteAction = (inputType: string) =>
+  inputType == "insertFromPaste" || inputType == "insertFromDrop";
+
+const isPauseAction = (
+  now: number,
+  lastKeyStrokeTime: number,
+  waitTime: number = 2500
+) => {
+  const timeSinceLastKeystroke = now - lastKeyStrokeTime;
+  return lastKeyStrokeTime !== 0 && timeSinceLastKeystroke > waitTime;
+};
+
+const isAutofillAction = (event: any, currentField: any) => {
+  const { inputType, isComposing } = event;
+  const isPaste = isPasteAction(inputType);
+  const isRedo = isRedoAction(inputType);
+  const isUndo = isUndoAction(inputType);
+
+  if (isPaste || isRedo || isUndo || isComposing) return false;
+
+  const prevCharacterCount = currentField.characters_count;
+  const currentCharacterCount = event.target.value.length;
+  const diff = currentCharacterCount - prevCharacterCount;
+
+  return diff > 1;
+};
+
+const isRedoAction = (inputType: string) => inputType === "historyRedo";
+const isUndoAction = (inputType: string) => inputType === "historyUndo";
+
+const calculatePauseDurations = (
+  currentField: FieldMetrics,
+  isPause: boolean,
+  now: number
+) => {
+  if (!isPause) return currentField.pause_durations;
+
+  const duration = now - currentField.ended_at;
+  const pauseDurations = [...currentField.pause_durations, duration];
+  return pauseDurations;
+};
+
+const calculateHesitationTime = (
+  typeStartTime: number,
+  focusTime: number | null | undefined
+) => {
+  if (!focusTime) return 0;
+  const hesitationTime = typeStartTime - focusTime;
+  return Math.max(0, hesitationTime);
+};

package/src/behaviour/helpers.ts

@@ -0,0 +1,60 @@
+import { FieldMetrics } from "../core";
+
+export function createFieldMetric(id: string, ltm: boolean): FieldMetrics {
+  return {
+    field_name: id,
+    ltm: ltm,
+    started_at: 0,
+    ended_at: 0,
+    interaction_count: 0,
+    characters_count: 0,
+    paste_count: 0,
+    autofill_count: 0,
+    corrections_count: 0,
+    modifier_key_count: 0,
+    pauses: 0,
+    hesitation_time: 0,
+    pause_durations: [],
+    key_hold_times: [],
+  };
+}
+
+export const MODIFIER_KEYS = [
+  "Meta",
+  "Alt",
+  "Control",
+  "Shift",
+  "CapsLock",
+  "Tab",
+  "Backspace",
+  "Enter",
+  "Escape",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+  "Insert",
+  "Delete",
+  "ContextMenu",
+  "NumLock",
+  "ScrollLock",
+  "Pause",
+];
+
+export const computeFlightTimeMetric = (flights: any) => {
+  return flights.reduce((acc: any, curr: any, index: number, arr: any) => {
+    if (index === 0) return acc;
+
+    const prev = arr[index - 1];
+
+    if (curr.downTime != null && prev.upTime != null) {
+      const flightTime = curr.downTime - prev.upTime;
+      acc.push(flightTime);
+    }
+    return acc;
+  }, []);
+};

package/src/behaviour/index.ts

@@ -1,77 +1,121 @@
-import { GingerClientError, FieldMetrics, FillEnum, FillMethod, pageVisibility, Field } from "../core";
-
-interface TrackedFieldMetrics extends FieldMetrics {
-  readonly element: HTMLInputElement | HTMLTextAreaElement;
-}
-
-interface EventConfig {
-  readonly pauseThresholdMs: number;
-}
+import {
+  GingerClientError,
+  FieldMetrics,
+  pageVisibility,
+  Field,
+  FocusMetrics,
+} from "../core";
+import { computeFieldInputMetrics } from "./computeFieldInputMetrics";
+import {
+  computeFlightTimeMetric,
+  createFieldMetric,
+  MODIFIER_KEYS,
+} from "./helpers";
+
+type KeyTiming = { downTime: number };
+type ActiveField = Map<string, KeyTiming>;
+type ActiveKeys = Map<string, ActiveField>;
+type HoldTime = Record<string, number[]>;
+type FullKeyTiming = {
+  upTime: number | null;
+  downTime: number | null;
+  key: string;
+};
+type FlightTime = Record<string, FullKeyTiming[]>;
+type ModifierKey = Record<string, number>;
 
-const { getCount, addListener, removeListener } = pageVisibility();
+const { getCount, addPageListener, removePageListener } = pageVisibility();
 
 class EventTracker {
-  private static readonly DEFAULT_CONFIG: EventConfig = {
-    pauseThresholdMs: 1500,
-  };
+  private trackedFieldsMap: Record<string, FieldMetrics> = {};
+  private focusFieldsMap: FocusMetrics = {};
 
-  private readonly config: EventConfig;
-  private isInitialized = false;
-  private readonly fields: TrackedFieldMetrics[] = [];
-  private readonly trackedFieldIds = new Set<string>();
+  private activeKeyMap: ActiveKeys = new Map();
+  private holdTimeMap: HoldTime = {};
+  private flightTimeMap: FlightTime = {};
+  private modifierKeysMap: ModifierKey = {};
 
-  constructor(config: Partial<EventConfig> = {}) {
-    this.config = { ...EventTracker.DEFAULT_CONFIG, ...config };
-    addListener();
+  constructor() {
+    addPageListener();
   }
 
   /**
-   * Initialize tracking for multiple form fields
+   * Field that were previously tracked and needs to be removed
    */
-  public initializeTracking(fields: readonly Field[]): void {
-    const newFields = fields.filter(
-      (field) => !this.trackedFieldIds.has(field.id)
-    );
+  public removeUntrackedFieldsMap(fields: Field[]) {
+    const trackedIds = Object.keys(this.trackedFieldsMap);
+    const newIds = fields.map((field) => field.id);
+    const IdsToUntrack = trackedIds.filter((id) => !newIds.includes(id));
+
+    IdsToUntrack.forEach((id) => {
+      this.removeFromTrackedMap(id);
+      this.removeFromFocusMap(id);
+      this.removeFromHoldTimeMap(id);
+      this.removeFromFlightTimeMap(id);
+      this.removeFromModifierKeysMap(id);
+    });
+  }
 
-    newFields.forEach((field) => this.trackField(field));
-    this.isInitialized = true;
+  private removeFromTrackedMap(id: string) {
+    const map = this.trackedFieldsMap;
+    const field = map[id];
+    if (!field) return;
+    delete map[id];
   }
 
-  /**
-   * Get all tracked metrics data (excluding DOM elements)
-   */
-  get metrics(): FieldMetrics[] {
-    this.ensureInitialized();
-    return this.fields.map(({ element, ...field }) => field);
+  private removeFromFocusMap(id: string) {
+    const map = this.focusFieldsMap;
+    const field = map[id];
+    if (!field) return;
+    delete map[id];
+  }
+
+  private removeFromHoldTimeMap(id: string) {
+    const map = this.holdTimeMap;
+    const field = map[id];
+    if (!field) return;
+    delete map[id];
+  }
+
+  private removeFromFlightTimeMap(id: string) {
+    const map = this.flightTimeMap;
+    const field = map[id];
+    if (!field) return;
+    delete map[id];
+  }
+
+  private removeFromModifierKeysMap(id: string) {
+    const map = this.modifierKeysMap;
+    const field = map[id];
+    if (!field) return;
+    delete map[id];
   }
 
   /**
-   * Remove tracking from specific field or all fields
+   * Initialize tracking for multiple form fields
    */
-  public removeTracking(fieldId?: string): void {
-    if (fieldId) {
-      this.removeFieldTracking(fieldId);
-    } else {
-      this.removeAllTracking();
-    }
+  public startTracking(fields: readonly Field[]): void {
+    fields.forEach((field) => this.trackField(field));
   }
 
   // Private implementation methods
 
   private trackField(field: Field): void {
     const { id, ltm } = field;
-    const element = this.getValidElement(id);
-    const fieldMetric = this.createFieldMetric(id, element, ltm);
+    const element = this.validateElement(id);
 
-    this.fields.push(fieldMetric);
-    this.trackedFieldIds.add(id);
+    const metrics = createFieldMetric(id, ltm ?? false);
+    this.trackedFieldsMap[id] = metrics;
 
-    // Use bound method to maintain context
-    const boundHandler = this.createInputHandler(fieldMetric);
-    element.addEventListener("input", boundHandler);
+    element.addEventListener("input", (e) => this.computeChangeMetrics(id, e));
+    element.addEventListener("focus", (e) => this.computeFocusMetrics(id, e));
+    element.addEventListener("keydown", (e) =>
+      this.computeKeydownMetrics(id, e)
+    );
+    element.addEventListener("keyup", (e) => this.computeKeyupMetrics(id, e));
   }
 
-  private getValidElement(id: string): HTMLInputElement | HTMLTextAreaElement {
+  private validateElement(id: string): HTMLInputElement | HTMLTextAreaElement {
     const element = document.getElementById(id);
 
     if (!element) {
@@ -80,7 +124,7 @@ class EventTracker {
       );
     }
 
-    if (!this.isValidInputElement(element)) {
+    if (!this.validateType(element)) {
       throw new GingerClientError(
         `Element with ID "${id}" must be an HTMLInputElement or HTMLTextAreaElement.`
       );
@@ -89,7 +133,7 @@ class EventTracker {
     return element;
   }
 
-  private isValidInputElement(
+  private validateType(
     element: Element
   ): element is HTMLInputElement | HTMLTextAreaElement {
     return (
@@ -98,159 +142,136 @@ class EventTracker {
     );
   }
 
-  private createFieldMetric(
-    id: string,
-    element: HTMLInputElement | HTMLTextAreaElement,
-    ltm?: boolean
-  ): TrackedFieldMetrics {
-    return {
-      field_name: id,
-      started_at: 0,
-      ended_at: 0,
-      interaction_count: 0,
-      fill_method: null,
-      paste_count: 0,
-      ltm: ltm ?? false,
-      corrections_count: 0,
-      pauses: 0,
-      pauseDurations: [],
-      element,
-    };
-  }
+  private computeChangeMetrics(id: string, event: Event): void {
+    const map = this.trackedFieldsMap;
+    const currentField = map[id];
+    if (!currentField) return;
 
-  private createInputHandler(field: TrackedFieldMetrics) {
-    return (event: Event): void => {
-      this.handleInput(field, event as InputEvent);
-    };
+    const focusFieldsMap = this.focusFieldsMap;
+
+    const computedMetrics = computeFieldInputMetrics({
+      id,
+      event,
+      currentField,
+      focusFields: focusFieldsMap,
+    });
+
+    map[id] = computedMetrics;
   }
 
-  private handleInput(
-    currentField: TrackedFieldMetrics,
-    event: InputEvent
-  ): void {
-    const now = performance.now();
-    const lastInteractionTime = currentField.ended_at || 0;
+  private computeFocusMetrics(id: string, event: Event) {
+    const map = this.focusFieldsMap;
 
-    const interactions = this.analyzeInteraction(
-      currentField,
-      event,
-      now,
-      lastInteractionTime
-    );
+    if (map && !map?.[id]) {
+      const now = performance.now();
+      map[id] = now;
+    }
+  }
 
-    this.updateFieldMetrics(currentField, interactions, now);
+  private computeKeydownMetrics(id: string, event: any) {
+    const { key, timeStamp } = event;
+    this.addToActiveKeyStore(id, key, timeStamp);
+    this.addToFlightKeyStore(id, key, timeStamp);
+    this.computeModifierKeysCount(id, event);
   }
 
-  private analyzeInteraction(
-    field: TrackedFieldMetrics,
-    event: InputEvent,
-    now: number,
-    lastInteractionTime: number
-  ) {
-    const fillMethod = this.determineFillMethod(field, event);
-
-    return {
-      fillMethod,
-      isCorrection: this.isCorrection(event),
-      isPaste: this.isPaste(fillMethod, event),
-      isPause: this.isPause(now, lastInteractionTime),
-      pauseDuration: now - lastInteractionTime,
-    };
+  private addToActiveKeyStore(id: string, key: string, timestamp: number) {
+    const map = this.activeKeyMap;
+    const field = map.get(id) ?? new Map<string, KeyTiming>();
+    const downTime = timestamp;
+
+    if (field.has(key)) return;
+
+    field.set(key, { downTime });
+    map.set(id, field);
   }
 
-  private updateFieldMetrics(
-    field: TrackedFieldMetrics,
-    interactions: ReturnType<typeof this.analyzeInteraction>,
-    now: number
-  ): void {
-    // Initialize start time on first interaction
-    if (!field.started_at) {
-      field.started_at = now;
-    }
+  private addToFlightKeyStore(id: string, key: string, timestamp: number) {
+    const map = this.flightTimeMap;
+    const field = map[id] ?? [];
 
-    field.ended_at = now;
-    field.fill_method = interactions.fillMethod;
-    field.interaction_count += 1;
+    const keyTime = { key, downTime: timestamp, upTime: null };
+    field.push(keyTime);
 
-    if (interactions.isCorrection) field.corrections_count += 1;
-    if (interactions.isPaste) field.paste_count += 1;
-    if (interactions.isPause) {
-      field.pauses += 1;
-      field.pauseDurations.push(interactions.pauseDuration);
-    }
+    map[id] = field;
   }
 
-  private determineFillMethod(
-    field: TrackedFieldMetrics,
-    event: InputEvent
-  ): FillMethod {
-    const inputType = event.inputType;
-    if (!inputType) return FillEnum.paste;
-
-    const currentMethod: FillMethod =
-      inputType === "insertText"
-        ? FillEnum.typed
-        : inputType === "insertFromPaste"
-        ? FillEnum.paste
-        : FillEnum.mixed;
-
-    // If methods have been mixed, maintain "mixed" state
-    if (field.fill_method && field.fill_method !== currentMethod) {
-      return FillEnum.mixed;
+  private computeModifierKeysCount = (id: string, e: any) => {
+    const key = e.key;
+    const modifierKeys = this.modifierKeysMap;
+
+    if (MODIFIER_KEYS.includes(key)) {
+      modifierKeys[id] = (modifierKeys[id] || 0) + 1;
     }
+  };
 
-    return currentMethod;
-  }
+  private computeKeyupMetrics(id: string, e: any) {
+    const { key, timeStamp } = e;
 
-  private isCorrection(event: InputEvent): boolean {
-    return event.inputType === "deleteContentBackward";
+    this.computeKeyHoldTime(id, key, timeStamp);
+    this.computeFlightTime(id, key, timeStamp);
   }
 
-  private isPaste(fillMethod: FillMethod, event: InputEvent): boolean {
-    return (
-      fillMethod === FillEnum.paste || event.inputType === "insertFromPaste"
-    );
-  }
+  private computeKeyHoldTime = (id: string, key: string, timestamp: number) => {
+    const map = this.activeKeyMap;
 
-  private isPause(now: number, lastInteractionTime: number): boolean {
-    if (lastInteractionTime === 0) return false;
+    const field = map.get(id);
+    if (!field) return;
 
-    const timeSinceLastKeystroke = now - lastInteractionTime;
-    return timeSinceLastKeystroke > this.config.pauseThresholdMs;
-  }
+    const fieldObject = field.get(key);
+    if (!fieldObject) return;
 
-  private removeFieldTracking(fieldId: string): void {
-    const index = this.fields.findIndex(
-      (field) => field.field_name === fieldId
-    );
+    const { downTime } = fieldObject;
+    const upTime = timestamp;
+    const holdTime = upTime - downTime;
 
-    if (index === -1) return;
+    const holdTimes = this.holdTimeMap;
+    const holdTimeArray = (holdTimes[id] ||= []);
 
-    const field = this.fields[index];
-    this.cleanupFieldTracking(field);
+    holdTimeArray.push(holdTime);
 
-    this.fields.splice(index, 1);
-    this.trackedFieldIds.delete(fieldId);
-  }
+    field.delete(key);
+  };
+
+  private computeFlightTime = (id: string, key: string, timestamp: number) => {
+    const map = this.flightTimeMap;
+    const fieldArray = map[id];
+    if (!fieldArray) return;
 
-  private removeAllTracking(): void {
-    this.fields.forEach((field) => this.cleanupFieldTracking(field));
-    this.fields.length = 0;
-    this.trackedFieldIds.clear();
+    const lastEntry = fieldArray.findLast((f) => f.key === key);
+    if (!lastEntry) return;
+
+    lastEntry.upTime = timestamp;
+
+    const index = fieldArray.lastIndexOf(lastEntry);
+    if (index !== -1) {
+      fieldArray[index] = lastEntry;
+    }
+  };
+
+  private getFlightTime(id: string) {
+    const flights = this.flightTimeMap[id] || [];
+    return computeFlightTimeMetric(flights);
   }
 
-  private cleanupFieldTracking(field: TrackedFieldMetrics): void {
-    // Note: We can't remove the exact handler since we're using bound methods
-    // In a real implementation, you'd want to store the bound handlers
-    field.element.removeEventListener("input", this.createInputHandler(field));
+  public reset() {
+    this.trackedFieldsMap = {};
+    this.focusFieldsMap = {};
+    this.activeKeyMap = new Map();
+    this.holdTimeMap = {};
+    this.flightTimeMap = {};
+    this.modifierKeysMap = {};
   }
 
-  private ensureInitialized(): void {
-    if (!this.isInitialized) {
-      throw new GingerClientError(
-        "Ginger.trackEvent must be initialized before data can be fetched."
-      );
-    }
+  public serialize() {
+    const metrics = this.trackedFieldsMap;
+    return Object.values(metrics).map((metric) => {
+      const id = metric.field_name;
+      const key_hold_times = this.holdTimeMap[id] || [];
+      const flight_time = this.getFlightTime(id);
+      const modifier_key_count = this.modifierKeysMap[id];
+      return { ...metric, key_hold_times, flight_time, modifier_key_count };
+    });
   }
 }
 
@@ -258,22 +279,21 @@ class EventTracker {
 const eventTracker = new EventTracker();
 
 // Public API exports
-export const trackInputs = (fields: readonly Field[]): void => {
-  eventTracker.initializeTracking(fields);
+const trackInputs = (fields: Field[]): void => {
+  eventTracker.removeUntrackedFieldsMap(fields);
+  eventTracker.startTracking(fields);
 };
 
-export const getTrackedFields = (): {
+const trackingData = (): {
   distractions_count: number;
   fields: FieldMetrics[];
 } => {
   return {
     distractions_count: getCount(),
-    fields: eventTracker.metrics,
+    fields: eventTracker.serialize(),
   };
 };
 
-export const removeTracking = (fieldId?: string): void => {
-  eventTracker.removeTracking(fieldId);
-};
+const reset = () => eventTracker.reset();
 
-export { EventTracker, removeListener };
+export { EventTracker, removePageListener, trackInputs, trackingData, reset };

package/src/client/index.ts

@@ -1,7 +1,8 @@
 import {
   trackInputs,
-  getTrackedFields,
-  removeListener,
+  trackingData,
+  removePageListener,
+  reset,
 } from "../behaviour";
 
 import { buildInitialPayload } from "../device";
@@ -23,10 +24,14 @@ import {
   BehaviourPayloadResponseData,
 } from "../core";
 
+type EventPayload = {
+  event: BehaviourPayload;
+};
+
 interface GingerClient {
   initialize(configs: Configurations): Promise<PayloadResponse | undefined>;
   trackEvent(params: BehaviourParams): void;
-  getTrackedData(): BehaviourPayload;
+  getTrackedData(): EventPayload;
   submitEvent(): Promise<BehaviourPayloadResponseData>;
 }
 
@@ -43,7 +48,7 @@ export class GingerJsClient implements GingerClient {
 
   async initialize() {
     try {
-      const sdkInfo = { name: '@ginger-ai/ginger-js', version: '0.0.2' };
+      const sdkInfo = { name: "@ginger-ai/ginger-js", version: "0.0.3" };
       const payload = await buildInitialPayload(this.requestId, sdkInfo);
       const response = await this.httpClient.post<Payload, PayloadResponse>({
         url: `/api/v1/devices`,
@@ -99,13 +104,15 @@ export class GingerJsClient implements GingerClient {
       );
     }
 
-    const trackData = getTrackedFields();
+    const trackData = trackingData();
 
     return {
-      event_type: this.trackDetails.event_type,
-      request_id: this.trackDetails.request_id,
-      fingerprint_id: this.trackDetails.fingerprint_id,
-      data: { ...trackData },
+      event: {
+        event_type: this.trackDetails.event_type,
+        request_id: this.trackDetails.request_id,
+        fingerprint_id: this.trackDetails.fingerprint_id,
+        data: { ...trackData },
+      },
     };
   };
 
@@ -117,11 +124,12 @@ export class GingerJsClient implements GingerClient {
 
     try {
       const response = await this.httpClient.post<
-        BehaviourPayload,
+        EventPayload,
         BehaviourPayloadResponse
       >({ url: `/api/v1/events`, payload });
 
-      removeListener();
+      removePageListener();
+      reset();
       return response.data;
     } catch (error) {
       throw new GingerClientError(

package/src/core/constants.ts

@@ -1,4 +1,4 @@
 export const CONSTANTS = {
     LIVE_URL: "https://app.getrayyan.com",
-    TEST_URL: "https://sandbox.useginger.ai"
+    TEST_URL: "https://api-sandbox.useginger.ai"
 }

package/src/core/dto/metrics.dto.ts

@@ -12,9 +12,15 @@ export interface FieldMetrics {
   started_at: number;
   ended_at: number;
   interaction_count: number;
-  fill_method: FillMethod;
+  characters_count: number;
   paste_count: number;
+  autofill_count: number;
   corrections_count: number;
   pauses: number;
-  pauseDurations: number[];
+  hesitation_time: number;
+  pause_durations: number[];
+  key_hold_times: number[];
+  modifier_key_count: number;
 }
+
+export type FocusMetrics = Record<string, number | null>

package/src/core/helpers.ts

@@ -4,7 +4,7 @@ import { GingerClientError } from "./util/error";
 export default function getBasePath(apikey: string) {
   if (apikey.includes("sk_live") || apikey.includes("pk_live"))
     return CONSTANTS.LIVE_URL;
-  
+
   return CONSTANTS.TEST_URL;
 }
 
@@ -21,9 +21,9 @@ export const pageVisibility = () => {
 
   return {
     getCount: () => leaveCount,
-    addListener: () =>
+    addPageListener: () =>
       document.addEventListener("visibilitychange", visibilityHandler),
-    removeListener: () =>
+    removePageListener: () =>
       document.removeEventListener("visibilitychange", visibilityHandler),
   };
 };
@@ -31,3 +31,43 @@ export const pageVisibility = () => {
 export const validatePresence = (key: string) => {
   if (!key) throw new GingerClientError("'apikey' must be provided.");
 };
+
+const getEncoderKey = (apikey: string): string => {
+  const last6 = apikey.slice(-6);
+  const secondCharacterAfterPrefix = apikey.split("_")[2]?.[1];
+  return last6 + secondCharacterAfterPrefix;
+};
+
+export const encode = (apikey: string, payload: unknown): string => {
+  try {
+    const key = getEncoderKey(apikey);
+    const data = JSON.stringify(payload);
+
+    let encoded = "";
+
+    for (let i = 0; i < data.length; i++) {
+      const keyChar = key.charCodeAt(i % key.length);
+      // eslint-disable-next-line no-bitwise
+      encoded += String.fromCharCode(data.charCodeAt(i) ^ keyChar);
+    }
+
+    return btoa(encoded);
+  } catch (error) {
+    throw new Error("Encoding failed");
+  }
+};
+
+export const decode = (apikey: string, encoded: string): unknown => {
+  const key = getEncoderKey(apikey);
+  const decoded = atob(encoded);
+
+  let result = "";
+
+  for (let i = 0; i < decoded.length; i++) {
+    const keyChar = key.charCodeAt(i % key.length);
+    // eslint-disable-next-line no-bitwise
+    result += String.fromCharCode(decoded.charCodeAt(i) ^ keyChar);
+  }
+
+  return JSON.parse(result);
+};

package/src/core/http/request.ts

@@ -1,3 +1,4 @@
+import { encode } from "../helpers";
 import { handleException } from "../util/error";
 
 type Method = "POST" | "GET" | "PUT" | "DELETE";
@@ -8,7 +9,6 @@ export const makeRequest = async <Request, Response>(
   method: Method,
   apikey: string
 ): Promise<Response> => {
-
   try {
     const response = await fetch(url, {
       method,
@@ -17,7 +17,7 @@ export const makeRequest = async <Request, Response>(
         Accept: "application/json",
         Authorization: `Bearer ${apikey}`,
       },
-      body: JSON.stringify(payload),
+      body: JSON.stringify(encode(apikey, payload)),
     });
 
     if (!response.ok) {