Merge pull request #22575 from overleaf/revert-22473-ac-ds-nav-analytics-events

Revert "[web] Update navigation events (navbar menu, new project)"

GitOrigin-RevId: 9608be862e272c29ed92524ae6b8484094e8e0ff

services/web/app/views/layout/navbar-marketing-bootstrap-5.pug

@@ -48,10 +48,6 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(class={
 								aria-expanded="false",
 								data-bs-toggle="dropdown"
 								role="menuitem"
-								event-tracking="menu-expand"
-								event-tracking-mb="true"
-								event-tracking-trigger="click"
-								event-segmentation={"item": "admin", "location": "top-menu"}
 							)
 								| Admin
 								span.caret
@@ -88,10 +84,6 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(class={
 										aria-expanded="false",
 										data-bs-toggle="dropdown"
 										role="menuitem"
-										event-tracking="menu-expand"
-										event-tracking-mb="true"
-										event-tracking-trigger="click"
-										event-segmentation={"item": item.trackingKey, "location": "top-menu"}
 									)
 										| !{translate(item.text)}
 										span.caret
@@ -101,7 +93,7 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(class={
 												+dropdown-menu-divider
 											else if child.isContactUs
 												+dropdown-menu-link-item()(data-ol-open-contact-form-modal="contact-us" data-bs-target="#contactUsModal" href data-bs-toggle="modal")
-													span(event-tracking="menu-click" event-tracking-mb="true" event-tracking-trigger="click" event-segmentation={"item": "contact", "location": "top-menu"})
+													span(event-tracking="menu-clicked-contact" event-tracking-mb="true" event-tracking-trigger="click")
 														| #{translate("contact_us")}
 											else
 												if child.url
@@ -135,22 +127,22 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(class={
 							+nav-item.primary
 								+nav-link(
 									href="/register"
-									event-tracking="menu-click"
+									event-tracking="menu-clicked-register"
 									event-tracking-action="clicked"
 									event-tracking-trigger="click"
 									event-tracking-mb="true"
-									event-segmentation={ page: currentUrl, item: 'register', location: 'top-menu' }
+									event-segmentation={ page: currentUrl }
 								) #{translate('sign_up')}
 
 						// login link
 						+nav-item
 							+nav-link(
 								href="/login"
-								event-tracking="menu-click"
+								event-tracking="menu-clicked-login"
 								event-tracking-action="clicked"
 								event-tracking-trigger="click"
 								event-tracking-mb="true"
-								event-segmentation={ page: currentUrl, item: 'login', location: 'top-menu' }
+								event-segmentation={ page: currentUrl }
 							) #{translate('log_in')}
 
 					// projects link and account menu
@@ -163,10 +155,6 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(class={
 								aria-expanded="false",
 								data-bs-toggle="dropdown"
 								role="menuitem"
-								event-tracking="menu-expand"
-								event-tracking-mb="true"
-								event-tracking-trigger="click"
-								event-segmentation={"item": "account", "location": "top-menu"}
 							)
 								| #{translate('Account')}
 								span.caret

services/web/app/views/layout/navbar-marketing.pug

@@ -42,10 +42,6 @@ nav.navbar.navbar-default.navbar-main
 								aria-haspopup="true",
 								aria-expanded="false",
 								data-toggle="dropdown"
-								event-tracking="menu-expand"
-								event-tracking-mb="true"
-								event-tracking-trigger="click"
-								event-segmentation={"item": "admin", "location": "top-menu"}
 							)
 								| Admin
 								span.caret
@@ -89,10 +85,6 @@ nav.navbar.navbar-default.navbar-main
 										aria-haspopup="true",
 										aria-expanded="false",
 										data-toggle="dropdown"
-										event-tracking="menu-expand"
-										event-tracking-mb="true"
-										event-tracking-trigger="click"
-										event-segmentation={"item": item.trackingKey, "location": "top-menu"}
 									)
 										| !{translate(item.text)}
 										span.caret
@@ -103,7 +95,7 @@ nav.navbar.navbar-default.navbar-main
 											else if child.isContactUs
 												li
 													a(data-ol-open-contact-form-modal="contact-us" href)
-														span(event-tracking="menu-click" event-tracking-mb="true" event-tracking-trigger="click" event-segmentation={"item": "contact", "location": "top-menu"})
+														span(event-tracking="menu-clicked-contact" event-tracking-mb="true" event-tracking-trigger="click")
 															| #{translate("contact_us")}
 											else
 												li
@@ -138,22 +130,22 @@ nav.navbar.navbar-default.navbar-main
 							li.primary
 								a(
 									href="/register"
-									event-tracking="menu-click"
+									event-tracking="menu-clicked-register"
 									event-tracking-action="clicked"
 									event-tracking-trigger="click"
 									event-tracking-mb="true"
-									event-segmentation={ page: currentUrl, item: 'register', location: 'top-menu' }
+									event-segmentation={ page: currentUrl }
 								) #{translate('sign_up')}
 
 						// login link
 						li
 							a(
 								href="/login"
-								event-tracking="menu-click"
+								event-tracking="menu-clicked-login"
 								event-tracking-action="clicked"
 								event-tracking-trigger="click"
 								event-tracking-mb="true"
-								event-segmentation={ page: currentUrl, item: 'login', location: 'top-menu' }
+								event-segmentation={ page: currentUrl }
 							) #{translate('log_in')}
 
 					// projects link and account menu
@@ -167,10 +159,6 @@ nav.navbar.navbar-default.navbar-main
 								aria-haspopup="true",
 								aria-expanded="false",
 								data-toggle="dropdown"
-								event-tracking="menu-expand"
-								event-tracking-mb="true"
-								event-tracking-trigger="click"
-								event-segmentation={"item": "account", "location": "top-menu"}
 							)
 								| #{translate('Account')}
 								span.caret

services/web/app/views/layout/navbar-website-redesign.pug

@@ -42,10 +42,6 @@ nav.navbar.navbar-default.navbar-main.website-redesign-navbar
 								aria-haspopup="true",
 								aria-expanded="false",
 								data-toggle="dropdown"
-								event-tracking="menu-expand"
-								event-tracking-mb="true"
-								event-tracking-trigger="click"
-								event-segmentation={"item": "admin", "location": "top-menu"}
 							)
 								| Admin
 								span.caret
@@ -89,10 +85,6 @@ nav.navbar.navbar-default.navbar-main.website-redesign-navbar
 										aria-haspopup="true",
 										aria-expanded="false",
 										data-toggle="dropdown"
-										event-tracking="menu-expand"
-										event-tracking-mb="true"
-										event-tracking-trigger="click"
-										event-segmentation={"item": item.trackingKey, "location": "top-menu"}
 									)
 										| !{translate(item.text)}
 										span.caret
@@ -103,7 +95,7 @@ nav.navbar.navbar-default.navbar-main.website-redesign-navbar
 											else if child.isContactUs
 												li
 													a(data-ol-open-contact-form-modal="contact-us" href)
-														span(event-tracking="menu-click" event-tracking-mb="true" event-tracking-trigger="click" event-segmentation={"item": "contact", "location": "top-menu"})
+														span(event-tracking="menu-clicked-contact" event-tracking-mb="true" event-tracking-trigger="click")
 															| #{translate("contact_us")}
 											else
 												li
@@ -138,22 +130,22 @@ nav.navbar.navbar-default.navbar-main.website-redesign-navbar
 							li.primary
 								a(
 									href="/register"
-									event-tracking="menu-click"
+									event-tracking="menu-clicked-register"
 									event-tracking-action="clicked"
 									event-tracking-trigger="click"
 									event-tracking-mb="true"
-									event-segmentation={ page: currentUrl, item: 'register', location: 'top-menu' }
+									event-segmentation={ page: currentUrl }
 								) #{translate('sign_up')}
 
 						// login link
 						li.secondary
 							a(
 								href="/login"
-								event-tracking="menu-click"
+								event-tracking="menu-clicked-login"
 								event-tracking-action="clicked"
 								event-tracking-trigger="click"
 								event-tracking-mb="true"
-								event-segmentation={ page: currentUrl, item: 'login', location: 'top-menu' }
+								event-segmentation={ page: currentUrl }
 							) #{translate('log_in')}
 
 					// projects link and account menu
@@ -167,10 +159,6 @@ nav.navbar.navbar-default.navbar-main.website-redesign-navbar
 								aria-haspopup="true",
 								aria-expanded="false",
 								data-toggle="dropdown"
-								event-tracking="menu-expand"
-								event-tracking-mb="true"
-								event-tracking-trigger="click"
-								event-segmentation={"item": "account", "location": "top-menu"}
 							)
 								| #{translate('Account')}
 								span.caret

services/web/frontend/js/features/event-tracking/index.js

@@ -12,14 +12,6 @@ function setupEventTracking(el) {
   const element = el.getAttribute('event-tracking-element')
 
   function submit() {
-    if (key === 'menu-expand') {
-      const expanded = el.getAttribute('aria-expanded')
-      if (expanded === 'true') {
-        // skip if the menu is already expanded
-        return
-      }
-    }
-
     const segmentation = JSON.parse(
       el.getAttribute('event-segmentation') || '{}'
     )

services/web/frontend/js/features/project-list/components/new-project-button.tsx

@@ -17,8 +17,6 @@ import {
   DropdownMenu,
   DropdownToggle,
 } from '@/features/ui/components/bootstrap-5/dropdown-menu'
-import { useSendProjectListMB } from '@/features/project-list/components/project-list-events'
-import type { PortalTemplate } from '../../../../../types/portal-template'
 
 type SendTrackingEvent = {
   dropdownMenu: string
@@ -56,7 +54,7 @@ function NewProjectButton({
     useState<Nullable<NewProjectButtonModalVariant>>(null)
   const portalTemplates = getMeta('ol-portalTemplates') || []
   const { show: enableAddAffiliationWidget } = useAddAffiliation()
-  const sendProjectListMB = useSendProjectListMB()
+
   const sendTrackingEvent = useCallback(
     ({
       dropdownMenu,
@@ -105,46 +103,37 @@ function NewProjectButton({
         dropdownMenu: dropdownMenuEvent,
         dropdownOpen: true,
       })
-      sendProjectListMB('new-project-click', { item: dropdownMenuEvent })
 
       setModal(modalVariant)
     },
-    [sendProjectListMB, sendTrackingEvent]
+    [sendTrackingEvent]
   )
 
   const handlePortalTemplateClick = useCallback(
-    (e: React.MouseEvent, template: PortalTemplate) => {
+    (e: React.MouseEvent, institutionTemplateName: string) => {
       // avoid invoking the "onClick" callback on the main dropdown button
       e.stopPropagation()
 
       sendTrackingEvent({
         dropdownMenu: 'institution-template',
         dropdownOpen: true,
-        institutionTemplateName: template.name,
-      })
-      sendProjectListMB('new-project-click', {
-        item: template.name,
-        destinationURL: template.url,
+        institutionTemplateName,
       })
     },
-    [sendProjectListMB, sendTrackingEvent]
+    [sendTrackingEvent]
   )
 
   const handleStaticTemplateClick = useCallback(
-    (e: React.MouseEvent, template: { trackingKey: string; url: string }) => {
+    (e: React.MouseEvent, templateTrackingKey: string) => {
       // avoid invoking the "onClick" callback on the main dropdown button
       e.stopPropagation()
 
       sendTrackingEvent({
-        dropdownMenu: template.trackingKey,
+        dropdownMenu: templateTrackingKey,
         dropdownOpen: true,
       })
-      sendProjectListMB('new-project-click', {
-        item: template.trackingKey,
-        destinationURL: template.url,
-      })
     },
-    [sendProjectListMB, sendTrackingEvent]
+    [sendTrackingEvent]
   )
 
   const [importProjectFromGithubMenu] = importOverleafModules(
@@ -160,9 +149,6 @@ function NewProjectButton({
       <Dropdown
         className={classnames('new-project-dropdown', className)}
         onSelect={handleMainButtonClick}
-        onToggle={nextShow => {
-          if (nextShow) sendProjectListMB('new-project-expand', undefined)
-        }}
       >
         <DropdownToggle
           id={id}
@@ -231,7 +217,9 @@ function NewProjectButton({
                   <DropdownItem
                     key={`portal-template-${index}`}
                     href={`${portalTemplate.url}#templates`}
-                    onClick={e => handlePortalTemplateClick(e, portalTemplate)}
+                    onClick={e =>
+                      handlePortalTemplateClick(e, portalTemplate.name)
+                    }
                     aria-label={`${portalTemplate.name} ${t('template')}`}
                   >
                     {portalTemplate.name}
@@ -253,7 +241,9 @@ function NewProjectButton({
             <li role="none" key={`new-project-button-template-${index}`}>
               <DropdownItem
                 href={templateLink.url}
-                onClick={e => handleStaticTemplateClick(e, templateLink)}
+                onClick={e =>
+                  handleStaticTemplateClick(e, templateLink.trackingKey)
+                }
                 aria-label={`${templateLink.name} ${t('template')}`}
               >
                 {templateLink.name === 'view_all'

services/web/frontend/js/features/project-list/components/project-list-events.ts

@@ -1,54 +0,0 @@
-import { useCallback } from 'react'
-import { useSplitTestContext } from '@/shared/context/split-test-context'
-import { sendMB } from '@/infrastructure/event-tracking'
-
-export type ExtraSegmentations = {
-  'menu-expand': {
-    item: 'help' | 'account' | 'features' | 'admin'
-    location: 'top-menu' | 'sidebar'
-  }
-  'menu-click': {
-    item:
-      | 'login'
-      | 'register'
-      | 'premium-features'
-      | 'enterprises'
-      | 'universities'
-      | 'publishers'
-      | 'edu'
-      | 'government'
-      | 'why-latex'
-      | 'learn'
-      | 'contact'
-      | 'templates'
-      | 'plans'
-    location: 'top-menu' | 'sidebar'
-    destinationURL?: string
-  }
-  'new-project-expand': undefined
-  'new-project-click': {
-    item:
-      | 'blank-project'
-      | 'example-project'
-      | 'upload'
-      | 'github-import'
-      | 'all-templates'
-      | (string & {})
-    destinationURL?: string
-  }
-}
-
-export const useSendProjectListMB = () => {
-  const { splitTestVariants } = useSplitTestContext()
-  const hasDsNav = splitTestVariants['sidebar-navigation-ui-update'] as
-    | 'default'
-    | 'active'
-  return useCallback(
-    <T extends keyof ExtraSegmentations>(
-      event: T,
-      payload: ExtraSegmentations[T]
-    ) =>
-      sendMB(event, { ...payload, 'sidebar-navigation-ui-update': hasDsNav }),
-    [hasDsNav]
-  )
-}

services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx

@@ -16,7 +16,6 @@ import { useContactUsModal } from '@/shared/hooks/use-contact-us-modal'
 import { UserProvider } from '@/shared/context/user-context'
 import { AccountMenuItems } from '@/features/ui/components/bootstrap-5/navbar/account-menu-items'
 import { useScrolled } from '@/features/project-list/components/sidebar/use-scroll'
-import { useSendProjectListMB } from '@/features/project-list/components/project-list-events'
 
 function SidebarDsNav() {
   const { t } = useTranslation()
@@ -30,7 +29,6 @@ function SidebarDsNav() {
   const { mousePos, getHandleProps, getTargetProps } = usePersistedResize({
     name: 'project-sidebar',
   })
-  const sendMB = useSendProjectListMB()
   const { sessionUser, showSubscriptionLink, items } = getMeta('ol-navbar')
   const helpItem = items.find(
     item => item.text === 'help'
@@ -67,12 +65,7 @@ function SidebarDsNav() {
           {helpItem && (
             <Dropdown
               className="ds-nav-icon-dropdown"
-              onToggle={show => {
-                setShowHelpDropdown(show)
-                if (show) {
-                  sendMB('menu-expand', { item: 'help', location: 'sidebar' })
-                }
-              }}
+              onToggle={show => setShowHelpDropdown(show)}
             >
               <Dropdown.Toggle role="menuitem" aria-label={t('help')}>
                 <OLTooltip
@@ -99,7 +92,6 @@ function SidebarDsNav() {
                 <NavDropdownMenuItems
                   dropdown={helpItem.dropdown}
                   showContactUsModal={showContactUsModal}
-                  location="sidebar"
                 />
               </Dropdown.Menu>
             </Dropdown>
@@ -108,15 +100,7 @@ function SidebarDsNav() {
             <>
               <Dropdown
                 className="ds-nav-icon-dropdown"
-                onToggle={show => {
-                  setShowAccountDropdown(show)
-                  if (show) {
-                    sendMB('menu-expand', {
-                      item: 'account',
-                      location: 'sidebar',
-                    })
-                  }
-                }}
+                onToggle={show => setShowAccountDropdown(show)}
               >
                 <Dropdown.Toggle role="menuitem" aria-label={t('Account')}>
                   <OLTooltip

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/admin-menu.tsx

@@ -1,7 +1,6 @@
 import type { DefaultNavbarMetadata } from '@/features/ui/components/types/default-navbar-metadata'
 import NavDropdownMenu from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu'
 import NavDropdownLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item'
-import { useSendProjectListMB } from '@/features/project-list/components/project-list-events'
 
 export default function AdminMenu({
   canDisplayAdminMenu,
@@ -17,20 +16,8 @@ export default function AdminMenu({
   | 'canDisplaySurveyMenu'
   | 'adminUrl'
 >) {
-  const sendProjectListMB = useSendProjectListMB()
   return (
-    <NavDropdownMenu
-      title="Admin"
-      className="subdued"
-      onToggle={nextShow => {
-        if (nextShow) {
-          sendProjectListMB('menu-expand', {
-            item: 'admin',
-            location: 'top-menu',
-          })
-        }
-      }}
-    >
+    <NavDropdownMenu title="Admin" className="subdued">
       {canDisplayAdminMenu ? (
         <>
           <NavDropdownLinkItem href="/admin">Manage Site</NavDropdownLinkItem>

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/contact-us-item.tsx

@@ -1,7 +1,7 @@
+import { sendMB } from '@/infrastructure/event-tracking'
 import { useTranslation } from 'react-i18next'
 import { DropdownItem } from 'react-bootstrap-5'
 import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
-import { useSendProjectListMB } from '@/features/project-list/components/project-list-events'
 
 export default function ContactUsItem({
   showModal,
@@ -9,7 +9,6 @@ export default function ContactUsItem({
   showModal: (event?: Event) => void
 }) {
   const { t } = useTranslation()
-  const sendMB = useSendProjectListMB()
 
   return (
     <DropdownListItem>
@@ -17,7 +16,7 @@ export default function ContactUsItem({
         as="button"
         role="menuitem"
         onClick={() => {
-          sendMB('menu-click', { item: 'contact', location: 'top-menu' })
+          sendMB('menu-clicked-contact')
           showModal()
         }}
       >

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx

@@ -27,6 +27,7 @@ function DefaultNavbar(props: DefaultNavbarMetadata) {
     showCloseIcon = false,
     showSubscriptionLink,
     showSignUpLink,
+    currentUrl,
     sessionUser,
     adminUrl,
     items,
@@ -124,7 +125,10 @@ function DefaultNavbar(props: DefaultNavbarMetadata) {
                       showSubscriptionLink={showSubscriptionLink}
                     />
                   ) : (
-                    <LoggedOutItems showSignUpLink={showSignUpLink} />
+                    <LoggedOutItems
+                      showSignUpLink={showSignUpLink}
+                      currentUrl={currentUrl}
+                    />
                   )}
                 </Nav>
               </Navbar.Collapse>

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-in-items.tsx

@@ -3,7 +3,6 @@ import NavDropdownMenu from '@/features/ui/components/bootstrap-5/navbar/nav-dro
 import type { NavbarSessionUser } from '@/features/ui/components/types/navbar'
 import NavLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-link-item'
 import { AccountMenuItems } from './account-menu-items'
-import { useSendProjectListMB } from '@/features/project-list/components/project-list-events'
 
 export default function LoggedInItems({
   sessionUser,
@@ -13,24 +12,12 @@ export default function LoggedInItems({
   showSubscriptionLink: boolean
 }) {
   const { t } = useTranslation()
-  const sendProjectListMB = useSendProjectListMB()
   return (
     <>
       <NavLinkItem href="/project" className="nav-item-projects">
         {t('projects')}
       </NavLinkItem>
-      <NavDropdownMenu
-        title={t('Account')}
-        className="nav-item-account"
-        onToggle={nextShow => {
-          if (nextShow) {
-            sendProjectListMB('menu-expand', {
-              item: 'account',
-              location: 'top-menu',
-            })
-          }
-        }}
-      >
+      <NavDropdownMenu title={t('Account')} className="nav-item-account">
         <AccountMenuItems
           sessionUser={sessionUser}
           showSubscriptionLink={showSubscriptionLink}

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-out-items.tsx

@@ -1,14 +1,15 @@
 import { useTranslation } from 'react-i18next'
 import NavLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-link-item'
-import { useSendProjectListMB } from '@/features/project-list/components/project-list-events'
+import { sendMB } from '@/infrastructure/event-tracking'
 
 export default function LoggedOutItems({
   showSignUpLink,
+  currentUrl,
 }: {
   showSignUpLink: boolean
+  currentUrl: string
 }) {
   const { t } = useTranslation()
-  const sendMB = useSendProjectListMB()
 
   return (
     <>
@@ -16,8 +17,8 @@ export default function LoggedOutItems({
         <NavLinkItem
           href="/register"
           className="primary nav-account-item"
-          onClick={() => {
-            sendMB('menu-click', { item: 'register', location: 'top-menu' })
+          onClick={e => {
+            sendMB('menu-clicked-register', { page: currentUrl })
           }}
         >
           {t('sign_up')}
@@ -26,8 +27,8 @@ export default function LoggedOutItems({
       <NavLinkItem
         href="/login"
         className="nav-account-item"
-        onClick={() => {
-          sendMB('menu-click', { item: 'login', location: 'top-menu' })
+        onClick={e => {
+          sendMB('menu-clicked-login', { page: currentUrl })
         }}
       >
         {t('log_in')}

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-from-data.tsx

@@ -3,15 +3,12 @@ import type {
   NavbarItemDropdownData,
 } from '@/features/ui/components/types/navbar'
 import NavDropdownDivider from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-divider'
+import { sendMB } from '@/infrastructure/event-tracking'
 import { isDropdownLinkItem } from '@/features/ui/components/bootstrap-5/navbar/util'
 import NavDropdownLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item'
 import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 import NavDropdownMenu from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu'
 import ContactUsItem from '@/features/ui/components/bootstrap-5/navbar/contact-us-item'
-import {
-  type ExtraSegmentations,
-  useSendProjectListMB,
-} from '@/features/project-list/components/project-list-events'
 
 export default function NavDropdownFromData({
   item,
@@ -20,24 +17,11 @@ export default function NavDropdownFromData({
   item: NavbarDropdownItemData
   showContactUsModal: (event?: Event) => void
 }) {
-  const sendProjectListMB = useSendProjectListMB()
   return (
-    <NavDropdownMenu
-      title={item.translatedText}
-      className={item.class}
-      onToggle={nextShow => {
-        if (nextShow) {
-          sendProjectListMB('menu-expand', {
-            item: item.trackingKey,
-            location: 'top-menu',
-          })
-        }
-      }}
-    >
+    <NavDropdownMenu title={item.translatedText} className={item.class}>
       <NavDropdownMenuItems
         dropdown={item.dropdown}
         showContactUsModal={showContactUsModal}
-        location="top-menu"
       />
     </NavDropdownMenu>
   )
@@ -46,13 +30,10 @@ export default function NavDropdownFromData({
 export function NavDropdownMenuItems({
   dropdown,
   showContactUsModal,
-  location,
 }: {
   dropdown: NavbarItemDropdownData
   showContactUsModal: (event?: Event) => void
-  location: ExtraSegmentations['menu-expand']['location']
 }) {
-  const sendProjectListMB = useSendProjectListMB()
   return (
     <>
       {dropdown.map((child, index) => {
@@ -66,11 +47,7 @@ export function NavDropdownMenuItems({
               key={index}
               href={child.url}
               onClick={() => {
-                sendProjectListMB('menu-click', {
-                  item: child.trackingKey as ExtraSegmentations['menu-click']['item'],
-                  location,
-                  destinationURL: child.url,
-                })
+                sendMB(child.event)
               }}
             >
               {child.translatedText}

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu.tsx

@@ -5,17 +5,15 @@ export default function NavDropdownMenu({
   title,
   className,
   children,
-  onToggle,
 }: {
   title: string
   className?: string
   children: ReactNode
-  onToggle?: (nextShow: boolean) => void
 }) {
   // Can't use a NavDropdown here because it's impossible to render the menu as
   // a <ul> element using NavDropdown
   return (
-    <Dropdown as="li" role="none" className={className} onToggle={onToggle}>
+    <Dropdown as="li" role="none" className={className}>
       <Dropdown.Toggle role="menuitem">{title}</Dropdown.Toggle>
       <Dropdown.Menu as="ul" role="menu" align="end">
         {children}

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-item-from-data.tsx

@@ -5,8 +5,8 @@ import {
 } from '@/features/ui/components/bootstrap-5/navbar/util'
 import NavDropdownFromData from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-from-data'
 import NavItem from '@/features/ui/components/bootstrap-5/navbar/nav-item'
+import { sendMB } from '@/infrastructure/event-tracking'
 import NavLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-link-item'
-import { useSendProjectListMB } from '@/features/project-list/components/project-list-events'
 
 export default function NavItemFromData({
   item,
@@ -15,7 +15,6 @@ export default function NavItemFromData({
   item: NavbarItemData
   showContactUsModal: (event?: Event) => void
 }) {
-  const sendProjectListMB = useSendProjectListMB()
   if (isDropdownItem(item)) {
     return (
       <NavDropdownFromData
@@ -29,11 +28,7 @@ export default function NavItemFromData({
         className={item.class}
         href={item.url}
         onClick={() => {
-          sendProjectListMB('menu-click', {
-            item: item.trackingKey as any,
-            location: 'top-menu',
-            destinationURL: item.url,
-          })
+          sendMB(item.event)
         }}
       >
         {item.translatedText}

services/web/frontend/js/features/ui/components/types/navbar.ts

@@ -14,7 +14,7 @@ export interface NavbarDropdownTextItem {
 
 export interface NavbarDropdownLinkItem extends NavbarDropdownTextItem {
   url: string
-  trackingKey: string
+  event: string
   eventSegmentation?: Record<string, any>
 }
 
@@ -37,12 +37,11 @@ export interface NavbarTextItemData {
 
 export interface NavbarDropdownItemData extends NavbarTextItemData {
   dropdown: NavbarItemDropdownData
-  trackingKey: 'help' | 'account' | 'features' | 'admin'
 }
 
 export interface NavbarLinkItemData extends NavbarTextItemData {
   url: string
-  trackingKey: string
+  event: string
 }
 
 export type NavbarItemData =