Support tracking events on standard hyperlinks

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 (via sendTrackEvent)
• global.analytics.page (via sendPageEvent)
• global.analytics.identify (via identifyAuthenticatedUser)

@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 a Promise to resolve after an intentional delay before forcing navigation with global.location.href.
• Preventing default link behavior (i.e., event.preventDefault()) dispatching the event, then waiting for a setTimeout to execute after an intentional delay before forcing navigation with global.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.

Start by locating the Segment implementation and the existing sendTrackEvent and sendTrackingLogEvent entry points. Review how analytics helpers are exported and how link clicks are handled in consumers. Done means consumers can import and use a helper for native hyperlinks that sends the event before a full-page refresh.