[questions][chore] add google analytics events (#513)

apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Button, TextArea } from '@tih/ui';
 
+import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
 import AnswerCommentListItem from '~/components/questions/AnswerCommentListItem';
 import FullAnswerCard from '~/components/questions/card/FullAnswerCard';
 import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
@@ -24,6 +25,7 @@ export type AnswerCommentData = {
 
 export default function QuestionPage() {
   const router = useRouter();
+  const { event } = useGoogleAnalytics();
 
   const [commentSortOrder, setCommentSortOrder] = useState<SortOrder>(
     SortOrder.DESC,
@@ -79,6 +81,11 @@ export default function QuestionPage() {
             sortType: SortType.NEW,
           },
         ]);
+        event({
+          action: 'questions.comment',
+          category: 'engagement',
+          label: 'comment on answer',
+        });
       },
     },
   );

apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Button, Collapsible, HorizontalDivider, TextArea } from '@tih/ui';
 
+import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
 import AnswerCommentListItem from '~/components/questions/AnswerCommentListItem';
 import FullQuestionCard from '~/components/questions/card/question/FullQuestionCard';
 import QuestionAnswerCard from '~/components/questions/card/QuestionAnswerCard';
@@ -31,6 +32,7 @@ export type QuestionCommentData = {
 
 export default function QuestionPage() {
   const router = useRouter();
+  const { event } = useGoogleAnalytics();
 
   const [answerSortOrder, setAnswerSortOrder] = useState<SortOrder>(
     SortOrder.DESC,
@@ -108,6 +110,11 @@ export default function QuestionPage() {
         utils.invalidateQueries(
           'questions.questions.comments.getQuestionComments',
         );
+        event({
+          action: 'questions.comment',
+          category: 'engagement',
+          label: 'comment on question',
+        });
       },
     },
   );
@@ -135,6 +142,11 @@ export default function QuestionPage() {
     {
       onSuccess: () => {
         utils.invalidateQueries('questions.answers.getAnswers');
+        event({
+          action: 'questions.answer',
+          category: 'engagement',
+          label: 'add answer to question',
+        });
       },
     },
   );
@@ -147,6 +159,11 @@ export default function QuestionPage() {
           'questions.questions.encounters.getAggregatedEncounters',
         );
         utils.invalidateQueries('questions.questions.getQuestionById');
+        event({
+          action: 'questions.create_question',
+          category: 'engagement',
+          label: 'create question encounter',
+        });
       },
     },
   );

apps/portal/src/pages/questions/browse.tsx

@@ -9,6 +9,7 @@ import type { TypeaheadOption } from '@tih/ui';
 import { useToast } from '@tih/ui';
 import { Button, SlideOut } from '@tih/ui';
 
+import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
 import QuestionOverviewCard from '~/components/questions/card/question/QuestionOverviewCard';
 import ContributeQuestionCard from '~/components/questions/ContributeQuestionCard';
 import FilterSection from '~/components/questions/filter/FilterSection';
@@ -63,6 +64,7 @@ function sortTypeToString(value: SortType): string | null {
 
 export default function QuestionsBrowsePage() {
   const router = useRouter();
+  const { event } = useGoogleAnalytics();
 
   const [query, setQuery] = useState('');
 
@@ -219,8 +221,12 @@ export default function QuestionsBrowsePage() {
     {
       onSuccess: () => {
         utils.invalidateQueries('questions.questions.getQuestionsByFilter');
+        event({
+          action: 'questions.create_question',
+          category: 'engagement',
+          label: 'create_question',
+        });
         showToast({
-          // Duration: 10000 (optional)
           title: `Thank you for submitting your question!`,
           variant: 'success',
         });

apps/portal/src/pages/questions/index.tsx

@@ -1,6 +1,7 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 
+import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
 import type { LandingQueryData } from '~/components/questions/LandingComponent';
 import LandingComponent from '~/components/questions/LandingComponent';
 
@@ -8,6 +9,7 @@ import { APP_TITLE } from '~/utils/questions/constants';
 
 export default function QuestionsHomePage() {
   const router = useRouter();
+  const { event } = useGoogleAnalytics();
 
   const handleLandingQuery = async (data: LandingQueryData) => {
     if (data === null) {
@@ -29,6 +31,11 @@ export default function QuestionsHomePage() {
         questionTypes: [questionType],
       },
     });
+    event({
+      action: 'questions.landing',
+      category: 'engagement',
+      label: 'navigate to browse',
+    });
   };
 
   return (

apps/portal/src/utils/questions/mutations.ts

@@ -1,6 +1,9 @@
+import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
+
 import { trpc } from '../trpc';
 
 export function useAddQuestionToListAsync() {
+  const { event } = useGoogleAnalytics();
   const utils = trpc.useContext();
   const { mutateAsync: addQuestionToListAsync } = trpc.useMutation(
     'questions.lists.createQuestionEntry',
@@ -8,6 +11,11 @@ export function useAddQuestionToListAsync() {
       // TODO: Add optimistic update
       onSuccess: () => {
         utils.invalidateQueries(['questions.lists.getListsByUser']);
+        event({
+          action: 'questions.lists',
+          category: 'engagement',
+          label: 'add question to list',
+        });
       },
     },
   );
@@ -31,6 +39,7 @@ export function useRemoveQuestionFromListAsync() {
 }
 
 export function useCreateListAsync() {
+  const { event } = useGoogleAnalytics();
   const utils = trpc.useContext();
   const { mutateAsync: createListAsync } = trpc.useMutation(
     'questions.lists.create',
@@ -38,6 +47,11 @@ export function useCreateListAsync() {
       onSuccess: () => {
         // TODO: Add optimistic update
         utils.invalidateQueries(['questions.lists.getListsByUser']);
+        event({
+          action: 'questions.lists',
+          category: 'engagement',
+          label: 'create list',
+        });
       },
     },
   );