Adds track events for navigation dropdowns and global search

app/views/layouts/_search.html.haml

@@ -2,7 +2,7 @@
   - group_data_attrs = { group_path: j(@group.path), name: @group.name, issues_path: issues_group_path(j(@group.path)), mr_path: merge_requests_group_path(j(@group.path)) }
 - if @project && @project.persisted?
   - project_data_attrs = { project_path: j(@project.path), name: j(@project.name), issues_path: project_issues_path(@project), mr_path: project_merge_requests_path(@project), issues_disabled: !@project.issues_enabled? }
-.search.search-form
+.search.search-form{ data: { track_label: "navbar_search", track_event: "activate_form_input" } }
   = form_tag search_path, method: :get, class: 'form-inline' do |f|
     .search-input-container
       .search-input-wrap

app/views/layouts/header/_default.html.haml

@@ -54,7 +54,7 @@
                 %span.badge.badge-pill.todos-count{ class: ('hidden' if todos_pending_count.zero?) }
                   = todos_count_format(todos_pending_count)
           - if header_link?(:user_dropdown)
-            %li.nav-item.header-user.dropdown
+            %li.nav-item.header-user.dropdown{ data: { track_label: "profile_dropdown", track_event: "click_dropdown" } }
               = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
                 = image_tag avatar_icon_for_user(current_user, 23), width: 23, height: 23, class: "header-user-avatar qa-user-avatar"
                 = sprite_icon('angle-down', css_class: 'caret-down')

app/views/layouts/header/_new_dropdown.haml

-%li.header-new.dropdown
+%li.header-new.dropdown{ data: { track_label: "new_dropdown", track_event: "click_dropdown"  } }
   = link_to new_project_path, class: "header-new-dropdown-toggle has-tooltip qa-new-menu-toggle", title: _("New..."), ref: 'tooltip', aria: { label: _("New...") }, data: { toggle: 'dropdown', placement: 'bottom', container: 'body', display: 'static' } do
     = sprite_icon('plus-square', size: 16)
     = sprite_icon('angle-down', css_class: 'caret-down')

app/views/layouts/nav/_dashboard.html.haml

 %ul.list-unstyled.navbar-sub-nav
   - if dashboard_nav_link?(:projects)
-    = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: { id: 'nav-projects-dropdown', class: "home dropdown header-projects qa-projects-dropdown" }) do
+    = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: { id: 'nav-projects-dropdown', class: "home dropdown header-projects qa-projects-dropdown", data: { track_label: "projects_dropdown", track_event: "click_dropdown" } }) do
       %button{ type: 'button', data: { toggle: "dropdown" } }
         = _('Projects')
         = sprite_icon('angle-down', css_class: 'caret-down')
@@ -8,7 +8,7 @@
         = render "layouts/nav/projects_dropdown/show"
 
   - if dashboard_nav_link?(:groups)
-    = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { id: 'nav-groups-dropdown', class: "home dropdown header-groups qa-groups-dropdown" }) do
+    = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { id: 'nav-groups-dropdown', class: "home dropdown header-groups qa-groups-dropdown", data: { track_label: "groups_dropdown", track_event: "click_dropdown"  } }) do
       %button{ type: 'button', data: { toggle: "dropdown" } }
         = _('Groups')
         = sprite_icon('angle-down', css_class: 'caret-down')

ee/app/assets/javascripts/main.js

 import $ from 'jquery';
 import initEETrialBanner from 'ee/ee_trial_banner';
+import Stats from 'ee/stats';
 
 $(() => {
   /**
@@ -9,4 +10,6 @@ $(() => {
 
   // EE specific calls
   initEETrialBanner();
+
+  Stats.bindTrackableContainer('.navbar-gitlab', 'navbar_top');
 });

ee/app/assets/javascripts/stats.js

@@ -27,6 +27,14 @@ const trackEvent = (category, eventName, additionalData = { label: '', property:
   }
 };
 
+const isSelect2 = (element) => element.classList.contains('select2');
+
+const isBsDropdown = (element) => {
+  const hasDropdownClass = element.classList.contains('dropdown');
+  const dropdownToggle = element.querySelector('[data-toggle="dropdown"]');
+  return hasDropdownClass && dropdownToggle !== null;
+};
+
 const bindTrackableContainer = (container = '', category = document.body.dataset.page) => {
   if (!snowPlowEnabled()) {
     return;
@@ -54,12 +62,27 @@ const bindTrackableContainer = (container = '', category = document.body.dataset
 
   const trackableElements = document.querySelectorAll(`${container} [data-track-label]`);
   trackableElements.forEach(element => {
-    element.addEventListener('click', (e) => clickHandler(e));
+    if (!isSelect2(element) && !isBsDropdown(element)) {
+      element.addEventListener('click', (e) => clickHandler(e));
+    }
   });
 
   // jquery required for select2 events
   // see: https://github.com/select2/select2/issues/4686#issuecomment-264747428
   $(`${container} .select2[data-track-label]`).on('click', (e) => clickHandler(e));
+
+  const dropdownHandler = (e, open = true) => {
+    const target = e.currentTarget;
+    const property = target.getAttribute('data-track-property') || '';
+    const eventName = target.getAttribute('data-track-event');
+    const value = target.value || '';
+    const label = target.getAttribute('data-track-label') + (open ? '_open' : '_close');
+    trackEvent(category, eventName, { label, property, value });
+  };
+
+  // bootstrap dropdowns
+  $(`${container} [data-track-label][data-track-event="click_dropdown"]`).on('show.bs.dropdown', (e) => dropdownHandler(e));
+  $(`${container} [data-track-label][data-track-event="click_dropdown"]`).on('hide.bs.dropdown', (e) => dropdownHandler(e, false));
 };
 
 export default {