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:

1. 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 the data-* 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
2. 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.