Snowplow tracking in Vue components
Description
We use Snowplow for event tracking. We selectively apply listeners to events in order to manage page performance and ensure we're tracking only what we need.
For this purpose a generic tracking function trackEvent
in stats.js
(EE only) can be used.
For HAML templates with vanilla JS (and/or jQuery), event tracking is implemented via data-*
attributes. Event handlers live in EE specific files and are bound to DOM elements having a data-track-label
attribute among other things.
See https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/7403 for implementation details.
In addition, we also need to add event tracking in Vue components (for example clicking the search input in the frequent_items_search_input.vue
as requested in https://gitlab.com/gitlab-org/gitlab-ee/issues/7427).
This issue should be an open discussion with the goal proposing different approaches of how to add tracking to Vue components. We might not be able to agree on one ultimate approach which can be applied to all scenarios. Ideally, we can come up with best practices for different use cases.
Proposals
There are a few ways of doing this, for example:
- Adding
data-*
attributes to the element which serves as the root container for the Vue component.- We would need to modify every Vue component we'd like to add tracking to.
- Since the root element gets replaced by the Vue component, we would need to re-add the
data-*
attributes to the Vue component again in order to make the component trackable (re-adding these attributes could be done with a mixin). - Having nested Vue components (like the
frequent_items
component), this would most likely require us to pass thedata-*
attributes multiple levels down to the target sub-component. - Hard (if even possible) to pack this into EE specific code
- Overall, not an ideal solution at all
- Attaching an event handler in the EE specific JS to each component (resp. the DOM element) created by Vue individually. Then we could simply call
trackEvent
with the necessary data from within the event handler.- This solution wouldn't require us to add
data-*
attributes to the root container and re-add them again.
- This solution wouldn't require us to add