feat: OPTIC-1378: Track login / signup with GA client id (#6829)

Co-authored-by: mcanu <[email protected]>
HumanSignal · Jan 15, 2025 · e540623 · e540623
1 parent 5a497dd
commit e540623
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 35 deletions.
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 = `https://labelstud.io/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";