feat: 12/08 배포 건에 대한 앰플리튜드 신규 이벤트 대응 (#603)

* feat: ampli pull 이후 location property 추가 * feat: 새로운 이벤트 추가
sopt-makers · Dec 6, 2023 · 9ad4fe5 · 9ad4fe5
1 parent 0588a3e
commit 9ad4fe5
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 8 deletions.
diff --git a/pages/list/index.tsx b/pages/list/index.tsx
@@ -31,7 +31,7 @@ const Home: NextPage = () => {
       handleModalOpen();
       return;
     }
-    ampli.clickMakeGroup();
+    ampli.clickMakeGroup({ location: router.pathname });
     router.push('/make');
   };
 

diff --git a/src/ampli/index.ts b/src/ampli/index.ts
@@ -206,12 +206,31 @@ export interface ClickFeedCardProperties {
    * | Type | integer |
    */
   group_id?: number;
+  /**
+   * 모임 서비스 내 액션들의 /path location을 의미합니다.
+   */
+  location?: string;
   /**
    * 어떤 플랫폼으로 접속했는지를 의미합니다.
    */
   platform_type?: string;
 }
 
+export interface ClickFeedCardGroupLabelProperties {
+  /**
+   * 모임의 id값을 의미합니다.
+   *
+   * | Rule | Value |
+   * |---|---|
+   * | Type | integer |
+   */
+  group_id?: number;
+  /**
+   * 모임 서비스 내 액션들의 /path location을 의미합니다.
+   */
+  location?: string;
+}
+
 export interface ClickFeeddatailImageProperties {
   /**
    * 모임의 소속 구성원 여부를 의미합니다.
@@ -238,6 +257,10 @@ export interface ClickFeedlistLikeProperties {
    * 모임의 소속 구성원 여부를 의미합니다.
    */
   crew_status?: boolean;
+  /**
+   * 모임 서비스 내 액션들의 /path location을 의미합니다.
+   */
+  location?: string;
 }
 
 export interface ClickFeedPostingProperties {
@@ -249,6 +272,10 @@ export interface ClickFeedPostingProperties {
    * | Type | integer |
    */
   group_id?: number;
+  /**
+   * 모임 서비스 내 액션들의 /path location을 의미합니다.
+   */
+  location?: string;
   /**
    * 플레이그라운드 DB 기반 유저의 고유한 ID를 의미합니다.
    *
@@ -264,6 +291,10 @@ export interface ClickFeedProfileProperties {
    * 모임의 소속 구성원 여부를 의미합니다.
    */
   crew_status?: boolean;
+  /**
+   * 모임 서비스 내 액션들의 /path location을 의미합니다.
+   */
+  location?: string;
 }
 
 export interface ClickFilterCategoryProperties {
@@ -356,6 +387,10 @@ export interface ClickMakebymeGroupProperties {
 }
 
 export interface ClickMakeGroupProperties {
+  /**
+   * 모임 서비스 내 액션들의 /path location을 의미합니다.
+   */
+  location?: string;
   /**
    * | Rule | Value |
    * |---|---|
@@ -537,6 +572,10 @@ export interface CompletedFeedPostingProperties {
    * 모임 피드를 업로드 완료한 시간을 의미합니다.
    */
   feed_upload?: any;
+  /**
+   * 모임 서비스 내 액션들의 /path location을 의미합니다.
+   */
+  location?: string;
   /**
    * 어떤 플랫폼으로 접속했는지를 의미합니다.
    */
@@ -552,6 +591,10 @@ export interface CompletedFeedPostingProperties {
 }
 
 export interface CompletedFeedPostingCanceledProperties {
+  /**
+   * 모임 서비스 내 액션들의 /path location을 의미합니다.
+   */
+  location?: string;
   /**
    * 어떤 플랫폼으로 접속했는지를 의미합니다.
    */
@@ -648,6 +691,10 @@ export class ClickCommentLike implements BaseEvent {
   }
 }
 
+export class ClickFeedAction implements BaseEvent {
+  event_type = 'Click-feedAction';
+}
+
 export class ClickFeedCard implements BaseEvent {
   event_type = 'Click-feedCard';
 
@@ -658,6 +705,16 @@ export class ClickFeedCard implements BaseEvent {
   }
 }
 
+export class ClickFeedCardGroupLabel implements BaseEvent {
+  event_type = 'Click-feedCardGroupLabel';
+
+  constructor(
+    public event_properties?: ClickFeedCardGroupLabelProperties,
+  ) {
+    this.event_properties = event_properties;
+  }
+}
+
 export class ClickFeeddatailImage implements BaseEvent {
   event_type = 'Click-feeddatailImage';
 
@@ -1170,6 +1227,21 @@ export class Ampli {
     return this.track(new ClickCommentLike(properties), options);
   }
 
+  /**
+   * Click-feedAction
+   *
+   * [View in Tracking Plan](https://data.amplitude.com/sopt-makers/sopt-makers-crew/events/main/latest/Click-feedAction)
+   *
+   * 피드 뷰에서 플로팅 CTA를 클릭한 경우
+   *
+   * @param options Amplitude event options.
+   */
+  clickFeedAction(
+    options?: EventOptions,
+  ) {
+    return this.track(new ClickFeedAction(), options);
+  }
+
   /**
    * Click-feedCard
    *
@@ -1187,6 +1259,23 @@ export class Ampli {
     return this.track(new ClickFeedCard(properties), options);
   }
 
+  /**
+   * Click-feedCardGroupLabel
+   *
+   * [View in Tracking Plan](https://data.amplitude.com/sopt-makers/sopt-makers-crew/events/main/latest/Click-feedCardGroupLabel)
+   *
+   * Event has no description in tracking plan.
+   *
+   * @param properties The event's properties (e.g. group_id)
+   * @param options Amplitude event options.
+   */
+  clickFeedCardGroupLabel(
+    properties?: ClickFeedCardGroupLabelProperties,
+    options?: EventOptions,
+  ) {
+    return this.track(new ClickFeedCardGroupLabel(properties), options);
+  }
+
   /**
    * Click-feeddatailImage
    *
@@ -1415,7 +1504,7 @@ export class Ampli {
    *
    * \[+모임 개설하기\] 버튼 클릭
    *
-   * @param properties The event's properties (e.g. url)
+   * @param properties The event's properties (e.g. location)
    * @param options Amplitude event options.
    */
   clickMakeGroup(
@@ -1702,7 +1791,7 @@ export class Ampli {
    *
    * 피드 작성 중 이탈한 경우
    *
-   * @param properties The event's properties (e.g. platform_type)
+   * @param properties The event's properties (e.g. location)
    * @param options Amplitude event options.
    */
   completedFeedPostingCanceled(

diff --git a/src/components/feed/Modal/FeedCreateModal.tsx b/src/components/feed/Modal/FeedCreateModal.tsx
@@ -15,6 +15,7 @@ import { THUMBNAIL_IMAGE_INDEX } from '@constants/index';
 import { ampli } from '@/ampli';
 import { useQueryMyProfile } from '@api/user/hooks';
 import { formatDate } from '@utils/dayjs';
+import { useRouter } from 'next/router';
 
 const DevTool = dynamic(() => import('@hookform/devtools').then(module => module.DevTool), {
   ssr: false,
@@ -26,6 +27,7 @@ interface CreateModalProps extends ModalContainerProps {
 
 function FeedCreateModal({ isModalOpened, meetingId, handleModalClose }: CreateModalProps) {
   const queryClient = useQueryClient();
+  const router = useRouter();
   const { data: detailData } = useQueryGetMeeting({ params: { id: meetingId } });
   const { data: me } = useQueryMyProfile();
   const exitModal = useModal();
@@ -63,7 +65,12 @@ function FeedCreateModal({ isModalOpened, meetingId, handleModalClose }: CreateM
   const onSubmit = async () => {
     const createFeedParameter = { ...formMethods.getValues(), meetingId: Number(meetingId) };
     await mutateCreateFeed(createFeedParameter);
-    ampli.completedFeedPosting({ user_id: Number(me?.orgId), platform_type: platform, feed_upload: formatDate() });
+    ampli.completedFeedPosting({
+      user_id: Number(me?.orgId),
+      platform_type: platform,
+      feed_upload: formatDate(),
+      location: router.pathname,
+    });
   };
 
   useEffect(() => {
@@ -72,7 +79,11 @@ function FeedCreateModal({ isModalOpened, meetingId, handleModalClose }: CreateM
 
   useEffect(() => {
     return () => {
-      ampli.completedFeedPostingCanceled({ user_id: Number(me?.orgId), platform_type: platform });
+      ampli.completedFeedPostingCanceled({
+        user_id: Number(me?.orgId),
+        platform_type: platform,
+        location: router.pathname,
+      });
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

diff --git a/src/components/page/meetingDetail/Feed/FeedItem/index.tsx b/src/components/page/meetingDetail/Feed/FeedItem/index.tsx
@@ -55,7 +55,7 @@ const FeedItem = ({ post, HeaderSection }: FeedItemProps) => {
   const handleLikeClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     mutate();
-    ampli.clickFeedlistLike({ crew_status: meeting?.approved });
+    ampli.clickFeedlistLike({ crew_status: meeting?.approved, location: router.pathname });
   };
   return (
     <SFeedItem
@@ -70,6 +70,7 @@ const FeedItem = ({ post, HeaderSection }: FeedItemProps) => {
           group_id: Number(meetingId),
           crew_status: meeting?.approved,
           platform_type: isMobile ? 'MO' : 'PC',
+          location: router.pathname,
         })
       }
     >
@@ -79,7 +80,7 @@ const FeedItem = ({ post, HeaderSection }: FeedItemProps) => {
           <SProfileButton
             onClick={e => {
               e.preventDefault();
-              ampli.clickFeedProfile({ crew_status: meeting?.approved });
+              ampli.clickFeedProfile({ crew_status: meeting?.approved, location: router.pathname });
               window.location.href = `${playgroundLink.memberDetail(user.orgId)}`;
             }}
           >

diff --git a/src/components/page/meetingDetail/Feed/FeedPanel.tsx b/src/components/page/meetingDetail/Feed/FeedPanel.tsx
@@ -49,7 +49,7 @@ const FeedPanel = ({ isMember }: FeedPanelProps) => {
 
   const handleModalOpen = () => {
     if (me?.orgId) {
-      ampli.clickFeedPosting({ user_id: Number(me?.orgId), group_id: Number(meetingId) });
+      ampli.clickFeedPosting({ user_id: Number(me?.orgId), group_id: Number(meetingId), location: router.pathname });
     }
     feedCreateOverlay.open(({ isOpen, close }) => {
       return <FeedCreateModal meetingId={meetingId} isModalOpened={isOpen} handleModalClose={close} />;