From 903d8d4cfb7dacc06309c71c6cb5197296cedd9f Mon Sep 17 00:00:00 2001 From: Thomas Tracy Date: Wed, 14 Jul 2021 14:02:53 -0400 Subject: [PATCH] [feat] MB-1299 Add tracking to cert alert buttons (#541) * [feat] Add tracking to cert alert buttons --- .../outline-tab/OutlineTab.test.jsx | 132 ++++++++++++++++++ .../CertificateStatusAlert.jsx | 24 +++- .../alerts/certificate-status-alert/hooks.js | 2 + 3 files changed, 157 insertions(+), 1 deletion(-) diff --git a/src/course-home/outline-tab/OutlineTab.test.jsx b/src/course-home/outline-tab/OutlineTab.test.jsx index 5ea7a373..164322fc 100644 --- a/src/course-home/outline-tab/OutlineTab.test.jsx +++ b/src/course-home/outline-tab/OutlineTab.test.jsx @@ -693,6 +693,138 @@ describe('Outline Tab', () => { await fetchAndRender(); expect(screen.queryByText('Verify your identity to earn a certificate!')).toBeInTheDocument(); }); + it('tracks request cert button', async () => { + sendTrackEvent.mockClear(); + const now = new Date(); + const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1); + const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1); + setMetadata({ is_enrolled: true }); + setTabData({ + cert_data: { + cert_status: CERT_STATUS_TYPE.REQUESTING, + cert_web_view_url: null, + download_url: null, + }, + }, { + date_blocks: [ + { + date_type: 'course-end-date', + date: yesterday.toISOString(), + title: 'End', + }, + { + date_type: 'certificate-available-date', + date: tomorrow.toISOString(), + title: 'Cert Available', + }, + { + date_type: 'verification-deadline-date', + date: tomorrow.toISOString(), + link_text: 'Verify', + title: 'Verification Upgrade Deadline', + }, + ], + }); + await fetchAndRender(); + sendTrackEvent.mockClear(); + const requestingButton = screen.getByRole('button', { name: 'Request certificate' }); + fireEvent.click(requestingButton); + expect(sendTrackEvent).toHaveBeenCalledTimes(1); + expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.course_outline.certificate_alert_request_cert_button.clicked', + { + courserun_key: 'course-v1:edX+Test+run', + is_staff: false, + org_key: 'edX', + }); + }); + it('tracks download cert button', async () => { + sendTrackEvent.mockClear(); + const now = new Date(); + const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1); + const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1); + setMetadata({ is_enrolled: true }); + setTabData({ + cert_data: { + cert_status: CERT_STATUS_TYPE.DOWNLOADABLE, + cert_web_view_url: null, + download_url: null, + }, + }, { + date_blocks: [ + { + date_type: 'course-end-date', + date: yesterday.toISOString(), + title: 'End', + }, + { + date_type: 'certificate-available-date', + date: tomorrow.toISOString(), + title: 'Cert Available', + }, + { + date_type: 'verification-deadline-date', + date: tomorrow.toISOString(), + link_text: 'Verify', + title: 'Verification Upgrade Deadline', + }, + ], + }); + await fetchAndRender(); + sendTrackEvent.mockClear(); + const requestingButton = screen.getByRole('button', { name: 'View my certificate' }); + fireEvent.click(requestingButton); + expect(sendTrackEvent).toHaveBeenCalledTimes(1); + expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.course_outline.certificate_alert_downloadable_button.clicked', + { + courserun_key: 'course-v1:edX+Test+run', + is_staff: false, + org_key: 'edX', + }); + }); + it('tracks unverified cert button', async () => { + sendTrackEvent.mockClear(); + const now = new Date(); + const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1); + const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1); + setMetadata({ is_enrolled: true }); + setTabData({ + cert_data: { + cert_status: CERT_STATUS_TYPE.UNVERIFIED, + cert_web_view_url: null, + download_url: null, + }, + }, { + date_blocks: [ + { + date_type: 'course-end-date', + date: yesterday.toISOString(), + title: 'End', + }, + { + date_type: 'certificate-available-date', + date: tomorrow.toISOString(), + title: 'Cert Available', + }, + { + date_type: 'verification-deadline-date', + date: tomorrow.toISOString(), + link_text: 'Verify', + title: 'Verification Upgrade Deadline', + }, + ], + }); + await fetchAndRender(); + sendTrackEvent.mockClear(); + const requestingButton = screen.getByRole('link', { name: 'Verify my ID' }); + fireEvent.click(requestingButton); + expect(sendTrackEvent).toHaveBeenCalledTimes(1); + expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.course_outline.certificate_alert_unverified_button.clicked', + { + courserun_key: 'course-v1:edX+Test+run', + is_staff: false, + org_key: 'edX', + }); + }); }); describe('Scheduled Content Alert', () => { diff --git a/src/course-home/outline-tab/alerts/certificate-status-alert/CertificateStatusAlert.jsx b/src/course-home/outline-tab/alerts/certificate-status-alert/CertificateStatusAlert.jsx index 7e9c069b..eebd98e7 100644 --- a/src/course-home/outline-tab/alerts/certificate-status-alert/CertificateStatusAlert.jsx +++ b/src/course-home/outline-tab/alerts/certificate-status-alert/CertificateStatusAlert.jsx @@ -12,6 +12,8 @@ import { useDispatch } from 'react-redux'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCheckCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'; import { getConfig } from '@edx/frontend-platform'; +import { sendTrackEvent } from '@edx/frontend-platform/analytics'; +import { getAuthenticatedUser } from '@edx/frontend-platform/auth'; import certMessages from './messages'; import certStatusMessages from '../../../progress-tab/certificate-status/messages'; import { requestCert } from '../../../data/thunks'; @@ -33,11 +35,21 @@ function CertificateStatusAlert({ intl, payload }) { certURL, isWebCert, userTimezone, + org, } = payload; // eslint-disable-next-line react/prop-types const AlertWrapper = (props) => props.children(props); + const sendAlertClickTracking = (id) => { + const { administrator } = getAuthenticatedUser(); + sendTrackEvent(id, { + org_key: org, + courserun_key: courseId, + is_staff: administrator, + }); + }; + const renderCertAwardedStatus = () => { const alertProps = { variant: 'success', @@ -72,12 +84,18 @@ function CertificateStatusAlert({ intl, payload }) { } alertProps.buttonVisible = true; alertProps.buttonLink = certURL; + alertProps.buttonAction = () => { + sendAlertClickTracking('edx.ui.lms.course_outline.certificate_alert_downloadable_button.clicked'); + }; } else if (certStatus === CERT_STATUS_TYPE.REQUESTING) { alertProps.header = intl.formatMessage(certMessages.certStatusDownloadableHeader); alertProps.buttonMessage = intl.formatMessage(certStatusMessages.requestableButton); alertProps.buttonVisible = true; alertProps.buttonLink = ''; - alertProps.buttonAction = () => { dispatch(requestCert(courseId)); }; + alertProps.buttonAction = () => { + sendAlertClickTracking('edx.ui.lms.course_outline.certificate_alert_request_cert_button.clicked'); + dispatch(requestCert(courseId)); + }; } return alertProps; }; @@ -92,6 +110,9 @@ function CertificateStatusAlert({ intl, payload }) { body: intl.formatMessage(certStatusMessages.unverifiedHomeBody), buttonVisible: true, buttonLink: getConfig().SUPPORT_URL_ID_VERIFICATION, + buttonAction: () => { + sendAlertClickTracking('edx.ui.lms.course_outline.certificate_alert_unverified_button.clicked'); + }, }; return alertProps; @@ -162,6 +183,7 @@ CertificateStatusAlert.propTypes = { certURL: PropTypes.string, isWebCert: PropTypes.bool, userTimezone: PropTypes.string, + org: PropTypes.string, }).isRequired, }; diff --git a/src/course-home/outline-tab/alerts/certificate-status-alert/hooks.js b/src/course-home/outline-tab/alerts/certificate-status-alert/hooks.js index 35ad4ad3..8a8e62d7 100644 --- a/src/course-home/outline-tab/alerts/certificate-status-alert/hooks.js +++ b/src/course-home/outline-tab/alerts/certificate-status-alert/hooks.js @@ -23,6 +23,7 @@ function verifyCertStatusType(status) { function useCertificateStatusAlert(courseId) { const { isEnrolled, + org, } = useModel('courseHomeMeta', courseId); const { @@ -61,6 +62,7 @@ function useCertificateStatusAlert(courseId) { courseEndDate: endBlock && endBlock.date, userTimezone, isWebCert, + org, }; useAlert(isVisible, {