feat: add metametrics events to carousel

[jonybur]

Description

This PR introduces tracking metrics for banners in the carousel to monitor their effectiveness. The following events are added:

• Banner selected: Triggered when a banner or a button within a banner is clicked.
• Close all banners: Triggered when the last banner in the carousel is closed.
• Banner shown: Triggered when a banner is displayed in the carousel.

Tracking Implementation Details:

Banner selected

When a banner or button in a banner is clicked:

trackEvent({
          event: MetaMetricsEventName.BannerSelect,
          category: MetaMetricsEventCategory.Banner,
          properties: {
            banner_name: e.g. buy, bridge, sell, card
          }
});

Close all banners

When the last banner in the carousel is closed:

trackEvent({
          event: MetaMetricsEventName.BannerCloseAll,
          category: MetaMetricsEventCategory.Banner
});

Banner shown

When a banner is displayed in the carousel:

trackEvent({
          event: MetaMetricsEventName.BannerDisplay,
          category: MetaMetricsEventCategory.Banner,
          properties: {
            banner_name: e.g. buy, bridge, sell, card
          }
});

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/3764

Manual testing steps

1. Open the carousel.
2. Click on banners or buttons within banners to trigger the "Banner selected" event.
3. Close the last banner to trigger the "Close all banners" event.
4. Navigate through the carousel to ensure the "Banner shown" event is fired for each displayed banner.

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[metamaskbot]

Builds ready [993b969]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1916 ± 80 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	318	2255	1703	563	270
		domContentLoaded	1671	2239	1882	164	79
		load	1678	2265	1916	167	80
		domInteractive	26	98	49	18	9
		backgroundConnect	8	96	36	25	12
		firstReactRender	17	77	40	21	10
		getState	5	75	23	21	10
		initialActions	0	1	0	0	0
		loadScripts	1239	1673	1418	127	61
		setupStore	8	60	20	18	9
		uiStartup	1931	2586	2181	180	86

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 0 Bytes (0.00%)
• ui: 849 Bytes (0.01%)
• common: 118 Bytes (0.00%)

[NidhiKJha]

All the events seem to be working except BannerCloseAll. It's not being dispatched
https://github.com/user-attachments/assets/fbe65e96-75b6-4f4b-815e-ffd250934146

Resolved

[metamaskbot]

Builds ready [8f5a4ab]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1543 ± 75 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1397	1987	1548	153	73
		domContentLoaded	1364	1976	1523	157	75
		load	1378	1988	1543	155	75
		domInteractive	22	125	35	24	12
		backgroundConnect	8	69	24	18	8
		firstReactRender	16	99	42	31	15
		getState	4	49	10	11	5
		initialActions	0	1	0	0	0
		loadScripts	977	1545	1131	150	72
		setupStore	6	72	14	19	9
		uiStartup	1599	2283	1829	208	100

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 0 Bytes (0.00%)
• ui: 856 Bytes (0.01%)
• common: 118 Bytes (0.00%)

[NidhiKJha]

LGTM