Instrument content editor toolbar

Adds a tracking event to detect when a
toolbar control is executed in the
content editor

Changelog: other

app/assets/javascripts/content_editor/components/toolbar_button.vue

@@ -45,7 +45,7 @@ export default {
         this.tiptapEditor.chain()[this.editorCommand]().focus().run();
       }
 
-      this.$emit('click', { contentType });
+      this.$emit('execute', { contentType });
     },
   },
 };

app/assets/javascripts/content_editor/components/top_toolbar.vue

 <script>
+import Tracking from '~/tracking';
+import { CONTENT_EDITOR_TRACKING_LABEL, TOOLBAR_CONTROL_TRACKING_ACTION } from '../constants';
 import { ContentEditor } from '../services/content_editor';
 import Divider from './divider.vue';
 import ToolbarButton from './toolbar_button.vue';
 
+const trackingMixin = Tracking.mixin({
+  label: CONTENT_EDITOR_TRACKING_LABEL,
+});
+
 export default {
   components: {
     ToolbarButton,
     Divider,
   },
+  mixins: [trackingMixin],
   props: {
     contentEditor: {
       type: ContentEditor,
       required: true,
     },
   },
+  methods: {
+    trackToolbarControlExecution({ contentType: property, value }) {
+      this.track(TOOLBAR_CONTROL_TRACKING_ACTION, {
+        property,
+        value,
+      });
+    },
+  },
 };
 </script>
 <template>
@@ -27,6 +42,7 @@ export default {
       editor-command="toggleBold"
       :label="__('Bold text')"
       :tiptap-editor="contentEditor.tiptapEditor"
+      @execute="trackToolbarControlExecution"
     />
     <toolbar-button
       data-testid="italic"
@@ -35,6 +51,7 @@ export default {
       editor-command="toggleItalic"
       :label="__('Italic text')"
       :tiptap-editor="contentEditor.tiptapEditor"
+      @execute="trackToolbarControlExecution"
     />
     <toolbar-button
       data-testid="code"
@@ -43,6 +60,7 @@ export default {
       editor-command="toggleCode"
       :label="__('Code')"
       :tiptap-editor="contentEditor.tiptapEditor"
+      @execute="trackToolbarControlExecution"
     />
     <divider />
     <toolbar-button
@@ -52,6 +70,7 @@ export default {
       editor-command="toggleBlockquote"
       :label="__('Insert a quote')"
       :tiptap-editor="contentEditor.tiptapEditor"
+      @execute="trackToolbarControlExecution"
     />
     <toolbar-button
       data-testid="bullet-list"
@@ -60,6 +79,7 @@ export default {
       editor-command="toggleBulletList"
       :label="__('Add a bullet list')"
       :tiptap-editor="contentEditor.tiptapEditor"
+      @execute="trackToolbarControlExecution"
     />
     <toolbar-button
       data-testid="ordered-list"
@@ -68,6 +88,7 @@ export default {
       editor-command="toggleOrderedList"
       :label="__('Add a numbered list')"
       :tiptap-editor="contentEditor.tiptapEditor"
+      @execute="trackToolbarControlExecution"
     />
   </div>
 </template>

app/assets/javascripts/content_editor/constants.js

@@ -3,3 +3,6 @@ import { s__ } from '~/locale';
 export const PROVIDE_SERIALIZER_OR_RENDERER_ERROR = s__(
   'ContentEditor|You have to provide a renderMarkdown function or a custom serializer',
 );
+
+export const CONTENT_EDITOR_TRACKING_LABEL = 'content_editor';
+export const TOOLBAR_CONTROL_TRACKING_ACTION = 'execute_toolbar_control';

spec/frontend/content_editor/components/toolbar_button_spec.js

@@ -83,7 +83,7 @@ describe('content_editor/components/toolbar_button', () => {
       await findButton().trigger('click');
 
       expect(toggleFooSpy).toHaveBeenCalled();
-      expect(wrapper.emitted().click).toHaveLength(1);
+      expect(wrapper.emitted().execute).toHaveLength(1);
     });
 
     it('does not executes the content type command when executeCommand = false', async () => {
@@ -92,7 +92,7 @@ describe('content_editor/components/toolbar_button', () => {
       await findButton().trigger('click');
 
       expect(toggleFooSpy).not.toHaveBeenCalled();
-      expect(wrapper.emitted().click).toHaveLength(1);
+      expect(wrapper.emitted().execute).toHaveLength(1);
     });
   });
 });

spec/frontend/content_editor/components/top_toolbar_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { mockTracking } from 'helpers/tracking_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import TopToolbar from '~/content_editor/components/top_toolbar.vue';
+import {
+  TOOLBAR_CONTROL_TRACKING_ACTION,
+  CONTENT_EDITOR_TRACKING_LABEL,
+} from '~/content_editor/constants';
 import { createContentEditor } from '~/content_editor/services/create_content_editor';
 
 describe('content_editor/components/top_toolbar', () => {
   let wrapper;
   let contentEditor;
-
+  let trackingSpy;
   const buildEditor = () => {
     contentEditor = createContentEditor({ renderMarkdown: () => true });
   };
@@ -21,6 +26,10 @@ describe('content_editor/components/top_toolbar', () => {
     );
   };
 
+  beforeEach(() => {
+    trackingSpy = mockTracking(undefined, null, jest.spyOn);
+  });
+
   beforeEach(() => {
     buildEditor();
   });
@@ -29,7 +38,7 @@ describe('content_editor/components/top_toolbar', () => {
     wrapper.destroy();
   });
 
-  it.each`
+  describe.each`
     testId            | buttonProps
     ${'bold'}         | ${{ contentType: 'bold', iconName: 'bold', label: 'Bold text', editorCommand: 'toggleBold' }}
     ${'italic'}       | ${{ contentType: 'italic', iconName: 'italic', label: 'Italic text', editorCommand: 'toggleItalic' }}
@@ -37,11 +46,31 @@ describe('content_editor/components/top_toolbar', () => {
     ${'blockquote'}   | ${{ contentType: 'blockquote', iconName: 'quote', label: 'Insert a quote', editorCommand: 'toggleBlockquote' }}
     ${'bullet-list'}  | ${{ contentType: 'bulletList', iconName: 'list-bulleted', label: 'Add a bullet list', editorCommand: 'toggleBulletList' }}
     ${'ordered-list'} | ${{ contentType: 'orderedList', iconName: 'list-numbered', label: 'Add a numbered list', editorCommand: 'toggleOrderedList' }}
-  `('renders $testId button', ({ testId, buttonProps }) => {
+  `('given a $testId toolbar control', ({ testId, buttonProps }) => {
+    beforeEach(() => {
       buildWrapper();
+    });
+
+    it('renders the toolbar control with the provided properties', () => {
       expect(wrapper.findByTestId(testId).props()).toEqual({
         ...buttonProps,
         tiptapEditor: contentEditor.tiptapEditor,
       });
     });
+
+    it.each`
+      control         | eventData
+      ${'bold'}       | ${{ contentType: 'bold' }}
+      ${'blockquote'} | ${{ contentType: 'blockquote', value: 1 }}
+    `('tracks the execution of toolbar controls', ({ control, eventData }) => {
+      const { contentType, value } = eventData;
+      wrapper.findByTestId(control).vm.$emit('execute', eventData);
+
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, TOOLBAR_CONTROL_TRACKING_ACTION, {
+        label: CONTENT_EDITOR_TRACKING_LABEL,
+        property: contentType,
+        value,
+      });
+    });
+  });
 });