Added Snowplow tracking to notes

- Tracking for reply comment button
- Tracking for start discussion and start comment buttons

app/assets/javascripts/event_tracking/notes.js

+export default () => {};

app/assets/javascripts/lib/utils/text_utility.js

@@ -50,6 +50,13 @@ export const dasherize = str => str.replace(/[_\s]+/g, '-');
  */
 export const slugifyWithHyphens = str => str.toLowerCase().replace(/\s+/g, '-');
 
+/**
+ * Replaces whitespaces with underscore and converts to lower case
+ * @param {String} str
+ * @returns {String}
+ */
+export const slugifyWithUnderscore = str => str.toLowerCase().replace(/\s+/g, '_');
+
 /**
  * Truncates given text
  *

app/assets/javascripts/notes/components/comment_form.vue

@@ -11,6 +11,7 @@ import {
   capitalizeFirstCharacter,
   convertToCamelCase,
   splitCamelCase,
+  slugifyWithUnderscore,
 } from '../../lib/utils/text_utility';
 import * as constants from '../constants';
 import eventHub from '../event_hub';
@@ -129,6 +130,9 @@ export default {
         ? 'merge request'
         : 'issue';
     },
+    trackingLabel() {
+      return slugifyWithUnderscore(`${this.commentButtonTitle} button`);
+    },
   },
   watch: {
     note(newNote) {
@@ -370,6 +374,8 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                   class="btn btn-success js-comment-button js-comment-submit-button
                     qa-comment-button"
                   type="submit"
+                  :data-track-label="trackingLabel"
+                  data-track-event="click_button"
                   @click.prevent="handleSave()"
                 >
                   {{ __(commentButtonTitle) }}

app/assets/javascripts/notes/index.js

 import Vue from 'vue';
+import { isEE } from '~/lib/utils/common_utils';
+import initNoteStats from 'ee_else_ce/event_tracking/notes';
 import notesApp from './components/notes_app.vue';
 import initDiscussionFilters from './discussion_filters';
 import createStore from './stores';
@@ -38,6 +40,11 @@ document.addEventListener('DOMContentLoaded', () => {
         notesData: JSON.parse(notesDataset.notesData),
       };
     },
+    mounted() {
+      if (isEE) {
+        initNoteStats();
+      }
+    },
     render(createElement) {
       return createElement('notes-app', {
         props: {

ee/app/assets/javascripts/event_tracking/notes.js

+import Stats from 'ee/stats';
+
+export default () => {
+  document.querySelector('.main-notes-list').addEventListener('click', event => {
+    const isReplyButtonClick = event.path.find(
+      el => el.classList && el.classList.contains('js-reply-button'),
+    );
+
+    if (isReplyButtonClick) {
+      Stats.trackEvent(document.body.dataset.page, 'click_button', {
+        label: 'reply_comment_button',
+        property: '',
+        value: '',
+      });
+    }
+  });
+
+  Stats.bindTrackableContainer('.js-main-target-form');
+};

ee/changelogs/unreleased/57318-track-discussion-thread-usage-on-gitlab-com-with-snowplow-ee.yml

+---
+title: Added Snowplow tracking to notes
+merge_request: 10104
+author:
+type: added

spec/frontend/lib/utils/text_utility_spec.js

@@ -144,6 +144,12 @@ describe('text_utility', () => {
     });
   });
 
+  describe('slugifyWithUnderscore', () => {
+    it('should replaces whitespaces with underscore and convert to lower case', () => {
+      expect(textUtils.slugifyWithUnderscore('My Input String')).toEqual('my_input_string');
+    });
+  });
+
   describe('truncateNamespace', () => {
     it(`should return the root namespace if the namespace only includes one level`, () => {
       expect(textUtils.truncateNamespace('a / b')).toBe('a');