Support tracking events on standard hyperlinks

[adamstankiewicz]

trafficstars

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.

[arbrandes]

(Allow me the parenthesis: @adamstankiewicz, your issue descriptions are the best in the universe. If we created a Github workflow to feed them to GPT-3, we'd be able to set the resulting PRs to auto-merge. Congrats, and thanks!)

[arbrandes]

@bmtcril, tagging you for awareness that this exists.