Integrate Product Analytics with Internal Events for FE on Gitlab.com

What does this MR do and why?

Previous MR !130168 (merged)

This MR adds custom event tracking to Browser SDK.

How to set up and validate locally

1. Enable feature flag browsersdk_tracking

rails c
Feature.enable(:browsersdk_tracking)

This feature will only be supported for Gitlab.com, so make sure you make Gitlab.com? method to true in lib/gitlab.rb and restart gdk.

  def self.com?
    true
  end

2. Clone https://gitlab.com/gitlab-org/snowplow-micro-configuration
3. Update iglu.json file with below patch

diff --git a/config/iglu.json b/config/iglu.json
index b262c9f..2a78ce8 100644
--- a/config/iglu.json
+++ b/config/iglu.json
@@ -7,9 +7,7 @@
       {
         "name": "Iglu Central",
         "priority": 0,
-        "vendorPrefixes": [
-          "com.snowplowanalytics"
-        ],
+        "vendorPrefixes": ["com.snowplowanalytics"],
         "connection": {
           "http": {
             "uri": "http://iglucentral.com"
@@ -19,7 +17,7 @@
       {
         "name": "Iglu Central - GCP Mirror",
         "priority": 1,
-        "vendorPrefixes": [ "com.snowplowanalytics" ],
+        "vendorPrefixes": ["com.snowplowanalytics"],
         "connection": {
           "http": {
             "uri": "http://mirror01.iglucentral.com"
@@ -27,14 +25,12 @@
         }
       },
       {
-        "name": "Iglu Gitlab",
+        "name": "Iglu Gitlab Product Analytics",
         "priority": 0,
-        "vendorPrefixes": [
-          "com.gitlab"
-        ],
+        "vendorPrefixes": ["com.gitlab"],
         "connection": {
           "http": {
-            "uri": "https://gitlab-org.gitlab.io/iglu"
+            "uri": "https://gitlab-org.gitlab.io/analytics-section/product-analytics/iglu"
           }
         }
       }

2. Run snowplow-micro.sh, It enables snowplow-micro on 9090 port.
3. Update env variables inside gdk director and run gdk restart

export GITLAB_ANALYTICS_URL=http://localhost:9090
export GITLAB_ANALYTICS_ID=123

3. Open app/assets/javascripts/super_sidebar/components/brand_logo.vue and make below changes

diff --git a/app/assets/javascripts/super_sidebar/components/brand_logo.vue b/app/assets/javascripts/super_sidebar/components/brand_logo.vue
index 2e6c597ea961..148c17023ea4 100644
--- a/app/assets/javascripts/super_sidebar/components/brand_logo.vue
+++ b/app/assets/javascripts/super_sidebar/components/brand_logo.vue
@@ -29,9 +29,7 @@ export default {
     v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.homepage"
     class="brand-logo"
     :href="rootPath"
-    data-track-action="click_link"
-    data-track-label="gitlab_logo_link"
-    data-track-property="nav_core_menu"
+    data-event-tracking="user_viewed_dashboard_list"
   >
     <span class="gl-sr-only">{{ $options.i18n.homepage }}</span>
     <!-- eslint-disable @gitlab/vue-require-i18n-attribute-strings -->

4. Open any page and click on the GitLab logo. There should be another call to GITLAB_ANALYTICS_URL along with snowplow and track_event

MR acceptance checklist

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

• I have evaluated the MR acceptance checklist for this MR.

Related to #415557 (closed)