chore: add user IDs to send page analytics (#26600)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

We currently anonymize all send page events. This PR introduces logic
that allows for explicitly overriding this logic for vetted send page
events, so that we can create funnels to track user dropoff.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26600?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Log the payload in `_track()`
2. Complete a swap+send transaction, starting from the home page
3. Ensure send flow events are fired w/ user IDs

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
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.

app/scripts/controllers/metametrics.js

@@ -1016,7 +1016,8 @@ export default class MetaMetricsController {
     // to be updated to work with the new tracking plan. I think we should use
     // a config setting for this instead of trying to match the event name
     const isSendFlow = Boolean(payload.event.match(/^send|^confirm/iu));
-    if (isSendFlow) {
+    // do not filter if excludeMetaMetricsId is explicitly set to false
+    if (options?.excludeMetaMetricsId !== false && isSendFlow) {
       excludeMetaMetricsId = true;
     }
     // If we are tracking sensitive data we will always use the anonymousId

ui/components/app/assets/nfts/nfts-items/nfts-items.js

@@ -167,17 +167,20 @@ export default function NftsItems({
   };
 
   const onSendNft = async (nft) => {
-    trackEvent({
-      event: MetaMetricsEventName.sendAssetSelected,
-      category: MetaMetricsEventCategory.Send,
-      properties: {
-        ...sendAnalytics,
-        is_destination_asset_picker_modal: false,
-        new_asset_symbol: nft.name,
-        new_asset_address: nft.address,
-        is_nft: true,
+    trackEvent(
+      {
+        event: MetaMetricsEventName.sendAssetSelected,
+        category: MetaMetricsEventCategory.Send,
+        properties: {
+          ...sendAnalytics,
+          is_destination_asset_picker_modal: false,
+          new_asset_symbol: nft.name,
+          new_asset_address: nft.address,
+          is_nft: true,
+        },
       },
-    });
+      { excludeMetaMetricsId: false },
+    );
     await dispatch(
       updateSendAsset({
         type: AssetType.NFT,

ui/components/app/wallet-overview/coin-buttons.tsx

@@ -215,16 +215,19 @@ const CoinButtons = ({
   ///: END:ONLY_INCLUDE_IF
 
   const handleSendOnClick = useCallback(async () => {
-    trackEvent({
-      event: MetaMetricsEventName.NavSendButtonClicked,
-      category: MetaMetricsEventCategory.Navigation,
-      properties: {
-        token_symbol: 'ETH',
-        location: 'Home',
-        text: 'Send',
-        chain_id: chainId,
+    trackEvent(
+      {
+        event: MetaMetricsEventName.NavSendButtonClicked,
+        category: MetaMetricsEventCategory.Navigation,
+        properties: {
+          token_symbol: 'ETH',
+          location: 'Home',
+          text: 'Send',
+          chain_id: chainId,
+        },
       },
-    });
+      { excludeMetaMetricsId: false },
+    );
     await dispatch(startNewDraftTransaction({ type: AssetType.native }));
     history.push(SEND_ROUTE);
   }, [chainId]);

ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx

@@ -122,17 +122,20 @@ export function AssetPickerModal({
   const handleAssetChange = useCallback(
     (token: Token) => {
       onAssetChange(token);
-      trackEvent({
-        event: MetaMetricsEventName.sendAssetSelected,
-        category: MetaMetricsEventCategory.Send,
-        properties: {
-          ...sendAnalytics,
-          is_destination_asset_picker_modal: Boolean(isDest),
-          new_asset_symbol: token.symbol,
-          new_asset_address: token.address,
-          is_nft: false,
+      trackEvent(
+        {
+          event: MetaMetricsEventName.sendAssetSelected,
+          category: MetaMetricsEventCategory.Send,
+          properties: {
+            ...sendAnalytics,
+            is_destination_asset_picker_modal: Boolean(isDest),
+            new_asset_symbol: token.symbol,
+            new_asset_address: token.address,
+            is_nft: false,
+          },
         },
-      });
+        { excludeMetaMetricsId: false },
+      );
       onClose();
     },
     [onAssetChange],

ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx

@@ -161,14 +161,17 @@ export function AssetPicker({
         backgroundColor={BackgroundColor.transparent}
         onClick={() => {
           setShowAssetPickerModal(true);
-          trackEvent({
-            event: MetaMetricsEventName.sendTokenModalOpened,
-            category: MetaMetricsEventCategory.Send,
-            properties: {
-              ...sendAnalytics,
-              is_destination_asset_picker_modal: Boolean(sendingAsset),
+          trackEvent(
+            {
+              event: MetaMetricsEventName.sendTokenModalOpened,
+              category: MetaMetricsEventCategory.Send,
+              properties: {
+                ...sendAnalytics,
+                is_destination_asset_picker_modal: Boolean(sendingAsset),
+              },
             },
-          });
+            { excludeMetaMetricsId: false },
+          );
         }}
         endIconName={IconName.ArrowDown}
         endIconProps={{

ui/components/multichain/pages/send/components/address-book.tsx

@@ -99,14 +99,17 @@ export const SendPageAddressBook = () => {
         `sendFlow - User clicked recipient from ${type}. address: ${address}, nickname ${nickname}`,
       ),
     );
-    trackEvent({
-      event: MetaMetricsEventName.sendRecipientSelected,
-      category: MetaMetricsEventCategory.Send,
-      properties: {
-        location: 'address book',
-        inputType: type,
+    trackEvent(
+      {
+        event: MetaMetricsEventName.sendRecipientSelected,
+        category: MetaMetricsEventCategory.Send,
+        properties: {
+          location: 'address book',
+          inputType: type,
+        },
       },
-    });
+      { excludeMetaMetricsId: false },
+    );
     dispatch(updateRecipient({ address, nickname }));
     dispatch(updateRecipientUserInput(address));
   };

ui/components/multichain/pages/send/components/quote-card/index.tsx

@@ -85,14 +85,17 @@ export function QuoteCard({ scrollRef }: QuoteCardProps) {
     }
 
     if (bestQuote) {
-      trackEvent({
-        event: MetaMetricsEventName.sendSwapQuoteFetched,
-        category: MetaMetricsEventCategory.Send,
-        properties: {
-          ...sendAnalytics,
-          is_first_fetch: isQuoteJustLoaded,
+      trackEvent(
+        {
+          event: MetaMetricsEventName.sendSwapQuoteFetched,
+          category: MetaMetricsEventCategory.Send,
+          properties: {
+            ...sendAnalytics,
+            is_first_fetch: isQuoteJustLoaded,
+          },
         },
-      });
+        { excludeMetaMetricsId: false },
+      );
       setTimeLeft(REFRESH_INTERVAL);
     } else {
       setTimeLeft(undefined);

ui/components/multichain/pages/send/components/recipient-input.tsx

@@ -46,14 +46,17 @@ export const SendPageRecipientInput = () => {
             addHistoryEntry(`sendFlow - Valid address typed ${address}`),
           );
           await dispatch(updateRecipientUserInput(address));
-          trackEvent({
-            event: MetaMetricsEventName.sendRecipientSelected,
-            category: MetaMetricsEventCategory.Send,
-            properties: {
-              location: 'send page recipient input',
-              inputType: 'user input',
+          trackEvent(
+            {
+              event: MetaMetricsEventName.sendRecipientSelected,
+              category: MetaMetricsEventCategory.Send,
+              properties: {
+                location: 'send page recipient input',
+                inputType: 'user input',
+              },
             },
-          });
+            { excludeMetaMetricsId: false },
+          );
           dispatch(updateRecipient({ address, nickname: '' }));
         }}
         internalSearch={isUsingMyAccountsForRecipientSearch}

ui/components/multichain/pages/send/components/recipient.tsx

@@ -67,14 +67,17 @@ export const SendPageRecipient = () => {
         `sendFlow - User clicked recipient from ${type}. address: ${address}, nickname ${nickname}`,
       ),
     );
-    trackEvent({
-      event: MetaMetricsEventName.sendRecipientSelected,
-      category: MetaMetricsEventCategory.Send,
-      properties: {
-        location: 'send page recipient screen',
-        inputType: type,
+    trackEvent(
+      {
+        event: MetaMetricsEventName.sendRecipientSelected,
+        category: MetaMetricsEventCategory.Send,
+        properties: {
+          location: 'send page recipient screen',
+          inputType: type,
+        },
       },
-    });
+      { excludeMetaMetricsId: false },
+    );
     dispatch(updateRecipient({ address, nickname }));
     dispatch(updateRecipientUserInput(address));
   };

ui/components/multichain/pages/send/components/your-accounts.tsx

@@ -63,14 +63,17 @@ export const SendPageYourAccounts = ({
                 `sendFlow - User clicked recipient from my accounts. address: ${account.address}, nickname ${account.name}`,
               ),
             );
-            trackEvent({
-              event: MetaMetricsEventName.sendRecipientSelected,
-              category: MetaMetricsEventCategory.Send,
-              properties: {
-                location: 'my accounts',
-                inputType: 'click',
+            trackEvent(
+              {
+                event: MetaMetricsEventName.sendRecipientSelected,
+                category: MetaMetricsEventCategory.Send,
+                properties: {
+                  location: 'my accounts',
+                  inputType: 'click',
+                },
               },
-            });
+              { excludeMetaMetricsId: false },
+            );
             dispatch(
               updateRecipient({
                 address: account.address,

ui/components/multichain/pages/send/send.js

@@ -202,13 +202,16 @@ export const SendPage = () => {
     }
     dispatch(resetSendState());
 
-    trackEvent({
-      event: MetaMetricsEventName.sendFlowExited,
-      category: MetaMetricsEventCategory.Send,
-      properties: {
-        ...sendAnalytics,
+    trackEvent(
+      {
+        event: MetaMetricsEventName.sendFlowExited,
+        category: MetaMetricsEventCategory.Send,
+        properties: {
+          ...sendAnalytics,
+        },
       },
-    });
+      { excludeMetaMetricsId: false },
+    );
 
     const nextRoute =
       sendStage === SEND_STAGES.EDIT ? DEFAULT_ROUTE : mostRecentOverviewPage;
@@ -217,13 +220,16 @@ export const SendPage = () => {
 
   useEffect(() => {
     if (swapQuotesError) {
-      trackEvent({
-        event: MetaMetricsEventName.sendSwapQuoteError,
-        category: MetaMetricsEventCategory.Send,
-        properties: {
-          ...sendAnalytics,
+      trackEvent(
+        {
+          event: MetaMetricsEventName.sendSwapQuoteError,
+          category: MetaMetricsEventCategory.Send,
+          properties: {
+            ...sendAnalytics,
+          },
         },
-      });
+        { excludeMetaMetricsId: false },
+      );
     }
     // sendAnalytics should not result in the event refiring
     // eslint-disable-next-line react-hooks/exhaustive-deps

ui/pages/asset/components/token-buttons.tsx

@@ -183,16 +183,19 @@ const TokenButtons = ({
       <IconButton
         className="token-overview__button"
         onClick={async () => {
-          trackEvent({
-            event: MetaMetricsEventName.NavSendButtonClicked,
-            category: MetaMetricsEventCategory.Navigation,
-            properties: {
-              token_symbol: token.symbol,
-              location: MetaMetricsSwapsEventSource.TokenView,
-              text: 'Send',
-              chain_id: chainId,
+          trackEvent(
+            {
+              event: MetaMetricsEventName.NavSendButtonClicked,
+              category: MetaMetricsEventCategory.Navigation,
+              properties: {
+                token_symbol: token.symbol,
+                location: MetaMetricsSwapsEventSource.TokenView,
+                text: 'Send',
+                chain_id: chainId,
+              },
             },
-          });
+            { excludeMetaMetricsId: false },
+          );
           try {
             await dispatch(
               startNewDraftTransaction({