Description
Context
@edx/frontend-platform
provides an analytics service interface and a Segment implementation for tracking events (custom events, page events, identify events). The Segment implementation relies on helper functions from Segment.js, including:
global.analytics.track
(viasendTrackEvent
)global.analytics.page
(viasendPageEvent
)global.analytics.identify
(viaidentifyAuthenticatedUser
)
@edx/frontend-platform
also exports a sendTrackingLogEvent
function to send events to the tracking log, which includes event that are sent to our partners as part of our data share agreements (e.g., for their research purposes). These events are sent via a POST
request to the configured trackingLogApiUrl
(i.e., ${config.LMS_BASE_URL}/event
)
Problem
We occasionally run into use cases where we need to dispatch an event when a user clicks on a native HTML hyperlink that triggers a full page refresh. However, using sendTrackEvent
and/or sendTrackingLogEvent
in this situation is not possible because the browser navigates away from the current page without giving the asynchronous event enough time to fire.
Segment provides a trackLink
method that is not currently utilized by @edx/frontend-platform
. However, its implementation relies on event listeners on a DOM element (i.e., hyperlink), which isn't compatible in a React world with frequent component re-rendering. For example, on component mount, an event listener might get set, but then on a component re-render, the underlying DOM element with the aforementioned event listener got re-rendered so its effectively a new DOM element that would need an event listener added again. Similarly, when a component unmounts, there's no way to clear the event listener with trackLink
which leads to potentially unwanted behavior.
As such, for tracking events of native HTML hyperlinks that trigger a full page refresh, consumers have had to implement their own workarounds, e.g.:
- Preventing default link behavior (i.e.,
event.preventDefault()
), dispatching the event, and then awaiting aPromise
to resolve after an intentional delay before forcing navigation withglobal.location.href
. - Preventing default link behavior (i.e.,
event.preventDefault()
) dispatching the event, then waiting for asetTimeout
to execute after an intentional delay before forcing navigation withglobal.location.href
.
Acceptance Criteria
- Ensure consumers of
@edx/frontend-platform
can import/use a helper function to track events asynchronously when clicking on a native HTML hyperlink that triggers a full page refresh.
Metadata
Metadata
Assignees
Type
Projects
Status