Improve Tracking.mixin
The current implementation of the Tracking.mixin()
function could use some more logic / reevaluation, the code is short so:
// app/assets/javascripts/tracking.js
static mixin(opts) {
return {
data() {
return {
tracking: {
// eslint-disable-next-line no-underscore-dangle
category: this.$options.name || this.$options._componentTag,
},
};
},
methods: {
track(action, data) {
const category = opts.category || data.category || this.tracking.category;
Tracking.event(category || 'unspecified', action, { ...opts, ...this.tracking, ...data });
},
},
};
}
Problems
- if
opts
is undefinedtrack
fails - if
data
intrack
in undefined track fails -
category: this.$options.name || this.$options._componentTag
the default of this goes against our tracking docs and can be confusing - tracking being set in the data function prevent us to build up tracking in the computed (for example when we want a label to be calculated from a computed value / prop / data value )
-
Tracking.event(category || 'unspecified')
this kills the default set in the event method (body.dataset.page
)
Proposal
- add
opts = {}
- add
data = {}
intrack
- remove data all together, and set
category: this.$options.name || this.$options._componentTag
as fallback value intrack
(for backwards compatibility) -
Tracking.event(category || 'unspecified'
becomesTracking.event(category || undefined
so falsy values use the default set in the event method
Since the mixin is used in a couple of places I thought that before venturing in an MR it would be better to have a discussion around it