Create a list of Snowplow events emitted from the frontend
Spreadsheet with data
https://docs.google.com/spreadsheets/d/1CwChRvItO64e7OmDnUqLgOXjt61MUDGJcRtICGLo7-Q/edit
- It has three tabs: "Vue", "HTML" (Vue + HAML), and "Raw JS".
- "Vue" tab has two additional columns, "uses data" (
TRUE
if there is atracking
Vue property) and "uses directive" (TRUE
if using the directive tracking wrapper); these two gives us insights about preferred usage. - "HTML" has an additional "HTML tag" column that holds the element that fires the event. This is important because this method dispatches the event on
click
,show.bs.dropdown
orhide.bs.dropdown
. With dropdowns, it fires the event when opening and closing, adding_show
or_hide
to the action string correspondingly. If the HTMLElement has a value property, it's used as thevalue
for the event. - Fields that use variables are wrapped into square brackets (
[variableName]
). - Fields that have an optional value are prefixed with a ? (
?[mightBeEmpty]
) - Fields that have values separated by pipes are ENUM-like fields (
on | off | n/a
)
Conclusions
- All tracking calls are pointing to the Tracking class.
- Usage is not wrong, but there are cases with some invalid
trackStructEvent
properties. - Events fired using Raw JS takes more liberties. The second place would be the Vue directive. Events fired using data-attributes and mixins seem to respect the taxonomy more.
- A good topic for gitlab-com/www-gitlab-com#10480 (closed) would be "How to fix invalid event payloads", and some of the questions to answer might be (we should clarify this to the docs as well):
- What is the naming convention for
action
? - Is
category
a namespace? - Is
label
the name ofproperty
? - Is
property
the name ofvalue
? - What can
value
hold?
- What is the naming convention for
Methods used for tracking
Edited by Axel García