Skip to content

Support tracking events on standard hyperlinks #415

Open
@adamstankiewicz

Description

@adamstankiewicz

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementRelates to new features or improvements to existing features

    Type

    No type

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions