feat: 追蹤看更多 experience 的數據 (#1449)

Co-authored-by: Yen-chi Chen <[email protected]>

src/components/CompanyAndJobTitle/InterviewExperiences/ExperienceEntry.js

@@ -31,8 +31,9 @@ const ExperienceEntry = ({
   },
   size,
   canView,
+  onClick,
 }) => (
-  <div className={cn(styles.container, styles[size])}>
+  <div className={cn(styles.container, styles[size])} onClick={onClick}>
     <Link to={createLinkTo({ id, pageType })}>
       <section className={styles.contentWrapper}>
         <div className={styles.labels}>
@@ -110,12 +111,14 @@ ExperienceEntry.propTypes = {
       }),
     ).isRequired,
   }).isRequired,
+  onClick: PropTypes.func,
   pageType: PropTypes.string,
   size: PropTypes.oneOf(['s', 'm', 'l']),
 };
 
 ExperienceEntry.defaultProps = {
   size: 'm',
+  onClick: null,
 };
 
 export default ExperienceEntry;

src/components/CompanyAndJobTitle/WorkExperiences/ExperienceEntry.js

@@ -36,8 +36,9 @@ const ExperienceEntry = ({
   },
   size,
   canView,
+  onClick,
 }) => (
-  <div className={cn(styles.container, styles[size])}>
+  <div className={cn(styles.container, styles[size])} onClick={onClick}>
     <Link to={createLinkTo({ id, pageType })}>
       <section className={styles.contentWrapper}>
         <div className={styles.labels}>
@@ -136,12 +137,14 @@ ExperienceEntry.propTypes = {
     ).isRequired,
     week_work_time: PropTypes.number,
   }).isRequired,
+  onClick: PropTypes.func,
   pageType: PropTypes.string.isRequired,
   size: PropTypes.oneOf(['s', 'm', 'l']),
 };
 
 ExperienceEntry.defaultProps = {
   size: 'm',
+  onClick: null,
 };
 
 export default ExperienceEntry;

src/components/ExperienceDetail/MoreExperiencesBlock/index.js

@@ -4,13 +4,15 @@ import PropTypes from 'prop-types';
 import InterviewExperienceEntry from '../../CompanyAndJobTitle/InterviewExperiences/ExperienceEntry';
 import WorkExperienceEntry from '../../CompanyAndJobTitle/WorkExperiences/ExperienceEntry';
 import { useLocation } from 'react-router';
+import ReactGA from 'react-ga4';
 import usePermission from 'hooks/usePermission';
 import {
   queryRelatedExperiencesOnExperience,
   loadMoreRelatedExperiences,
 } from 'actions/experience';
 import { relatedExperiencesStateSelector } from 'selectors/experienceSelector';
 import { pageType as PAGE_TYPE } from 'constants/companyJobTitle';
+import { GA_CATEGORY, GA_ACTION } from 'constants/gaConstants';
 import Button from 'common/button/Button';
 import styles from './MoreExperiencesBlock.module.css';
 
@@ -84,6 +86,12 @@ const MoreExperiencesBlock = ({ experience }) => {
           pageType={pageType}
           data={e}
           canView={canViewPublishId(e.id)}
+          onClick={() => {
+            ReactGA.event({
+              category: GA_CATEGORY.READ_MORE,
+              action: GA_ACTION.CLICK_READ_MORE_EXPERIENCE,
+            });
+          }}
         />
       ))}
       {hasMore && <LoadMoreButton onClick={handleLoadMore} />}

src/constants/gaConstants.js

@@ -16,6 +16,7 @@ export const GA_CATEGORY = {
   TEST_NEW_FEATURE: 'test_new_feature',
   JOB_TITLE_PAGE: 'job_title_page',
   COMPANY_PAGE: 'company_page',
+  READ_MORE: 'read_more',
 };
 
 export const GA_ACTION = {
@@ -35,4 +36,5 @@ export const GA_ACTION = {
   CLICK_PRIVATE_MESSAGE_BUTTON: 'click_private_message_button',
   SEARCH_COMPANY: 'search_company',
   SEARCH_JOB_TITLE: 'search_job_title',
+  CLICK_READ_MORE_EXPERIENCE: 'click_read_more_experience',
 };