Add a configurable default label for button_click

Fixes #1421

Author: jethron

common/changes/@snowplow/browser-plugin-button-click-tracking/issue-button-click-disable_2025-04-04-06-48.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@snowplow/browser-plugin-button-click-tracking",
+      "comment": "Add default label to avoid bad events",
+      "type": "none"
+    }
+  ],
+  "packageName": "@snowplow/browser-plugin-button-click-tracking"
+}

plugins/browser-plugin-button-click-tracking/src/api.ts

@@ -58,7 +58,13 @@ export function enableButtonClickTracking(
     // Store the configuration for this tracker, if it doesn't already exist
     // This allows us to enable click tracking for a tracker if it has been disabled
     _listeners[trackerId] = (event: MouseEvent) => {
-      eventHandler(event, trackerId, filterFunctionFromFilter(configuration.filter), configuration.context);
+      eventHandler(
+        event,
+        trackerId,
+        filterFunctionFromFilter(configuration.filter),
+        configuration.defaultLabel,
+        configuration.context
+      );
     };
 
     const addClickListener = () => {
@@ -96,12 +102,18 @@ export function disableButtonClickTracking(trackers: Array<string> = Object.keys
  * @param filter - The filter function to use for button click tracking
  * @param context - The dynamic context which will be evaluated for each button click event
  */
-function eventHandler(event: MouseEvent, trackerId: string, filter: FilterFunction, context?: DynamicContext) {
+function eventHandler(
+  event: MouseEvent,
+  trackerId: string,
+  filter: FilterFunction,
+  defaultLabel?: string | ((element: HTMLElement) => string),
+  context?: DynamicContext
+) {
   let elem = (event.composed ? event.composedPath()[0] : event.target) as HTMLElement | null;
   while (elem) {
     if (elem instanceof HTMLButtonElement || (elem instanceof HTMLInputElement && elem.type === 'button')) {
       if (filter(elem)) {
-        const buttonClickEvent = createEventFromButton(elem);
+        const buttonClickEvent = createEventFromButton(elem, defaultLabel);
         buttonClickEvent.context = resolveDynamicContext(context, buttonClickEvent, elem);
         trackButtonClick(buttonClickEvent, [trackerId]);
       }

plugins/browser-plugin-button-click-tracking/src/types.ts

@@ -18,6 +18,8 @@ export interface ButtonClickTrackingConfiguration {
   filter?: Filter;
   /** The dynamic context which will be evaluated for each button click event */
   context?: DynamicContext;
+  /** A default label to use if one can not be determined by the content or data attributes */
+  defaultLabel?: string | ((element: HTMLElement) => string);
 }
 
 /**

plugins/browser-plugin-button-click-tracking/src/util.ts

@@ -42,14 +42,19 @@ export function filterFunctionFromFilter(filter?: Filter): FilterFunction {
  * @returns The button click event
  */
 export function createEventFromButton(
-  button: HTMLButtonElement | HTMLInputElement
+  button: HTMLButtonElement | HTMLInputElement,
+  defaultLabel?: string | ((element: HTMLElement) => string)
 ): ButtonClickEvent & CommonEventProperties {
   let ret = {} as ButtonClickEvent & CommonEventProperties;
 
   if (button.tagName === 'INPUT') {
     ret.label = button.dataset.spButtonLabel || button.value;
   } else {
-    ret.label = button.dataset.spButtonLabel || button.innerText;
+    ret.label =
+      button.dataset.spButtonLabel ||
+      button.innerText ||
+      (typeof defaultLabel === 'function' ? defaultLabel(button) : defaultLabel) ||
+      '(empty)';
   }
 
   button.id && (ret.id = button.id);

plugins/browser-plugin-button-click-tracking/test/test.test.ts

@@ -145,6 +145,31 @@ describe('Button Click Tracking Plugin', () => {
         expect(createEventFromButton(button)).toEqual(event);
       });
 
+      it('should use specified default label', () => {
+        const button = document.createElement('button');
+        button.innerText = '';
+        button.id = 'testId';
+        button.className = 'testClass testClass2';
+        button.name = 'testName';
+
+        const event1 = {
+          label: 'defaultLabel',
+          id: 'testId',
+          classes: ['testClass', 'testClass2'],
+          name: 'testName',
+        };
+
+        expect(createEventFromButton(button, 'defaultLabel')).toEqual(event1);
+
+        const event2 = {
+          label: 'testClass testClass2',
+          id: 'testId',
+          classes: ['testClass', 'testClass2'],
+          name: 'testName',
+        };
+        expect(createEventFromButton(button, (btn) => btn.className)).toEqual(event2);
+      });
+
       it('should prefer the data-sp-button-label attribute over the innerText', () => {
         const button = document.createElement('button');
         button.innerText = 'testLabel';