feat: add click on quest (#1371)

jumperexchange · Oct 7, 2024 · 49aae9c · 49aae9c
1 parent 71a4ba6
commit 49aae9c
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 0 deletions.
diff --git a/src/components/Blog/CTAs/InstructionsAccordion/InstructionsAccordionItem.tsx b/src/components/Blog/CTAs/InstructionsAccordion/InstructionsAccordionItem.tsx
@@ -18,6 +18,12 @@ import {
   InstructionsAccordionLinkBox,
   InstructionsAccordionToggle,
 } from '.';
+import { useUserTracking } from 'src/hooks/userTracking';
+import {
+  TrackingAction,
+  TrackingCategory,
+  TrackingEventParameter,
+} from 'src/const/trackingKeys';
 
 interface InstructionsAccordionItemProps extends InstructionItemProps {
   index: number;
@@ -53,6 +59,7 @@ export const InstructionsAccordionItem = ({
 }: InstructionsAccordionItemProps) => {
   const [open, setOpen] = useState(false);
   const theme = useTheme();
+  const { trackEvent } = useUserTracking();
   const isTablet = useMediaQuery(theme.breakpoints.up('sm' as Breakpoint));
   const handleOpen:
     | MouseEventHandler<HTMLDivElement | HTMLButtonElement>
@@ -69,6 +76,20 @@ export const InstructionsAccordionItem = ({
     }
   }, []);
 
+  const handleClick = (i: number) => {
+    trackEvent({
+      category: TrackingCategory.Quests,
+      action: TrackingAction.ClickMissionCtaSteps,
+      label: `click-mission-cta-steps`,
+      data: {
+        [TrackingEventParameter.MissionCtaStepsTitle]: title || '',
+        [TrackingEventParameter.MissionCtaStepsLink]: buttonLinks?.[i] || '',
+        [TrackingEventParameter.MissionCtaStepsCTA]: buttonTitles?.[i] || '',
+        [TrackingEventParameter.MissionCtaStepsIndex]: index || -1,
+      },
+    });
+  };
+
   return (
     <InstructionsAccordionItemContainer
       sx={{
@@ -140,6 +161,7 @@ export const InstructionsAccordionItem = ({
                         target="_blank"
                         rel="noreferrer"
                         style={{ textDecoration: 'none', color: 'inherit' }}
+                        onClick={() => handleClick(i)}
                       >
                         <InstructionsAccordionLinkBox>
                           <Typography

diff --git a/src/components/ProfilePage/QuestCardDetailled/QuestCardDetailled.tsx b/src/components/ProfilePage/QuestCardDetailled/QuestCardDetailled.tsx
@@ -26,6 +26,12 @@ import {
   PROFILE_CAMPAIGN_FLASHY_APY_COLOR,
   PROFILE_CAMPAIGN_LIGHT_COLOR,
 } from 'src/const/partnerRewardsTheme';
+import { useUserTracking } from 'src/hooks/userTracking';
+import {
+  TrackingAction,
+  TrackingCategory,
+  TrackingEventParameter,
+} from 'src/const/trackingKeys';
 
 export interface RewardsInterface {
   logo: string;
@@ -50,6 +56,8 @@ interface QuestCardProps {
   claimingIds?: string[];
   variableWeeklyAPY?: boolean;
   rewardRange?: string;
+  label?: string;
+  id?: number;
 }
 
 export const QuestCardDetailled = ({
@@ -67,17 +75,34 @@ export const QuestCardDetailled = ({
   claimingIds,
   variableWeeklyAPY,
   rewardRange,
+  label,
+  id,
 }: QuestCardProps) => {
   const theme = useTheme();
   const { t } = useTranslation();
   const router = useRouter();
   const { apy, isLoading, isSuccess } = useMissionsMaxAPY(claimingIds);
+  const { trackEvent } = useUserTracking();
+
+  const handleClick = () => {
+    trackEvent({
+      category: TrackingCategory.Quests,
+      action: TrackingAction.ClickQuestCard,
+      label: 'click-quest-card',
+      data: {
+        [TrackingEventParameter.QuestCardTitle]: title || '',
+        [TrackingEventParameter.QuestCardLabel]: label || '',
+        [TrackingEventParameter.QuestCardId]: id || '',
+      },
+    });
+  };
 
   return (
     <QuestCardMainBox>
       <Link
         href={link || `/quests/${slug}`}
         style={{ textDecoration: 'inherit' }}
+        onClick={handleClick}
       >
         <Box sx={{ display: 'flex', flexDirection: 'row', height: '65%' }}>
           {image && (

diff --git a/src/components/ProfilePage/QuestCarousel/QuestCarousel.tsx b/src/components/ProfilePage/QuestCarousel/QuestCarousel.tsx
@@ -75,6 +75,8 @@ export const QuestCarousel = ({
                         quest?.attributes.Points > 0 && rewardType === 'weekly'
                       }
                       rewardRange={rewardRange}
+                      label={quest?.attributes?.Label}
+                      id={quest?.id}
                     />
                   );
                 })

diff --git a/src/const/trackingKeys.ts b/src/const/trackingKeys.ts
@@ -67,6 +67,7 @@ export enum TrackingAction {
   // Quests
   ClickQuestCard = 'action_click_quest_card',
   ClickMissionCta = 'action_click_mission_cta',
+  ClickMissionCtaSteps = 'action_click_mission_cta_steps',
 
   // Pagination
   ClickPagination = 'action_click_pagination',
@@ -201,4 +202,8 @@ export enum TrackingEventParameter {
   MissionCtaLabel = 'param_mission_cta_label',
   MissionCtaPartnerId = 'param_mission_cta_partner_id',
   MissionCtaCampaign = 'param_mission_cta_campaign',
+  MissionCtaStepsTitle = 'param_mission_cta_steps_title',
+  MissionCtaStepsLink = 'param_mission_cta_steps_link',
+  MissionCtaStepsCTA = 'param_mission_cta_steps_cta',
+  MissionCtaStepsIndex = 'param_mission_cta_steps_index',
 }