Track search events in Google Analytics

3 files changed, 29 insertions, 7 deletions

diff --git a/content/frontend/search/components/google_results.vue b/content/frontend/search/components/google_results.vue
index 36b7097a..72cd01e8 100644
--- a/content/frontend/search/components/google_results.vue
+++ b/content/frontend/search/components/google_results.vue
@@ -127,6 +127,7 @@ export default {
           <li v-for="result in results" :key="result.cacheId" class="gl-mb-5!">
             <gl-link
               v-safe-html="result.formattedTitle"
+              data-result-type="page"
               :href="`${result.relativeLink}`"
               class="gl-font-lg gl-border-bottom-0! gl-hover-text-decoration-underline:hover gl-mb-2"
             />
diff --git a/content/frontend/search/components/google_search_form.vue b/content/frontend/search/components/google_search_form.vue
index 02baa922..0558f2c3 100644
--- a/content/frontend/search/components/google_search_form.vue
+++ b/content/frontend/search/components/google_search_form.vue
@@ -147,6 +147,7 @@ export default {
         <li v-for="(result, index) in results" :key="result.cacheId" class="gl-list-style-none">
           <gl-link
             v-safe-html="result.formattedTitle"
+            data-result-type="dropdown"
             :href="result.relativeLink"
             :data-link-index="index"
             class="gl-text-gray-700 gl-py-3 gl-px-2 gl-display-block gl-text-left"
diff --git a/content/frontend/search/components/search_filters.vue b/content/frontend/search/components/search_filters.vue
index 8be13382..5fd8ad67 100644
--- a/content/frontend/search/components/search_filters.vue
+++ b/content/frontend/search/components/search_filters.vue
@@ -1,10 +1,11 @@
 <script>
-import { GlFormCheckboxGroup } from '@gitlab/ui';
+import { GlFormCheckboxGroup, GlFormCheckbox } from '@gitlab/ui';
 
 export default {
   name: 'SearchFilters',
   components: {
     GlFormCheckboxGroup,
+    GlFormCheckbox,
   },
   data() {
     return {
@@ -40,6 +41,20 @@ export default {
       },
     ];
   },
+  methods: {
+    /**
+     * Send click events to Google Analytics.
+     */
+    trackFilterChange(option) {
+      window.dataLayer = window.dataLayer || [];
+      if (this.selected.includes(option.value)) {
+        window.dataLayer.push({
+          event: 'docs_search_filter',
+          docs_search_filter_type: option.text.split(' ')[0].toLowerCase(),
+        });
+      }
+    },
+  },
 };
 </script>
 
@@ -47,12 +62,17 @@ export default {
   <div>
     <div v-for="filter in filters" :key="filter.title">
       <h2 class="gl-font-lg! gl-mt-0! gl-mb-3!">{{ filter.title }}</h2>
-      <gl-form-checkbox-group
-        v-model="selected"
-        :label="filter.title"
-        :options="filter.options"
-        @input="$emit('filteredSearch', selected)"
-      />
+      <gl-form-checkbox-group v-model="selected" :label="filter.title">
+        <gl-form-checkbox
+          v-for="option in filter.options"
+          :key="option.value"
+          :value="option.value"
+          @input="$emit('filteredSearch', selected)"
+          @change="trackFilterChange(option)"
+        >
+          {{ option.text }}
+        </gl-form-checkbox>
+      </gl-form-checkbox-group>
     </div>
   </div>
 </template>