Add initial google event tracking for active query items

Author: codytodonnell

web/src/use/useGtag.ts

@@ -0,0 +1,12 @@
+import { getCurrentInstance } from '@vue/composition-api';
+
+/**
+ * Custom hook to access Google Analytics gtag instance.
+ * returns $gtag instance if available, otherwise undefined.
+ * In development, this will return undefined.
+ */
+export default function useGtag() {
+  const instance = getCurrentInstance();
+  const gtag = instance?.proxy?.$gtag;
+  return gtag;
+}

web/src/views/Search/SearchSidebar.vue

@@ -18,6 +18,7 @@ import FacetedSearch, { SearchFacet } from '@/components/FacetedSearch.vue';
 import {
   stateRefs, removeConditions, setConditions, toggleConditions,
 } from '@/store';
+import useGtag from '@/use/useGtag';
 
 /**
  * Sidebar has a fixed list of facets, possibly from different tables.
@@ -144,6 +145,7 @@ export default defineComponent({
     const filterText = ref('');
     const textSearchResults = ref([] as Condition[]);
     const dbSummary = ref({} as DatabaseSummaryResponse);
+    const gtag = useGtag();
     const biosampleDescription = computed(() => {
       const { schemaName } = types.biosample;
       if (schemaName !== undefined) {
@@ -183,6 +185,30 @@ export default defineComponent({
     }
     watch(filterText, updateSearch);
 
+    function trackFilterConditions(val: Condition[], oldVal: Condition[]) {
+      if (!gtag) {
+        console.warn('Google Analytics is not available. This is expected in development mode.');
+        return;
+      }
+      // On initial load, track each filter condition that exists
+      // Otherwise, track the last filter condition added or updated
+      if (oldVal.length === 0 && val.length > 0) {
+        val.forEach((condition) => {
+          gtag.event('Add filter', {
+            event_label: condition.field,
+            value: condition.value,
+          });
+        });
+      } else if (val.length > oldVal.length || val.length === oldVal.length) {
+        gtag.event('Add filter', {
+          event_label: val[val.length - 1].field,
+          value: val[val.length - 1].value,
+        });
+      }
+    }
+
+    watch(stateRefs.conditions, trackFilterConditions);
+
     return {
       /* data */
       biosampleDescription,