Send namespace and project ids to Product Analytics in FE

What does this MR do and why?

With Internal Events we're sending events to Product Analytics. On the backend we include namespace_id and project_id as part of the properties of the event, on the frontend we currently don't.

This MR adds project_id and namespace_id to BrowserSDK in the frontend.

Similar Backend changes - https://gitlab.com/gitlab-org/gitlab/-/blob/master/lib/gitlab/internal_events.rb?ref_type=heads#L184

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

How to set up and validate locally

With Product Analytics devkit

Prerequisite

• Docker

Steps

1. Clone the repo

git clone git@gitlab.com:gitlab-org/analytics-section/product-analytics/devkit.git

2. cd devkit && docker compose up -d
3. curl -X POST http://localhost:4567/setup-project/gitlab_project_10 -u test:test
4. This should give you appId.

ankit@MacBook-Pro devkit % curl -X POST http://localhost:4567/setup-project/gitlab_project_10 -u test:test
{"app_id":"994245dc-0254-4f02-83a7-3a7e9334163b","project_id":"gitlab_project_10"}%  

Without devkit - To test this feature we need separate snowplow micro instance running and enable it on gdk. Below the steps for the same.

1. Clone https://gitlab.com/gitlab-org/snowplow-micro-configuration
2. 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"
           }
         }
       }

3. Run snowplow-micro.sh, It enables snowplow-micro on 9090 port.

Common steps

1. 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. Update env variables inside gdk director and run gdk restart

export GITLAB_ANALYTICS_URL=http://localhost:9090
export GITLAB_ANALYTICS_ID=<APP_ID received from devkit or random appId>

3. gdk restart
4. apply below patch in the gitlab codebase.

diff --git a/app/assets/javascripts/tracking/index.js b/app/assets/javascripts/tracking/index.js
index 2ee4703aa0b55..1549b4c7f8a76 100644
--- a/app/assets/javascripts/tracking/index.js
+++ b/app/assets/javascripts/tracking/index.js
@@ -73,4 +73,9 @@ export function initDefaultTrackers() {
   InternalEvents.bindInternalEventDocument();
   InternalEvents.trackInternalLoadEvents();
   InternalEvents.initBrowserSDK();
+  InternalEvents.trackEvent('i_analytics_dev_ops_score', {
+    label: 'label',
+    value: 10,
+    property: 'property',
+  });
 }

5. Now if you visit any page then you will see CORS error on http://localhost:9090/com.snowplowanalytics.snowplow/tp2
6. This is due to custom header x-gitlab-app-id introduced in gitlab-org/analytics-section/product-analytics/gl-application-sdk-browser!51 (merged)
7. We have added proxy server in the production for it. Just to verify in local just downgrade the browser sdk with below command

yarn add @gitlab/application-sdk-browser@0.2.9

8. Install snowplow-debugger to visualize events.
9. Visit any page and check in snowplow-debugger tab.
10. Under self-describing event it should be showing data.

11. Verify that project_id and namespace_id is being passed in custom_event schema.
12. We can also verify inside clickhouse if data is present. (devkit is required).
13. Open http://localhost:8123/play?user=test&password=test
14. Run below query and verify that project_id and namespace_id is present in custom_context.

select unstruct_event from gitlab_project_10.snowplow_events;

Related to #463025 (closed)