[web] Reapply "Update navigation events (navbar menu, new project)" and bugfix (#22576)

* Reapply "[web] Update navigation events (navbar menu, new project) (#22473)"

This reverts commit 134809f73c57d3f019e8158243e1fc74f9f6540a.

* Set the analytics event on the links, not the small contained span (pug)

* Fixup `menu-click` events in pug files: use `trackingKey`, correct event name, ...

* Add `location` prop in NavDropdownMenuItems and ContactUsItem, because they're used in the sidebar too

GitOrigin-RevId: 0bb95f69182268c34929f51121f2d5a2b19c4692

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

@@ -48,6 +48,10 @@ 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
@@ -84,6 +88,10 @@ 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
@@ -92,18 +100,18 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(class={
 											if child.divider
 												+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-clicked-contact" event-tracking-mb="true" event-tracking-trigger="click")
+												+dropdown-menu-link-item()(data-ol-open-contact-form-modal="contact-us" data-bs-target="#contactUsModal" href data-bs-toggle="modal" event-tracking="menu-click" event-tracking-mb="true" event-tracking-trigger="click" event-segmentation={"item": "contact", "location": "top-menu"})
+													span
 														| #{translate("contact_us")}
 											else
 												if child.url
 													+dropdown-menu-link-item()(
 														href=child.url,
 														class=child.class,
-														event-tracking=child.event
+														event-tracking="menu-click"
 														event-tracking-mb="true"
 														event-tracking-trigger="click"
-														event-segmentation=child.eventSegmentation
+														event-segmentation={ item: child.trackingKey, location: 'top-menu' }
 													) !{translate(child.text)}
 												else
 													+dropdown-menu-item !{translate(child.text)}
@@ -113,9 +121,10 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(class={
 										+nav-link(
 											href=item.url,
 											class=item.class,
-											event-tracking=item.event
+											event-tracking="menu-click"
 											event-tracking-mb="true"
 											event-tracking-trigger="click"
+											event-segmentation={ item: item.trackingKey, location: 'top-menu' }
 										) !{translate(item.text)}
 									else
 										| !{translate(item.text)}
@@ -127,22 +136,22 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(class={
 							+nav-item.primary
 								+nav-link(
 									href="/register"
-									event-tracking="menu-clicked-register"
+									event-tracking="menu-click"
 									event-tracking-action="clicked"
 									event-tracking-trigger="click"
 									event-tracking-mb="true"
-									event-segmentation={ page: currentUrl }
+									event-segmentation={ page: currentUrl, item: 'register', location: 'top-menu' }
 								) #{translate('sign_up')}
 
 						// login link
 						+nav-item
 							+nav-link(
 								href="/login"
-								event-tracking="menu-clicked-login"
+								event-tracking="menu-click"
 								event-tracking-action="clicked"
 								event-tracking-trigger="click"
 								event-tracking-mb="true"
-								event-segmentation={ page: currentUrl }
+								event-segmentation={ page: currentUrl, item: 'login', location: 'top-menu' }
 							) #{translate('log_in')}
 
 					// projects link and account menu
@@ -155,6 +164,10 @@ 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,6 +42,10 @@ 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
@@ -85,6 +89,10 @@ 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
@@ -94,8 +102,8 @@ nav.navbar.navbar-default.navbar-main
 												li.divider
 											else if child.isContactUs
 												li
-													a(data-ol-open-contact-form-modal="contact-us" href)
-														span(event-tracking="menu-clicked-contact" event-tracking-mb="true" event-tracking-trigger="click")
+													a(data-ol-open-contact-form-modal="contact-us" href event-tracking="menu-click" event-tracking-mb="true" event-tracking-trigger="click" event-segmentation={"item": "contact", "location": "top-menu"})
+														span
 															| #{translate("contact_us")}
 											else
 												li
@@ -103,10 +111,10 @@ nav.navbar.navbar-default.navbar-main
 														a(
 															href=child.url,
 															class=child.class,
-															event-tracking=child.event
+															event-tracking="menu-click"
 															event-tracking-mb="true"
 															event-tracking-trigger="click"
-															event-segmentation=child.eventSegmentation
+															event-segmentation={item: item.trackingKey, location: 'top-menu'}
 														) !{translate(child.text)}
 													else
 														| !{translate(child.text)}
@@ -116,9 +124,10 @@ nav.navbar.navbar-default.navbar-main
 										a(
 											href=item.url,
 											class=item.class,
-											event-tracking=item.event
+											event-tracking="menu-click"
 											event-tracking-mb="true"
 											event-tracking-trigger="click"
+											event-segmentation={ item: item.trackingKey, location: 'top-menu' }
 										) !{translate(item.text)}
 									else
 										| !{translate(item.text)}
@@ -130,22 +139,22 @@ nav.navbar.navbar-default.navbar-main
 							li.primary
 								a(
 									href="/register"
-									event-tracking="menu-clicked-register"
+									event-tracking="menu-click"
 									event-tracking-action="clicked"
 									event-tracking-trigger="click"
 									event-tracking-mb="true"
-									event-segmentation={ page: currentUrl }
+									event-segmentation={ page: currentUrl, item: 'register', location: 'top-menu' }
 								) #{translate('sign_up')}
 
 						// login link
 						li
 							a(
 								href="/login"
-								event-tracking="menu-clicked-login"
+								event-tracking="menu-click"
 								event-tracking-action="clicked"
 								event-tracking-trigger="click"
 								event-tracking-mb="true"
-								event-segmentation={ page: currentUrl }
+								event-segmentation={ page: currentUrl, item: 'login', location: 'top-menu' }
 							) #{translate('log_in')}
 
 					// projects link and account menu
@@ -159,6 +168,10 @@ 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,6 +42,10 @@ 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
@@ -85,6 +89,10 @@ 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
@@ -94,8 +102,8 @@ nav.navbar.navbar-default.navbar-main.website-redesign-navbar
 												li.divider
 											else if child.isContactUs
 												li
-													a(data-ol-open-contact-form-modal="contact-us" href)
-														span(event-tracking="menu-clicked-contact" event-tracking-mb="true" event-tracking-trigger="click")
+													a(data-ol-open-contact-form-modal="contact-us" href event-tracking="menu-click" event-tracking-mb="true" event-tracking-trigger="click" event-segmentation={"item": "contact", "location": "top-menu"})
+														span
 															| #{translate("contact_us")}
 											else
 												li
@@ -103,10 +111,10 @@ nav.navbar.navbar-default.navbar-main.website-redesign-navbar
 														a(
 															href=child.url,
 															class=child.class,
-															event-tracking=child.event
+															event-tracking="menu-click"
 															event-tracking-mb="true"
 															event-tracking-trigger="click"
-															event-segmentation=child.eventSegmentation
+															event-segmentation={item: child.trackingKey, location: 'top-menu'}
 														) !{translate(child.text)}
 													else
 														| !{translate(child.text)}
@@ -116,9 +124,10 @@ nav.navbar.navbar-default.navbar-main.website-redesign-navbar
 										a(
 											href=item.url,
 											class=item.class,
-											event-tracking=item.event
+											event-tracking="menu-click"
 											event-tracking-mb="true"
 											event-tracking-trigger="click"
+											event-segmentation={ item: item.trackingKey, location: 'top-menu' }
 										) !{translate(item.text)}
 									else
 										| !{translate(item.text)}
@@ -130,22 +139,22 @@ nav.navbar.navbar-default.navbar-main.website-redesign-navbar
 							li.primary
 								a(
 									href="/register"
-									event-tracking="menu-clicked-register"
+									event-tracking="menu-click"
 									event-tracking-action="clicked"
 									event-tracking-trigger="click"
 									event-tracking-mb="true"
-									event-segmentation={ page: currentUrl }
+									event-segmentation={ page: currentUrl, item: 'register', location: 'top-menu' }
 								) #{translate('sign_up')}
 
 						// login link
 						li.secondary
 							a(
 								href="/login"
-								event-tracking="menu-clicked-login"
+								event-tracking="menu-click"
 								event-tracking-action="clicked"
 								event-tracking-trigger="click"
 								event-tracking-mb="true"
-								event-segmentation={ page: currentUrl }
+								event-segmentation={ page: currentUrl, item: 'login', location: 'top-menu' }
 							) #{translate('log_in')}
 
 					// projects link and account menu
@@ -159,6 +168,10 @@ 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