Quick start for internal event tracking
In an effort to provide a more efficient, scalable, and unified tracking API, GitLab is deprecating existing RedisHLL and Snowplow tracking. Instead, we’re implementing a new track_event
method.
With this approach, we can both update RedisHLL counters and send Snowplow events simultaneously, streamlining the tracking process.
Create and trigger events
Backend tracking
To trigger an event, call the Gitlab::InternalEvents.track_event
method with the desired arguments:
Gitlab::InternalEvents.track_event(
"i_code_review_user_apply_suggestion",
user_id: user_id,
namespace_id: namespace_id,
project_id: project_id
)
This method automatically increments all RedisHLL metrics relating to the event i_code_review_user_apply_suggestion
, and sends a corresponding Snowplow event with all named arguments and standard context (SaaS only).
Frontend tracking
Vue components
In Vue components, tracking can be done with Vue mixin.
To implement Vue component tracking:
-
Import the
InternalEvents
library and call themixin
method:import { InternalEvents } from '~/tracking'; const trackingMixin = InternalEvents.mixin();
-
Use the mixin in the component:
export default { mixins: [trackingMixin], data() { return { expanded: false, }; }, };
-
Call the
track_event
method. Tracking options can be passed as the second parameter:this.track_event('i_code_review_user_apply_suggestion');
Or use the
track_event
method in the template:<template> <div> <button data-testid="toggle" @click="toggle">Toggle</button> <div v-if="expanded"> <p>Hello world!</p> <button @click="track_event('i_code_review_user_apply_suggestion')">Track another event</button> </div> </div> </template>
Raw JavaScript
For tracking events directly from arbitrary frontend JavaScript code, a module for raw JavaScript is provided. This can be used outside of a component context where the Mixin cannot be utilized.
import { InternalEvents } from '~/tracking';
InternalEvents.track_event('i_code_review_user_apply_suggestion');
Data-track attribute
This attribute ensures that if we want to track GitLab internal events for a button, we do not need to write JavaScript code on Click handler. Instead, we can just add a data-event-tracking attribute with event value and it should work. This can also be used with haml views.
<gl-button
data-event-tracking="i_analytics_dev_ops_adoption"
>
Click Me
</gl-button>
For Haml
= render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle', data: { event_tracking: 'action' }}) do
Internal events on render
Sometimes we want to send internal events when the component is rendered or loaded. In these cases, we can add the data-event-tracking-load="true"
attribute:
= render Pajamas::ButtonComponent.new(button_options: { data: { event_tracking_load: 'true', event_tracking: 'i_devops' } }) do
= _("New project")