Skip to content

GitLab Version - Properly track link clicks

Zack Cuddy requested to merge 369442-fix-badge-click-analytics into master

What does this MR do and why?

Follow up from !99301 (merged)
Closes #369442 (closed)

Currently the GitLab Version Check Badge uses the Actionable Badge component to link to the help documentation. We also had logic to track the link clicks in Snowplow.

However, as it turns out with GlBadge click events are never emitted up through the event chain. So essentially the logic was never called. The tests were passing since we explicitly $emit('click'). This is related to a BootstrapVue bug: https://github.com/bootstrap-vue/bootstrap-vue/issues/6219. Shout out to @eduardosanz for catching this!

To fix this we instead wrap the badge in a temporary span element that takes the click event and fires our tracking data before bubbling it to the link.

Additionally this change also swaps the data we track from the Badge variant to the Badge text when we call this.track

About Version Check Badge

The GitLab Version check badge is a badge that informs users of their instance's version status and the severity of an upgrade if they are behind versions. This badge exists in three places:

  1. Help Dropdown (? in top right of nav)
  2. Admin Dashboard (/admin)
  3. Help Page (/help)

Screenshots or screen recordings

Before After (No Change)
Help Dropdown Screen_Shot_2022-10-13_at_3.18.58_PM Screen_Shot_2022-10-17_at_11.13.51_AM
Help Page Screen_Shot_2022-10-13_at_3.19.12_PM Screen_Shot_2022-10-17_at_11.13.57_AM
Admin Page Screen_Shot_2022-10-13_at_3.18.31_PM Screen_Shot_2022-10-17_at_11.16.14_AM

How to set up and validate locally

Important I was unable to successfully setup snowplow on my GDK and am fully relying on the jest specs to validate that it works. This was the strategy provided by this Slack Thread (internal only).

Important

  1. Ensure Gitlab::CurrentSettings.version_check_enabled is set to true (it defaults to true)
  2. Version Check uses ReactiveCache so the first time you navigate to a place where the badge should be, it may not be in the cache and required a single reload.
  3. Please read note above in the first section about my issues with setting up snowplow locally.

Testing Instructions

  1. Repeat these steps for the following views
    • /help
    • /admin
    • Help Dropdown (? in top nav)
  2. Find the Version Check badge
    • /help => At top of page
    • /admin => In the components card
    • Help Dropdown => First list item
  3. Ensure that when the badge is rendered the correct tracking event is fired
  4. Ensure when clicking the badge/link the correct tracking event is fired

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #369442 (closed)

Edited by Zack Cuddy

Merge request reports