Use capture-phase listeners for button click tracking (#1348)

In v4 we switched the Form Tracking (#1329) and Link Click Tracking (#1325) plugins to using capture-phase event listeners instead of bubble-phase.

This makes the same change for the Button Click Tracking plugin to make it consistent.

This has caused issues for some clients historically, e.g. BCPF-1421 where pages stopping propagation of event bubbling prevented buttons being tracked.

common/changes/@snowplow/browser-plugin-button-click-tracking/button-plugin-capture_2024-10-04-03-17.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@snowplow/browser-plugin-button-click-tracking",
+      "comment": "Use capture-phase event listeners",
+      "type": "none"
+    }
+  ],
+  "packageName": "@snowplow/browser-plugin-button-click-tracking"
+}

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

@@ -62,7 +62,7 @@ export function enableButtonClickTracking(
     };
 
     const addClickListener = () => {
-      document.addEventListener('click', _listeners[trackerId]);
+      document.addEventListener('click', _listeners[trackerId], true);
     };
 
     if (_trackers[trackerId]?.sharedState.hasLoaded) {
@@ -83,7 +83,7 @@ export function enableButtonClickTracking(
 export function disableButtonClickTracking() {
   for (const trackerId in _trackers) {
     if (_listeners[trackerId]) {
-      document.removeEventListener('click', _listeners[trackerId]);
+      document.removeEventListener('click', _listeners[trackerId], true);
     }
   }
 }