HumanSignal · mcanu · Jan 15, 2025 · Dec 26, 2024 · Dec 26, 2024 · Dec 27, 2024
diff --git a/label_studio/templates/base.html b/label_studio/templates/base.html
@@ -103,6 +103,7 @@
     feature_flags_default_value: {{ settings.FEATURE_FLAGS_DEFAULT_VALUE|json_dumps_ensure_ascii|safe }},
     server_id: {{ request.server_id|json_dumps_ensure_ascii|safe }},
     collect_analytics: {{ settings.COLLECT_ANALYTICS|yesno:"true,false" }},
+    frontend_events: {{ frontend_events|json_dumps_ensure_ascii|safe }},
 
     {% block app_more_settings %}
       flags: {

diff --git a/label_studio/templates/simple.html b/label_studio/templates/simple.html
@@ -1,5 +1,6 @@
 {% load static %}
 {% load i18n %}
+{% load filters %}
 
 <!doctype html>
 <html lang="en">

diff --git a/label_studio/users/templates/users/new-ui/user_base.html b/label_studio/users/templates/users/new-ui/user_base.html
@@ -18,6 +18,61 @@
 {% endblock %}
 
 {% block content %}
+<script nonce="{{request.csp_nonce}}">
+  window.APP_SETTINGS = window.APP_SETTINGS ?? {};
+  window.APP_SETTINGS.collect_analytics = {{ settings.COLLECT_ANALYTICS|yesno:"true,false" }};
+
+  // Log event to the server, if analytics are enabled
+  // This is a fallback for when the __lsa global is not defined
+  // Normally this is a part of our main bundle but these pages do not use the main bundle
+  // and this allows us to log events from these pages
+  const logEvent = (eventName, metadata = {}) => {
+    if (!window.APP_SETTINGS?.collect_analytics) return;
+
+    const payload = {
+      ...metadata,
+      event: eventName,
+      url: window.location.href,
+    };
+
+    window.requestIdleCallback(() => {
+      const params = new URLSearchParams({ __: JSON.stringify(payload) });
+      const url = `/__lsa/?${params}`;
+      try {
+        if (navigator.sendBeacon) {
+          navigator.sendBeacon(url);
+        } else {
+          const img = new Image();
+          img.src = url;
+        }
+      } catch {
+        // Ignore errors here
+      }
+    });
+  };
+  if (!window.__lsa) {
+    window.__lsa = logEvent;
+  }
+</script>
+
+<script nonce="{{request.csp_nonce}}">
+  const gaClientIdTrackingIframe = (event) => {
+    if (!window.APP_SETTINGS?.collect_analytics) return;
+
+    const iframe = document.createElement("iframe");
+    window.addEventListener("message", (message) => {
+      if(message.source === iframe.contentWindow && message.data.gaClientId) {
+        sessionStorage.setItem('ls_gaclient_id', message.data.gaClientId);
+      }
+    });
+    const origin = window.location.origin;
+    iframe.src = `http://127.0.0.1:3000/track/?event=${event}&origin=${origin}`;
+    iframe.style.display = "none";
+    iframe.style.visibility = "hidden";
+    document.body.appendChild(iframe);
+  }
+</script>
+
 <div class="login_page_new_ui">
   <div class="left">
     <img src="{{ settings.HOSTNAME }}{% static 'icons/logo-black.svg' %}" height="64"  alt="Label Studio Logo"/>

diff --git a/label_studio/users/templates/users/new-ui/user_login.html b/label_studio/users/templates/users/new-ui/user_login.html
@@ -1,5 +1,17 @@
 {% extends 'users/new-ui/user_base.html' %}
 
+{% block content %}
+  {{ block.super }}
+  <script nonce="{{request.csp_nonce}}">
+    gaClientIdTrackingIframe('users.login.view');
+    // Give time for `ls_gaclient_id` to be set
+    setTimeout(() => {
+      const ls_gaclient_id = sessionStorage.getItem('ls_gaclient_id');
+      __lsa('users.login.view', { ls_gaclient_id });
+    }, 2000);
+  </script>
+{% endblock %}
+
 {% block user_content %}
   <div class="form-wrapper">
     <h2>Log in</h2>

diff --git a/label_studio/users/templates/users/new-ui/user_signup.html b/label_studio/users/templates/users/new-ui/user_signup.html
@@ -1,6 +1,18 @@
 {% extends 'users/new-ui/user_base.html' %}
 {% load static %}
 
+{% block content %}
+  {{ block.super }}
+  <script nonce="{{request.csp_nonce}}">
+    gaClientIdTrackingIframe('users.signup.view');
+    // Give time for `ls_gaclient_id` to be set
+    setTimeout(() => {
+      const ls_gaclient_id = sessionStorage.getItem('ls_gaclient_id');
+      __lsa('users.signup.view', { ls_gaclient_id });
+    }, 2000);
+  </script>
+{% endblock %}
+
 {% block user_content %}
   <div class="form-wrapper">
     <h2>Sign Up</h2>

diff --git a/label_studio/users/templates/users/new-ui/user_tips.html b/label_studio/users/templates/users/new-ui/user_tips.html
@@ -2,41 +2,6 @@
 
 <script nonce="{{request.csp_nonce}}">
 
-  window.APP_SETTINGS = window.APP_SETTINGS ?? {};
-  window.APP_SETTINGS.collect_analytics = {{ settings.COLLECT_ANALYTICS|yesno:"true,false" }};
-
-  // Log event to the server, if analytics are enabled
-  // This is a fallback for when the __lsa global is not defined
-  // Normally this is a part of our main bundle but these pages do not use the main bundle
-  // and this allows us to log events from these pages
-  const logEvent = (eventName, metadata = {}) => {
-    if (!window.APP_SETTINGS?.collect_analytics) return;
-
-    const payload = {
-      ...metadata,
-      event: eventName,
-      url: window.location.href,
-    };
-
-    window.requestIdleCallback(() => {
-      const params = new URLSearchParams({ __: JSON.stringify(payload) });
-      const url = `/__lsa/?${params}`;
-      try {
-        if (navigator.sendBeacon) {
-          navigator.sendBeacon(url);
-        } else {
-          const img = new Image();
-          img.src = url;
-        }
-      } catch {
-        // Ignore errors here
-      }
-    });
-  };
-  if (!window.__lsa) {
-    window.__lsa = logEvent;
-  }
-
   const SERVER_ID = {{ request.server_id|json_dumps_ensure_ascii|safe }};
   const EVENT_NAMESPACE_KEY = "heidi_tips";
   const CACHE_KEY = "heidi_live_tips_collection";