Spike: Draft technical plan to migrate Snowplow events dispatch method to be definitions-powered
Background
After completing #346751 (closed), we need to determine how to organize and proceed with the migration.
Goals
- Draft a detailed list of steps to update the method for each type of Snowplow event.
Conclusion
Some of the events are missing an event definition. A minimal one can be created by providing the event taxonomy without the ownership-related data: product_section
, product_stage
, product_group
, product_category
, milestone
. This would allow us to create new event definitions without a bottleneck.
For backend events
Requirements: none.
By far the easiest one:
- Replace the ´event´ method with
definition
. - Replace the two required parameters (
category
,action
) with a single definitionbasename
parameter. And it would use the strings defined in the event definition. - If either the
category
and/oraction
are variable, we can provide them via named parameters.
- Gitlab::Tracking.event(self.class.to_s, name, namespace: tracking_namespace_source, user: current_user)
+ Gitlab::Tracking.definition(definition_basename, category: self.class.to_s, namespace: tracking_namespace_source, user: current_user)
For frontend events
Data attributes
- Add a
data-track-definition
parameter with the definitionbasename
. - Replace the
data-track-category
and/ordata-track-action
attributes, as it would use the strings defined in the event definition. - If either the
-category
and/or-action
attribute are variable, we can provide them as well.
- - data_attributes = { 'track-action': 'click_buy_ci_minutes', 'track-label': root_namespace.actual_plan_name, 'track-property': 'user_dropdown' }
+ - data_attributes = { 'track-definition': '20210915205040_default_generic', 'track-label': root_namespace.actual_plan_name, 'track-property': 'user_dropdown' }
Vue events
- Load the definitions to be used by listing them as a property of the Vue component. So they can be preloaded.
- Replace the
this.track
method withthis.trackDefinition
. - Provide the data as usual.
@@ -34,6 +34,7 @@ export default {
recoveryCodeDownloadFilename: RECOVERY_CODE_DOWNLOAD_FILENAME,
i18n,
mousetrap: null,
+ definitions: ['20210915205040_default_generic'],
components: { GlSprintf, GlButton, GlAlert, ClipboardButton, GlCard },
mixins: [Tracking.mixin()],
props: {
@@ -79,7 +80,7 @@ export default {
window.print();
}
- this.track('click_button', { label: `${this.$options.trackingLabelPrefix}${action}_button` });
+ this.track('20210915205040_default_generic', { label: `${this.$options.trackingLabelPrefix}${action}_button` });
},
handleKeyboardCopy() {
if (!window.getSelection) {
Raw Javascript
- Load the definitions to be used by listing them using the
Tracking.loadDefinitions
method. As soon as we can. - Replace the
Tracking.event
method withTracking.definition
. - Replace the two required parameters (
category
,action
) with a single definitionbasename
parameter. - Provide the data as usual.
@@ -72,6 +72,7 @@ function setSearchOptions() {
export class SearchAutocomplete {
constructor({ wrap, optsEl, autocompletePath, projectId, projectRef } = {}) {
+ Tracking.loadDefinitions(['20210915205040_default_generic']);
setSearchOptions();
this.bindEventContext();
this.wrap = wrap || $('.search');
@@ -367,10 +368,7 @@ export class SearchAutocomplete {
this.loadingSuggestions = false;
this.dropdownToggle.dropdown('toggle');
- const trackEvent = 'click_search_bar';
- const trackCategory = undefined; // will be default set in event method
-
- Tracking.event(trackCategory, trackEvent, {
+ Tracking.defintion('20210915205040_default_generic', {
label: 'main_navigation',
property: 'navigation',
});
Edited by Axel García