From 537539aa82acda2346e1deffd2793ae42ebad644 Mon Sep 17 00:00:00 2001 From: Jeff Sieu Date: Thu, 3 Nov 2022 15:06:21 +0800 Subject: [PATCH] [questions][chore] add google analytics id --- .../components/questions/AddToListDropdown.tsx | 13 +++++++++++-- .../answer/[answerId]/[answerSlug]/index.tsx | 7 +++++++ .../[questionId]/[questionSlug]/index.tsx | 17 +++++++++++++++++ apps/portal/src/pages/questions/browse.tsx | 7 +++++++ apps/portal/src/pages/questions/index.tsx | 7 +++++++ apps/portal/src/pages/questions/lists.tsx | 14 +++++++++++--- 6 files changed, 60 insertions(+), 5 deletions(-) diff --git a/apps/portal/src/components/questions/AddToListDropdown.tsx b/apps/portal/src/components/questions/AddToListDropdown.tsx index 4ae9da46..86aa72d2 100644 --- a/apps/portal/src/components/questions/AddToListDropdown.tsx +++ b/apps/portal/src/components/questions/AddToListDropdown.tsx @@ -5,6 +5,8 @@ import { Fragment, useRef, useState } from 'react'; import { Menu, Transition } from '@headlessui/react'; import { CheckIcon, HeartIcon } from '@heroicons/react/20/solid'; +import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics'; + import { useProtectedCallback } from '~/utils/questions/useProtectedCallback'; import { trpc } from '~/utils/trpc'; @@ -15,6 +17,8 @@ export type AddToListDropdownProps = { export default function AddToListDropdown({ questionId, }: AddToListDropdownProps) { + const { event } = useGoogleAnalytics(); + const [menuOpened, setMenuOpened] = useState(false); const ref = useRef(null); @@ -36,6 +40,11 @@ export default function AddToListDropdown({ // TODO: Add optimistic update onSuccess: () => { utils.invalidateQueries(['questions.lists.getListsByUser']); + event({ + action: 'questions.lists', + category: 'engagement', + label: 'add question to list', + }); }, }, ); @@ -54,8 +63,8 @@ export default function AddToListDropdown({ document.addEventListener('click', handleClickOutside, true); }; - const handleClickOutside = (event: MouseEvent) => { - if (ref.current && !ref.current.contains(event.target as Node)) { + const handleClickOutside = (e: MouseEvent) => { + if (ref.current && !ref.current.contains(e.target as Node)) { setMenuOpened(false); document.removeEventListener('click', handleClickOutside, true); } 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 73fd6065..8553d55d 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 @@ -5,6 +5,7 @@ import { useForm } from 'react-hook-form'; import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline'; 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 c383a550..53f01f4e 100644 --- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx +++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx @@ -5,6 +5,7 @@ import { useForm } from 'react-hook-form'; import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline'; 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 83f25834..f7640888 100644 --- a/apps/portal/src/pages/questions/browse.tsx +++ b/apps/portal/src/pages/questions/browse.tsx @@ -8,6 +8,7 @@ import type { QuestionsQuestionType } from '@prisma/client'; import type { TypeaheadOption } 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'; @@ -36,6 +37,7 @@ import { SortOrder } from '~/types/questions.d'; export default function QuestionsBrowsePage() { const router = useRouter(); + const { event } = useGoogleAnalytics(); const [query, setQuery] = useState(''); @@ -205,6 +207,11 @@ export default function QuestionsBrowsePage() { { onSuccess: () => { utils.invalidateQueries('questions.questions.getQuestionsByFilter'); + event({ + action: 'questions.create_question', + category: 'engagement', + label: 'create_question', + }); }, }, ); diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx index 37999946..4884a555 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) => { const { companySlug, location, questionType } = data; @@ -21,6 +23,11 @@ export default function QuestionsHomePage() { questionTypes: [questionType], }, }); + event({ + action: 'questions.landing', + category: 'engagement', + label: 'navigate to browse', + }); }; return ( diff --git a/apps/portal/src/pages/questions/lists.tsx b/apps/portal/src/pages/questions/lists.tsx index 9323499c..25bd6598 100644 --- a/apps/portal/src/pages/questions/lists.tsx +++ b/apps/portal/src/pages/questions/lists.tsx @@ -7,6 +7,7 @@ import { PlusIcon, } from '@heroicons/react/24/outline'; +import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics'; import QuestionListCard from '~/components/questions/card/question/QuestionListCard'; import type { CreateListFormData } from '~/components/questions/CreateListDialog'; import CreateListDialog from '~/components/questions/CreateListDialog'; @@ -20,6 +21,8 @@ import { useProtectedCallback } from '~/utils/questions/useProtectedCallback'; import { trpc } from '~/utils/trpc'; export default function ListPage() { + const { event } = useGoogleAnalytics(); + const utils = trpc.useContext(); const { data: lists } = trpc.useQuery(['questions.lists.getListsByUser']); const { mutateAsync: createList } = trpc.useMutation( @@ -28,6 +31,11 @@ export default function ListPage() { onSuccess: () => { // TODO: Add optimistic update utils.invalidateQueries(['questions.lists.getListsByUser']); + event({ + action: 'questions.lists', + category: 'engagement', + label: 'create list', + }); }, }, ); @@ -162,9 +170,9 @@ export default function ListPage() { label="Create" size="md" variant="tertiary" - onClick={(event) => { - event.preventDefault(); - event.stopPropagation(); + onClick={(e) => { + e.preventDefault(); + e.stopPropagation(); handleAddClick(); }} />