From e840b3bf08253522a75b74645e384b2531017e66 Mon Sep 17 00:00:00 2001 From: Jeff Sieu Date: Sun, 6 Nov 2022 16:40:53 +0800 Subject: [PATCH] [questions][chore] add google analytics events (#513) --- .../answer/[answerId]/[answerSlug]/index.tsx | 7 +++++++ .../[questionId]/[questionSlug]/index.tsx | 17 +++++++++++++++++ apps/portal/src/pages/questions/browse.tsx | 8 +++++++- apps/portal/src/pages/questions/index.tsx | 7 +++++++ apps/portal/src/utils/questions/mutations.ts | 14 ++++++++++++++ 5 files changed, 52 insertions(+), 1 deletion(-) diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx index a03accdd..1fa4d2e0 100644 --- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx +++ b/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.DESC, @@ -79,6 +81,11 @@ export default function QuestionPage() { sortType: SortType.NEW, }, ]); + event({ + action: 'questions.comment', + category: 'engagement', + label: 'comment on answer', + }); }, }, ); diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx index 4ec48702..c4db487d 100644 --- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx +++ b/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.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', + }); }, }, ); diff --git a/apps/portal/src/pages/questions/browse.tsx b/apps/portal/src/pages/questions/browse.tsx index e1f70355..7a89ab34 100644 --- a/apps/portal/src/pages/questions/browse.tsx +++ b/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', }); diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx index ed56328d..6f784b71 100644 --- a/apps/portal/src/pages/questions/index.tsx +++ b/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 ( diff --git a/apps/portal/src/utils/questions/mutations.ts b/apps/portal/src/utils/questions/mutations.ts index 7fd1baf6..7538e6bc 100644 --- a/apps/portal/src/utils/questions/mutations.ts +++ b/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', + }); }, }, );