diff --git a/src/courseware/sequence/Sequence.jsx b/src/courseware/sequence/Sequence.jsx index 71bfcf5e..73f3ab46 100644 --- a/src/courseware/sequence/Sequence.jsx +++ b/src/courseware/sequence/Sequence.jsx @@ -3,6 +3,7 @@ import React, { useEffect, useContext, Suspense, useState, } from 'react'; import PropTypes from 'prop-types'; +import { sendTrackEvent } from '@edx/frontend-platform/analytics'; import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons'; @@ -54,6 +55,23 @@ function Sequence({ onNavigateUnit(unitId); }; + const logEvent = (eventName, widgetPlacement, targetUnitId) => { + // Note: tabs are tracked with a 1-indexed position + // as opposed to a 0-index used throughout this MFE + const currentIndex = unitIds.indexOf(activeUnitId); + const payload = { + current_tab: currentIndex + 1, + id: activeUnitId, + tab_count: unitIds.length, + widget_placement: widgetPlacement, + }; + if (targetUnitId) { + const targetIndex = unitIds.indexOf(targetUnitId); + payload.target_tab = targetIndex + 1; + } + sendTrackEvent(eventName, payload); + }; + const { add, remove } = useContext(UserMessagesContext); useEffect(() => { let id = null; @@ -85,9 +103,18 @@ function Sequence({ <> { + logEvent('edx.ui.lms.sequence.next_selected', 'top'); + handleNext(); + }} + onNavigate={(unitId) => { + logEvent('edx.ui.lms.sequence.tab_selected', 'top', unitId); + handleNavigate(unitId); + }} + onPrevious={() => { + logEvent('edx.ui.lms.sequence.previous_selected', 'top'); + handlePrevious(); + }} unitIds={unitIds} activeUnitId={activeUnitId} isLocked={isGated} @@ -122,7 +149,10 @@ function Sequence({