This task encompasses the work to implement the instrumentation requirements identified in T249366. The initial requirements suggest that only the top-most search component needs instrumentation.
== Acceptance criteria
[] T250282 requirements are implemented.
[] Any long term plans are tasked.
[] Any recommendations are documented [[ https://www.mediawiki.org/wiki/Vue.js | on wiki ]].
== Options (not necessarily exclusive)
1. Add `data-event-name` attributes to each component primitive and let the WikimediaEvents document onClickListener extract any data it needs. This is the approach used by the sidebar in T250282.
2. Like 1, emit data logging events for each component and the consumer can use them or not. This would allow our schemas to be more standardized but may not have all the custom data clients want. It may also add some bloat to the library.
3. Add top-level search form instrumentation. We can ensure that whatever lifecycles (e.g., `mounted`) and methods (e.g., `getQuery()`) are needed are exposed. The logging could live in WVUI or Vector as wanted.
4. Something else.
1. Vuex was also discussed as a robust solution for more complex scenarios but is out of scope for search.
2. Logging directives, plugins, or mixins could be used to specify a logger where wanted.
== References
- https://matteo-gabriele.gitbook.io/vue-gtag/
- https://github.com/segmentio/analytics-vue
- https://github.com/MatteoGabriele/vue-analytics