Track wiki page views in Snowplow

This adds frontend tracking of wiki page view events, and defines
the tracking context data.

app/assets/javascripts/pages/shared/wikis/wikis.js

 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { s__, sprintf } from '~/locale';
+import Tracking from '~/tracking';
 
 const MARKDOWN_LINK_TEXT = {
   markdown: '[Link Title](page-slug)',
@@ -8,6 +9,9 @@ const MARKDOWN_LINK_TEXT = {
   org: '[[page-slug]]',
 };
 
+const TRACKING_EVENT_NAME = 'view_wiki_page';
+const TRACKING_CONTEXT_SCHEMA = 'iglu:com.gitlab/wiki_page_context/jsonschema/1-0-0';
+
 export default class Wikis {
   constructor() {
     this.sidebarEl = document.querySelector('.js-wiki-sidebar');
@@ -57,6 +61,8 @@ export default class Wikis {
         window.onbeforeunload = null;
       });
     }
+
+    Wikis.trackPageView();
   }
 
   handleWikiTitleChange(e) {
@@ -97,4 +103,17 @@ export default class Wikis {
       classList.remove('right-sidebar-expanded');
     }
   }
+
+  static trackPageView() {
+    const wikiPageContent = document.querySelector('.js-wiki-page-content[data-tracking-context]');
+    if (!wikiPageContent) return;
+
+    Tracking.event(document.body.dataset.page, TRACKING_EVENT_NAME, {
+      label: TRACKING_EVENT_NAME,
+      context: {
+        schema: TRACKING_CONTEXT_SCHEMA,
+        data: JSON.parse(wikiPageContent.dataset.trackingContext),
+      },
+    });
+  }
 }

app/assets/stylesheets/framework/forms.scss

@@ -126,10 +126,6 @@ label {
   display: inline;
 }
 
-.wiki-content {
-  margin-top: 35px;
-}
-
 .form-control::placeholder {
   color: $gl-text-color-tertiary;
 }

app/helpers/wiki_helper.rb

@@ -104,4 +104,13 @@ module WikiHelper
       raise NotImplementedError, "Unknown wiki container type #{wiki.container.class.name}"
     end
   end
+
+  def wiki_page_tracking_context(page)
+    {
+      'wiki-format'               => page.format,
+      'wiki-title-size'           => page.title.bytesize,
+      'wiki-content-size'         => page.raw_content.bytesize,
+      'wiki-directory-nest-level' => page.path.scan('/').count
+    }
+  end
 end

app/views/shared/wikis/show.html.haml

@@ -26,7 +26,7 @@
     = (s_("WikiHistoricalPage|You can view the %{most_recent_link} or browse the %{history_link}.") % { most_recent_link: most_recent_link, history_link: history_link }).html_safe
 
 .gl-mt-3.gl-mb-3
-  .md{ data: { qa_selector: 'wiki_page_content' } }
+  .js-wiki-page-content.md{ data: { qa_selector: 'wiki_page_content', tracking_context: wiki_page_tracking_context(@page).to_json } }
     = render_wiki_content(@page)
 
 = render 'shared/wikis/sidebar'

changelogs/unreleased/216199-track-wiki-page-views.yml

+---
+title: Track wiki page views in Snowplow
+merge_request: 35784
+author:
+type: changed

spec/frontend/wikis_spec.js

+import { escape } from 'lodash';
 import Wikis from '~/pages/shared/wikis/wikis';
+import Tracking from '~/tracking';
 import { setHTMLFixture } from './helpers/fixtures';
 
 describe('Wikis', () => {
@@ -122,4 +124,32 @@ describe('Wikis', () => {
       });
     });
   });
+
+  describe('trackPageView', () => {
+    const trackingPage = 'projects:wikis:show';
+    const trackingContext = { foo: 'bar' };
+    const showPageHtmlFixture = `
+      <div class="js-wiki-page-content" data-tracking-context="${escape(
+        JSON.stringify(trackingContext),
+      )}"></div>
+    `;
+
+    beforeEach(() => {
+      setHTMLFixture(showPageHtmlFixture);
+      document.body.dataset.page = trackingPage;
+      jest.spyOn(Tracking, 'event').mockImplementation();
+
+      Wikis.trackPageView();
+    });
+
+    it('sends the tracking event and context', () => {
+      expect(Tracking.event).toHaveBeenCalledWith(trackingPage, 'view_wiki_page', {
+        label: 'view_wiki_page',
+        context: {
+          schema: 'iglu:com.gitlab/wiki_page_context/jsonschema/1-0-0',
+          data: trackingContext,
+        },
+      });
+    });
+  });
 });

spec/helpers/wiki_helper_spec.rb

@@ -72,4 +72,24 @@ RSpec.describe WikiHelper do
       expect(helper.wiki_sort_title('unknown')).to eq('Title')
     end
   end
+
+  describe '#wiki_page_tracking_context' do
+    let_it_be(:page) { create(:wiki_page, title: 'path/to/page 💩', content: '💩', format: :markdown) }
+
+    subject { helper.wiki_page_tracking_context(page) }
+
+    it 'returns the tracking context' do
+      expect(subject).to eq(
+        'wiki-format'               => :markdown,
+        'wiki-title-size'           => 9,
+        'wiki-content-size'         => 4,
+        'wiki-directory-nest-level' => 2
+      )
+    end
+
+    it 'returns a nest level of zero for toplevel files' do
+      expect(page).to receive(:path).and_return('page')
+      expect(subject).to include('wiki-directory-nest-level' => 0)
+    end
+  end
 end