Track when Static Site Editor is initialized

Send a tracking event when SSE main page
is mounted successfully

app/assets/javascripts/static_site_editor/constants.js

@@ -18,3 +18,4 @@ export const DEFAULT_HEADING = s__('StaticSiteEditor|Static site editor');
 
 export const TRACKING_ACTION_CREATE_COMMIT = 'create_commit';
 export const TRACKING_ACTION_CREATE_MERGE_REQUEST = 'create_merge_request';
+export const TRACKING_ACTION_INITIALIZE_EDITOR = 'initialize_editor';

app/assets/javascripts/static_site_editor/pages/home.vue

@@ -7,7 +7,8 @@ import appDataQuery from '../graphql/queries/app_data.query.graphql';
 import sourceContentQuery from '../graphql/queries/source_content.query.graphql';
 import submitContentChangesMutation from '../graphql/mutations/submit_content_changes.mutation.graphql';
 import createFlash from '~/flash';
-import { LOAD_CONTENT_ERROR } from '../constants';
+import Tracking from '~/tracking';
+import { LOAD_CONTENT_ERROR, TRACKING_ACTION_INITIALIZE_EDITOR } from '../constants';
 import { SUCCESS_ROUTE } from '../router/constants';
 
 export default {
@@ -59,6 +60,9 @@ export default {
       return Boolean(this.sourceContent);
     },
   },
+  mounted() {
+    Tracking.event(document.body.dataset.page, TRACKING_ACTION_INITIALIZE_EDITOR);
+  },
   methods: {
     onDismissError() {
       this.submitChangesError = null;

changelogs/unreleased/216677-track-static-site-editor-initializations.yml

+---
+title: Track when Static Site Editor is initialized
+merge_request: 34215
+author:
+type: added

spec/frontend/static_site_editor/pages/home_spec.js

@@ -7,6 +7,8 @@ import InvalidContentMessage from '~/static_site_editor/components/invalid_conte
 import SubmitChangesError from '~/static_site_editor/components/submit_changes_error.vue';
 import submitContentChangesMutation from '~/static_site_editor/graphql/mutations/submit_content_changes.mutation.graphql';
 import { SUCCESS_ROUTE } from '~/static_site_editor/router/constants';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+import { TRACKING_ACTION_INITIALIZE_EDITOR } from '~/static_site_editor/constants';
 
 import {
   projectId as project,
@@ -17,6 +19,7 @@ import {
   username,
   savedContentMeta,
   submitChangesError,
+  trackingCategory,
 } from '../mock_data';
 
 const localVue = createLocalVue();
@@ -29,6 +32,7 @@ describe('static_site_editor/pages/home', () => {
   let $apollo;
   let $router;
   let mutateMock;
+  let trackingSpy;
 
   const buildApollo = (queries = {}) => {
     mutateMock = jest.fn();
@@ -76,10 +80,14 @@ describe('static_site_editor/pages/home', () => {
   beforeEach(() => {
     buildApollo();
     buildRouter();
+
+    document.body.dataset.page = trackingCategory;
+    trackingSpy = mockTracking(document.body.dataset.page, undefined, jest.spyOn);
   });
 
   afterEach(() => {
     wrapper.destroy();
+    unmockTracking();
     wrapper = null;
     $apollo = null;
   });
@@ -208,4 +216,12 @@ describe('static_site_editor/pages/home', () => {
       expect($router.push).toHaveBeenCalledWith(SUCCESS_ROUTE);
     });
   });
+
+  it('tracks when editor is initialized on the mounted lifecycle hook', () => {
+    buildWrapper();
+    expect(trackingSpy).toHaveBeenCalledWith(
+      document.body.dataset.page,
+      TRACKING_ACTION_INITIALIZE_EDITOR,
+    );
+  });
 });