Merge branch '7427-track-navbar-clicks-on-gitlab-com' into 'master'

Resolve "Track navbar clicks on GitLab.com"

Closes #7427

See merge request gitlab-org/gitlab-ee!7787

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

@@ -60,7 +60,7 @@
             .dropdown-menu.dropdown-menu-right
               = render 'layouts/header/help_dropdown'
           - 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

@@ -2,7 +2,7 @@
 -# https://gitlab.com/gitlab-org/gitlab-ce/issues/49713 for more information.
 %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')
@@ -10,7 +10,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/event_tracking/navbar.js

+import Stats from 'ee/stats';
+
+export default function trackNavbarEvents() {
+  const container = '.navbar-gitlab';
+  const category = 'navbar_top';
+
+  Stats.bindTrackableContainer(container, category);
+
+  // track search inputs within frequent-items component
+  document
+    .querySelectorAll(`${container} .frequent-items-dropdown-container input`)
+    .forEach(element => {
+      element.addEventListener('click', e => {
+        const target = e.currentTarget;
+        const parentDropdown = target.closest('li.dropdown');
+        const label = `${parentDropdown.getAttribute('data-track-label')}_search`;
+
+        Stats.trackEvent(category, 'activate_form_input', { label, property: '', value: '' });
+      });
+    });
+}

ee/app/assets/javascripts/main.js

 import $ from 'jquery';
 import initEETrialBanner from 'ee/ee_trial_banner';
+import trackNavbarEvents from 'ee/event_tracking/navbar';
 
 $(() => {
   /**
@@ -9,4 +10,6 @@ $(() => {
 
   // EE specific calls
   initEETrialBanner();
+
+  trackNavbarEvents();
 });

ee/app/assets/javascripts/stats.js

@@ -24,6 +24,14 @@ const trackEvent = (
   }
 };
 
+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,33 @@ 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 {

ee/changelogs/unreleased/7427-track-navbar-clicks-on-gitlab-com.yml

+---
+title: Adds event tracking to navbar
+merge_request: 7787
+author:
+type: other