Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SP1] 리쿠르팅, 후원페이지 amplitude tracking code 심기 #199

Merged
merged 3 commits into from
Sep 28, 2023
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { track } from '@amplitude/analytics-browser';
import Link from 'next/link';
import { ReactComponent as ArrowLeft } from '@src/assets/icons/arrow_left_28x28.svg';
import { ReactComponent as ArrowRight } from '@src/assets/icons/arrow_right_28x28.svg';
Expand Down Expand Up @@ -44,15 +45,24 @@ export function ActivityReview() {
</ArrowWrapper>
<Content ref={scrollableRef}>
{reviews.data.map((review) => (
<Link key={review.id} href={review.link}>
<Link
key={review.id}
href={review.link}
onClick={() => track('click_recruit_review_detail')}
>
<CardWrapper role="presentation">
<CardTitle>{review.title}</CardTitle>
<DescWrapper>
<Desc>
{parsePartToKorean(review.part)}파트 {review.semester}기{'\n'}
<DescName>{review.reviewer}</DescName>
</Desc>
<Arrow src={arrowRightWhite} alt={`${review.title} 활동후기 더보기 버튼`} width={30} height={30} />
<Arrow
src={arrowRightWhite}
alt={`${review.title} 활동후기 더보기 버튼`}
width={30}
height={30}
/>
</DescWrapper>
</CardWrapper>
</Link>
Expand All @@ -62,7 +72,7 @@ export function ActivityReview() {
<ArrowRight stroke={isRightScrollable ? 'white' : 'grey'} />
</ArrowWrapper>
</ContentWrapper>
<Link href="/review">
<Link href="/review" onClick={() => track('click_recruit_review_more')}>
<MoreLinkWrapper>활동후기 더보기</MoreLinkWrapper>
</Link>
</ContainerWrapper>
Expand Down
7 changes: 6 additions & 1 deletion src/views/RecruitPage/components/ChapterInfo/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,12 @@ const ChapterInfo = () => {
<SectionTitleTranslate>Positions</SectionTitleTranslate>
<SectionTitle>{'SOPT는 33기는 총 6개의 파트로\n이루어져 있어요.'}</SectionTitle>
</SectionTitleWrapper>
<TabBar type="without-all" onTabClick={setSelectedTab} selectedTab={selectedTab} />
<TabBar
type="without-all"
onTabClick={setSelectedTab}
selectedTab={selectedTab}
amplitudeTrackingName={'click_recruit_description_part'}
/>
<Flex dir="column" gap="15px">
<BlueChip>{parsePartToKorean(selectedTab)} 파트가 배우는 것</BlueChip>
<InfoWrapper>{infoMap[selectedTab].info}</InfoWrapper>
Expand Down
7 changes: 6 additions & 1 deletion src/views/RecruitPage/components/FAQ/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,12 @@ const FaqInfo = () => {
<SectionTitle>자주 묻는 질문</SectionTitle>
</SectionTitleWrapper>
</Wrapper>
<TabBar type="with-all" onTabClick={setSelectedTab} selectedTab={selectedTab} />
<TabBar
type="with-all"
onTabClick={setSelectedTab}
selectedTab={selectedTab}
amplitudeTrackingName={'click_recruit_faq_part'}
/>
<FaqWrapper>
{faqMap[selectedTab].map((info, index) => (
<div key={index} onClick={() => toggleBox(index)}>
Expand Down
14 changes: 12 additions & 2 deletions src/views/RecruitPage/components/NotificationSection/index.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { track } from '@amplitude/analytics-browser';
import styled from '@emotion/styled';
import { useRef, useState } from 'react';
import axios from 'axios';
Expand Down Expand Up @@ -42,8 +43,17 @@ const NotificationSection = () => {
onRegister();
}}
>
<Input type="email" placeholder="메일을 입력해주세요" ref={emailInputRef} />
<SubmitButton type="submit" value="알림 신청하기" />
<Input
type="email"
placeholder="메일을 입력해주세요"
ref={emailInputRef}
onClick={() => track('click_recruit_notification_input')}
/>
<SubmitButton
type="submit"
value="알림 신청하기"
onClick={() => track('click_recruit_notification_apply')}
/>
</FormWrapper>
<ConfirmText visible={isRegistered}>신청 완료되었습니다!</ConfirmText>
</Wrapper>
Expand Down
21 changes: 17 additions & 4 deletions src/views/RecruitPage/components/common/Tabs/index.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { track } from '@amplitude/analytics-browser';
import { ExtraPart, ExtraTabType, Part, PartExtraType, TabType } from '@src/lib/types/universal';
import * as S from './style';

Expand All @@ -6,8 +7,14 @@ type TabBarProps =
type: 'with-all';
selectedTab: ExtraPart;
onTabClick(targetTab: ExtraPart): void;
amplitudeTrackingName: string;
}
| { type: 'without-all'; selectedTab: Part; onTabClick(targetTab: Part): void };
| {
type: 'without-all';
selectedTab: Part;
onTabClick(targetTab: Part): void;
amplitudeTrackingName: string;
};

const allTabs: ExtraTabType[] = [
{
Expand Down Expand Up @@ -67,14 +74,17 @@ const tabs: TabType[] = [
},
];

const TabBar = ({ type, onTabClick, selectedTab }: TabBarProps) => {
const TabBar = ({ type, onTabClick, selectedTab, amplitudeTrackingName }: TabBarProps) => {
if (type === 'with-all')
return (
<S.TabBar>
{allTabs.map((tab) => (
<Tab
key={tab.value}
onClick={() => onTabClick(tab.value)}
onClick={() => {
onTabClick(tab.value);
track(amplitudeTrackingName, { part: tab.value });
}}
tab={tab}
selected={selectedTab === tab.value}
/>
Expand All @@ -86,7 +96,10 @@ const TabBar = ({ type, onTabClick, selectedTab }: TabBarProps) => {
{tabs.map((tab) => (
<Tab
key={tab.value}
onClick={() => onTabClick(tab.value)}
onClick={() => {
onTabClick(tab.value);
track(amplitudeTrackingName, { part: tab.value });
}}
tab={tab}
selected={selectedTab === tab.value}
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { track } from '@amplitude/analytics-browser';
import { JobField } from '@src/lib/types/job';
import { fieldTabs } from '..';
import { St } from './style';
Expand All @@ -11,7 +12,14 @@ const FieldTabs = ({ currentTabType, changeTab }: FieldTabsProps) => {
return (
<St.Ul>
{fieldTabs.map(({ type, text }) => (
<St.Li key={type} onClick={() => changeTab(type)} isactive={type === currentTabType}>
<St.Li
key={type}
onClick={() => {
changeTab(type);
track('click_sponsor_recruit_part', { part: type });
}}
isactive={type === currentTabType}
>
{text}
</St.Li>
))}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { track } from '@amplitude/analytics-browser';
import { useQuery } from 'react-query';
import JobPostingCard from '@src/components/corporate/JobPostingCard';
import { api } from '@src/lib/api';
Expand All @@ -15,7 +16,13 @@ const JobPostings = ({ field }: JopPostingsProps) => {
<St.Root>
<St.JobPostingsContainer>
{data?.map(({ id, url, imgSrc, type, title, corporation, career, location }) => (
<a key={id} href={url} target="_blank" rel="noreferrer">
<a
key={id}
href={url}
target="_blank"
rel="noreferrer"
onClick={() => track('click_sponsor_recruit')}
>
<JobPostingCard
imgSrc={imgSrc}
type={type}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { track } from '@amplitude/analytics-browser';
import Image from 'next/image';
import { ReactComponent as ArrowLeft } from '@src/assets/icons/arrow_left_28x28.svg';
import { ReactComponent as ArrowRight } from '@src/assets/icons/arrow_right_28x28.svg';
Expand All @@ -23,7 +24,10 @@ const CorporateLinkedActivities = () => {
<div className={styles.contentWrapper}>
<div
className={styles.arrowWrapper}
onClick={() => onClickLeftButton(scrollableRef.current)}
onClick={() => {
onClickLeftButton(scrollableRef.current);
track('click_sponsor_activity_next');
}}
>
<ArrowLeft stroke={isLeftScrollable ? 'white' : 'grey'} />
</div>
Expand All @@ -44,7 +48,10 @@ const CorporateLinkedActivities = () => {
</div>
<div
className={styles.arrowWrapper}
onClick={() => onClickRightButton(scrollableRef.current)}
onClick={() => {
onClickRightButton(scrollableRef.current);
track('click_sponsor_activity_next');
}}
>
<ArrowRight stroke={isRightScrollable ? 'white' : 'grey'} />
</div>
Expand Down
11 changes: 9 additions & 2 deletions src/views/SponsorPage/components/CorporatePartner/index.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { track } from '@amplitude/analytics-browser';
import Image from 'next/image';
import { ReactComponent as ArrowLeft } from '@src/assets/icons/arrow_left_28x28.svg';
import { ReactComponent as ArrowRight } from '@src/assets/icons/arrow_right_28x28.svg';
Expand All @@ -20,7 +21,10 @@ const CoporatePartner = () => {
<div className={styles.contentWrapper}>
<div
className={styles.arrowWrapper}
onClick={() => onClickLeftButton(scrollableRef.current)}
onClick={() => {
onClickLeftButton(scrollableRef.current);
track('cclick_sponsor_logo_next');
}}
>
<ArrowLeft stroke={isLeftScrollable ? 'white' : 'grey'} />
</div>
Expand All @@ -43,7 +47,10 @@ const CoporatePartner = () => {
</div>
<div
className={styles.arrowWrapper}
onClick={() => onClickRightButton(scrollableRef.current)}
onClick={() => {
onClickRightButton(scrollableRef.current);
track('cclick_sponsor_logo_next');
}}
>
<ArrowRight stroke={isRightScrollable ? 'white' : 'grey'} />
</div>
Expand Down
Loading