chore: Emit externalLinkInteracted events for buttons

src/button/__tests__/internal.test.tsx

@@ -3,8 +3,14 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { InternalButton } from '../../../lib/components/button/internal';
+import Button from '../../../lib/components/button';
 import styles from '../../../lib/components/button/styles.css.js';
 
+import { AnalyticsFunnel } from '../../../lib/components/internal/analytics/components/analytics-funnel';
+import { FunnelMetrics } from '../../../lib/components/internal/analytics';
+import { mockFunnelMetrics, mockedFunnelInteractionId } from '../../internal/analytics/__tests__/mocks';
+import createWrapper from '../../../lib/components/test-utils/dom';
+
 test('specific properties take precedence over nativeAttributes', () => {
   const { container } = render(
     <InternalButton ariaLabel="property" __nativeAttributes={{ 'aria-label': 'native attribute' }} />
@@ -23,3 +29,75 @@ test('supports __iconClass property', () => {
   );
   expect(container.querySelector(`button .${styles.icon}`)).toHaveClass('example-class');
 });
+
+describe('Analytics', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockFunnelMetrics();
+  });
+
+  test('does not send any metrics when not in a funnel context', () => {
+    const { container } = render(<Button iconName="external" target="_blank" href="https://example.com" />);
+    createWrapper(container).findButton()!.click();
+
+    expect(FunnelMetrics.externalLinkInteracted).not.toHaveBeenCalled();
+  });
+
+  test('sends an externalLinkInteracted metric within a Funnel Context with iconName=external', () => {
+    const { container } = render(
+      <AnalyticsFunnel funnelType="single-page" optionalStepNumbers={[]} totalFunnelSteps={1}>
+        <Button iconName="external" href="https://example.com" />
+      </AnalyticsFunnel>
+    );
+    createWrapper(container).findButton()!.click();
+
+    expect(FunnelMetrics.externalLinkInteracted).toHaveBeenCalled();
+    expect(FunnelMetrics.externalLinkInteracted).toHaveBeenCalledWith(
+      expect.objectContaining({
+        funnelInteractionId: mockedFunnelInteractionId,
+        elementSelector: expect.any(String),
+      })
+    );
+  });
+
+  test('does not send an externalLinkInteracted metric when the button is not a link', () => {
+    const { container } = render(
+      <AnalyticsFunnel funnelType="single-page" optionalStepNumbers={[]} totalFunnelSteps={1}>
+        <Button iconName="external" data-testid="1" />
+        <Button target="_blank" data-testid="2" />
+      </AnalyticsFunnel>
+    );
+    createWrapper(container).findButton('[data-testid="1"]')!.click();
+    createWrapper(container).findButton('[data-testid="2"]')!.click();
+
+    expect(FunnelMetrics.externalLinkInteracted).not.toHaveBeenCalled();
+  });
+
+  test('sends an externalLinkInteracted metric within a Funnel Context with target=_blank', () => {
+    const { container } = render(
+      <AnalyticsFunnel funnelType="single-page" optionalStepNumbers={[]} totalFunnelSteps={1}>
+        <Button target="_blank" href="https://example.com" />
+      </AnalyticsFunnel>
+    );
+    createWrapper(container).findButton()!.click();
+
+    expect(FunnelMetrics.externalLinkInteracted).toHaveBeenCalled();
+    expect(FunnelMetrics.externalLinkInteracted).toHaveBeenCalledWith(
+      expect.objectContaining({
+        funnelInteractionId: mockedFunnelInteractionId,
+        elementSelector: expect.any(String),
+      })
+    );
+  });
+
+  test('does not send an externalLinkInteracted metric for non-external links', () => {
+    const { container } = render(
+      <AnalyticsFunnel funnelType="single-page" optionalStepNumbers={[]} totalFunnelSteps={1}>
+        <Button href="https://example.com" />
+      </AnalyticsFunnel>
+    );
+    createWrapper(container).findButton()!.click();
+
+    expect(FunnelMetrics.externalLinkInteracted).not.toHaveBeenCalled();
+  });
+});

src/button/internal.tsx

@@ -12,7 +12,15 @@ import { checkSafeUrl } from '../internal/utils/check-safe-url';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import LiveRegion from '../internal/components/live-region';
 import { useButtonContext } from '../internal/context/button-context';
-import { useFunnel } from '../internal/analytics/hooks/use-funnel';
+import { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
+import {
+  DATA_ATTR_FUNNEL_VALUE,
+  getFunnelValueSelector,
+  getNameFromSelector,
+  getSubStepAllSelector,
+} from '../internal/analytics/selectors';
+import { FunnelMetrics } from '../internal/analytics';
+import { useUniqueId } from '../internal/hooks/use-unique-id';
 
 export type InternalButtonProps = Omit<ButtonProps, 'variant'> & {
   variant?: ButtonProps['variant'] | 'flashbar-icon' | 'breadcrumb-group' | 'menu-trigger' | 'modal-dismiss';
@@ -65,13 +73,35 @@ export const InternalButton = React.forwardRef(
 
     const buttonContext = useButtonContext();
 
+    const uniqueId = useUniqueId('button');
+    const { funnelInteractionId } = useFunnel();
+    const { stepNumber, stepNameSelector } = useFunnelStep();
+    const { subStepSelector, subStepNameSelector } = useFunnelSubStep();
+
     const handleClick = (event: React.MouseEvent) => {
       if (isNotInteractive) {
         return event.preventDefault();
       }
 
       if (isAnchor && isPlainLeftClick(event)) {
         fireCancelableEvent(onFollow, { href, target }, event);
+
+        if ((iconName === 'external' || target === '_blank') && funnelInteractionId) {
+          const stepName = getNameFromSelector(stepNameSelector);
+          const subStepName = getNameFromSelector(subStepNameSelector);
+
+          FunnelMetrics.externalLinkInteracted({
+            funnelInteractionId,
+            stepNumber,
+            stepName,
+            stepNameSelector,
+            subStepSelector,
+            subStepName,
+            subStepNameSelector,
+            elementSelector: getFunnelValueSelector(uniqueId),
+            subStepAllSelector: getSubStepAllSelector(),
+          });
+        }
       }
 
       const { altKey, button, ctrlKey, metaKey, shiftKey } = event;
@@ -99,6 +129,7 @@ export const InternalButton = React.forwardRef(
       title: ariaLabel,
       className: buttonClass,
       onClick: handleClick,
+      [DATA_ATTR_FUNNEL_VALUE]: uniqueId,
     } as const;
     const iconProps: ButtonIconProps = {
       loading,