feat(plugin-frustration-browser): add rage click

Author: daniel-graham-amplitude

packages/plugin-frustration-browser/src/constants.ts

@@ -1 +1,2 @@
 export const PLUGIN_NAME = 'frustration-browser';
+export const RAGE_CLICK_EVENT_NAME = '[Amplitude] Rage Click';

packages/plugin-frustration-browser/src/frustration-plugin.ts

@@ -1,12 +1,42 @@
 /* eslint-disable no-restricted-globals */
-import { BrowserClient, BrowserConfig, EnrichmentPlugin } from '@amplitude/analytics-core';
-import { PLUGIN_NAME } from './constants';
+import { BrowserClient, BrowserConfig, EnrichmentPlugin, getGlobalScope } from '@amplitude/analytics-core';
+import { PLUGIN_NAME, RAGE_CLICK_EVENT_NAME } from './constants';
+import * as rageClick from './rage-click';
+import { RageClickEventPayload } from './types';
 
 export type BrowserEnrichmentPlugin = EnrichmentPlugin<BrowserClient, BrowserConfig>;
 
 export const frustrationPlugin = (): BrowserEnrichmentPlugin => {
-  const setup: BrowserEnrichmentPlugin['setup'] = async (/*config, amplitude*/) => {
-    // add logic here to setup any resources
+  let clickHandler: ((event: MouseEvent) => void) | null = null;
+
+  const setup: BrowserEnrichmentPlugin['setup'] = async (_, amplitude) => {
+    const { document } = getGlobalScope() as typeof globalThis;
+    rageClick.init({
+      timeout: 3000, // TODO: make this configurable
+      threshold: 3, // TODO: make this configurable
+      ignoreSelector: '#ignore-rage-click', // TODO: make this configurable
+      onRageClick(clickEvent, element) {
+        const payload: RageClickEventPayload = {
+          '[Amplitude] Begin Time': clickEvent.begin,
+          '[Amplitude] End Time': clickEvent.end!,
+          '[Amplitude] Duration': clickEvent.end! - clickEvent.begin,
+          '[Amplitude] Element Text': element.innerText || element.textContent || '',
+          '[Amplitude] Element Tag': element.tagName.toLowerCase(),
+          '[Amplitude] Clicks': clickEvent.clicks,
+        };
+        amplitude.track(RAGE_CLICK_EVENT_NAME, payload);
+      },
+    });
+
+    document.addEventListener(
+      'click',
+      (clickHandler = (event: MouseEvent) => {
+        const { target: clickedEl } = event;
+        if (clickedEl instanceof HTMLElement) {
+          rageClick.registerClick(clickedEl, event);
+        }
+      }),
+    );
   };
 
   /* istanbul ignore next */
@@ -15,7 +45,12 @@ export const frustrationPlugin = (): BrowserEnrichmentPlugin => {
   };
 
   const teardown = async () => {
-    // add logic here to clean up any resources
+    const { document } = getGlobalScope() as typeof globalThis;
+    if (clickHandler) {
+      document.removeEventListener('click', clickHandler);
+      clickHandler = null;
+    }
+    rageClick.clear();
   };
 
   return {

packages/plugin-frustration-browser/src/rage-click.ts

@@ -0,0 +1,63 @@
+import { ClickEvent, RageClickOptions } from './types';
+
+const CLICKABLE_ELEMENT_SELECTOR = 'a,button,input';
+
+const rageClickedElements = new Map<HTMLElement, ClickEvent>();
+let timeout: number;
+let threshold: number;
+let ignoreSelector: string;
+let onRageClick: (event: ClickEvent, element: HTMLElement) => void;
+
+export function init(options: RageClickOptions): void {
+  timeout = options.timeout;
+  threshold = options.threshold;
+  ignoreSelector = options.ignoreSelector;
+  onRageClick = options.onRageClick;
+}
+
+export function registerClick(clickedEl: HTMLElement, event: MouseEvent): void {
+  const target: HTMLElement | null = clickedEl.closest(CLICKABLE_ELEMENT_SELECTOR);
+  if (!target) {
+    return;
+  }
+  if (ignoreSelector && target.matches(ignoreSelector)) {
+    return;
+  }
+
+  let clickEvent = rageClickedElements.get(target);
+
+  // create a new click event if it doesn't exist
+  const eventTime = Math.floor(performance.now() + performance.timeOrigin);
+  if (!clickEvent) {
+    const timer = setTimeout(() => {
+      rageClickedElements.delete(target);
+    }, timeout);
+    clickEvent = {
+      begin: eventTime,
+      count: 0,
+      timer,
+      clicks: [],
+    };
+    rageClickedElements.set(target, clickEvent);
+  }
+
+  const elapsedTime = eventTime - clickEvent.begin;
+  if (elapsedTime < timeout) {
+    clickEvent.count += 1;
+    clickEvent.clicks.push({
+      x: event.clientX,
+      y: event.clientY,
+      Time: new Date(performance.now() + performance.timeOrigin).toISOString(),
+    });
+    if (clickEvent.count >= threshold) {
+      clickEvent.end = Math.floor(performance.now() + performance.timeOrigin);
+      onRageClick(clickEvent, target);
+      rageClickedElements.delete(target);
+      clearTimeout(clickEvent.timer);
+    }
+  }
+}
+
+export function clear(): void {
+  rageClickedElements.clear();
+}

packages/plugin-frustration-browser/src/types.ts

@@ -0,0 +1,29 @@
+export type Click = {
+  x: number;
+  y: number;
+  Time: string;
+};
+
+export type ClickEvent = {
+  begin: number;
+  end?: number;
+  count: number;
+  timer: ReturnType<typeof setTimeout>;
+  clicks: Click[];
+};
+
+export type RageClickOptions = {
+  timeout: number;
+  threshold: number;
+  ignoreSelector: string;
+  onRageClick: (event: ClickEvent, element: HTMLElement) => void;
+};
+
+export type RageClickEventPayload = {
+  '[Amplitude] Begin Time': number;
+  '[Amplitude] End Time': number;
+  '[Amplitude] Duration': number;
+  '[Amplitude] Element Text': string;
+  '[Amplitude] Element Tag': string;
+  '[Amplitude] Clicks': Click[];
+};