[MM-15386] feat: add method and signupTypeFlags to login tracking

.gitignore

@@ -62,4 +62,4 @@ CLAUDE.md
 .opencode/
 .claude/
 
-storybook/yarn.lock
+storybook/yarn.lock

package.json

@@ -114,7 +114,7 @@
     "eslint-plugin-xss": "^0.1.12",
     "husky": "^8.0.0",
     "jsdom": "^22.1.0",
-    "postcss": "^8.4.31",
+    "postcss": "^8.5.8",
     "prettier": "^3.0.0",
     "sass": "1.77.6",
     "start-server-and-test": "^2.0.0",

src/App.vue

@@ -6,10 +6,14 @@
   import { useThemeStore, DARK_SCHEME_QUERY } from '@/stores/theme'
   import { storeToRefs } from 'pinia'
   import { themeApply } from '@/helpers'
+  import { captureFirstSessionUrl } from '@/helpers/first-session-url'
   import Layout from '@/layout'
   import '@modules/real-time-metrics/helpers/convert-date'
   import '@/helpers/store-handler'
 
+  // Capture the first session URL as early as possible
+  captureFirstSessionUrl()
+
   const DEFAULT_TITLE = 'Azion Console'
 
   /** @type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */

src/helpers/first-session-url.js

@@ -0,0 +1,37 @@
+const FIRST_SESSION_URL_KEY = 'azion_first_session_url'
+
+/**
+ * Captures the first session URL and stores it in localStorage.
+ * This should be called early in the application lifecycle.
+ * The URL is only stored once per user session.
+ */
+export const captureFirstSessionUrl = () => {
+  if (typeof window === 'undefined') return null
+
+  // Only capture if not already stored
+  if (!localStorage.getItem(FIRST_SESSION_URL_KEY)) {
+    const currentUrl = window.location.href
+    localStorage.setItem(FIRST_SESSION_URL_KEY, currentUrl)
+    return currentUrl
+  }
+
+  return getFirstSessionUrl()
+}
+
+/**
+ * Retrieves the first session URL from localStorage.
+ * @returns {string|null} The first session URL or null if not set.
+ */
+export const getFirstSessionUrl = () => {
+  if (typeof window === 'undefined') return null
+  return localStorage.getItem(FIRST_SESSION_URL_KEY)
+}
+
+/**
+ * Clears the first session URL from localStorage.
+ * This can be called after the signup flow is complete.
+ */
+export const clearFirstSessionUrl = () => {
+  if (typeof window === 'undefined') return
+  localStorage.removeItem(FIRST_SESSION_URL_KEY)
+}

src/plugins/analytics/trackers/SignInTracker.js

@@ -1,3 +1,24 @@
+import { hubspotFormSubmitService } from '@/services/hubspot-services'
+
+/**
+ * Maps signin type flags to the appropriate form_action value for HubSpot.
+ * @param {Object} signupTypeFlags - The signin type flags
+ * @returns {string} The form_action value
+ */
+const FORM_ACTION_PRIORITY = [
+  'login_sso_google',
+  'login_sso_github',
+  'login_email',
+  'signup_sso_google',
+  'signup_sso_github',
+  'signup_email'
+]
+
+const DEFAULT_FORM_ACTION = 'login_email'
+
+const getFormAction = (signupTypeFlags) =>
+  FORM_ACTION_PRIORITY.find((action) => signupTypeFlags?.[action]) ?? DEFAULT_FORM_ACTION
+
 export class SignInTracker {
   /**
    * Interface for TrackerAdapter.
@@ -14,23 +35,89 @@ export class SignInTracker {
   }
 
   /**
+   * @param {Object} payload
+   * @param {'google'|'azure'|'github'|'email'} payload.method
+   * @param {Object} [payload.signupTypeFlags] - Flags for signin type tracking
+   * @param {string} [payload.email] - User email for HubSpot
+   * @param {string} [payload.userId] - Console user ID for HubSpot
+   * @param {string} [payload.firstname] - User first name for HubSpot
+   * @param {string} [payload.lastname] - User last name for HubSpot
+   * @param {string} [payload.company] - Company name for HubSpot
+   * @param {string} [payload.githubHandle] - GitHub handle for HubSpot
+   * @param {string} [payload.phone] - User phone for HubSpot
+   *
    * @returns {AnalyticsTrackerAdapter}
    */
-  userSignedIn() {
+  userSignedIn(payload) {
+    // Get form_action from flags for both Segment and HubSpot
+    const formAction = getFormAction(payload.signupTypeFlags)
+
     this.#trackerAdapter.addEvent({
       eventName: 'User Signed In',
-      props: {}
+      props: {
+        method: payload.method,
+        login_sso_google: payload.signupTypeFlags?.login_sso_google ?? false,
+        login_sso_github: payload.signupTypeFlags?.login_sso_github ?? false,
+        login_email: payload.signupTypeFlags?.login_email ?? false,
+        signup_sso_google: payload.signupTypeFlags?.signup_sso_google ?? false,
+        signup_sso_github: payload.signupTypeFlags?.signup_sso_github ?? false,
+        signup_email: payload.signupTypeFlags?.signup_email ?? false
+      }
+    })
+
+    // Submit to HubSpot if email and userId are provided
+    if (payload.email && payload.userId) {
+      hubspotFormSubmitService({
+        email: payload.email,
+        form_action: formAction,
+        user_id__rtm_: payload.userId,
+        segment_userid: payload.userId,
+        firstname: payload.firstname,
+        lastname: payload.lastname,
+        mobilephone: payload.phone,
+        company: payload.company,
+        github_handle: payload.githubHandle
+      })
+    }
+
+    return this.#trackerAdapter
+  }
+
+  /**
+   * @param {Object} payload
+   * @param {'google'|'azure'|'github'|'email'} payload.method
+   *
+   * @returns {AnalyticsTrackerAdapter}
+   */
+  userClickedSignIn(payload) {
+    this.#trackerAdapter.addEvent({
+      eventName: 'User Clicked to Sign In',
+      props: {
+        method: payload.method
+      }
     })
     return this.#trackerAdapter
   }
 
   /**
+   * @param {Object} payload
+   * @param {'google'|'azure'|'github'|'email'} payload.method
+   * @param {Object} [payload.signupTypeFlags] - Flags for signup type tracking
+   *
    * @returns {AnalyticsTrackerAdapter}
    */
-  userFailedSignIn() {
+  userFailedSignIn(payload) {
     this.#trackerAdapter.addEvent({
       eventName: 'User Failed to Sign In',
-      props: {}
+      props: {
+        method: payload.method,
+        login_sso_google: payload.signupTypeFlags?.login_sso_google ?? false,
+        login_sso_github: payload.signupTypeFlags?.login_sso_github ?? false,
+        login_email: payload.signupTypeFlags?.login_email ?? false,
+        signup_sso_google: payload.signupTypeFlags?.signup_sso_google ?? false,
+        signup_sso_github: payload.signupTypeFlags?.signup_sso_github ?? false,
+        signup_email: payload.signupTypeFlags?.signup_email ?? false
+      }
     })
     return this.#trackerAdapter
   }

src/plugins/analytics/trackers/SignUpTracker.js

@@ -1,8 +1,25 @@
+import { hubspotFormSubmitService } from '@/services/hubspot-services'
+
+const FORM_ACTION_PRIORITY = [
+  'signup_sso_google',
+  'signup_sso_github',
+  'signup_email',
+  'login_sso_google',
+  'login_sso_github',
+  'login_email'
+]
+
+const DEFAULT_FORM_ACTION = 'signup_email'
+
+const getFormAction = (signupTypeFlags) =>
+  FORM_ACTION_PRIORITY.find((action) => signupTypeFlags?.[action]) ?? DEFAULT_FORM_ACTION
+
 export class SignUpTracker {
   /**
    * Interface for TrackerAdapter.
    * @typedef {Object} trackerAdapter
    * @property {function({eventName: string, props: Object}): void} addEvent - Method to add an event.
+   * @property {function(): Object} getUserContext - Method to get user context for HubSpot.
    */
   #trackerAdapter
 
@@ -16,16 +33,53 @@ export class SignUpTracker {
   /**
    * @param {Object} payload
    * @param {'google'|'azure'|'github'|'email'} payload.method
+   * @param {string} [payload.firstSessionUrl] - The first session URL
+   * @param {Object} [payload.signupTypeFlags] - Flags for signup type tracking
+   * @param {string} [payload.email] - User email for HubSpot
+   * @param {string} [payload.userId] - Console user ID for HubSpot
+   * @param {string} [payload.firstname] - User first name for HubSpot
+   * @param {string} [payload.lastname] - User last name for HubSpot
+   * @param {string} [payload.company] - Company name for HubSpot
+   * @param {string} [payload.githubHandle] - GitHub handle for HubSpot
+   * @param {string} [payload.phone] - User phone for HubSpot
    *
    * @returns {AnalyticsTrackerAdapter}
    */
   userSignedUp(payload) {
+    // Get signup_type from flags for both Segment and HubSpot
+    const signupType = getFormAction(payload.signupTypeFlags)
+
+    // Add Segment event
     this.#trackerAdapter.addEvent({
       eventName: 'User Signed Up',
       props: {
-        method: payload.method
+        method: payload.method,
+        first_session_url: payload.firstSessionUrl,
+        signup_type: signupType,
+        login_sso_google: payload.signupTypeFlags?.login_sso_google ?? false,
+        login_sso_github: payload.signupTypeFlags?.login_sso_github ?? false,
+        login_email: payload.signupTypeFlags?.login_email ?? false,
+        signup_sso_google: payload.signupTypeFlags?.signup_sso_google ?? false,
+        signup_sso_github: payload.signupTypeFlags?.signup_sso_github ?? false,
+        signup_email: payload.signupTypeFlags?.signup_email ?? false
       }
     })
+
+    // Submit to HubSpot if email and userId are provided
+    if (payload.email && payload.userId) {
+      hubspotFormSubmitService({
+        email: payload.email,
+        form_action: signupType,
+        user_id__rtm_: payload.userId,
+        segment_userid: payload.userId,
+        firstname: payload.firstname,
+        lastname: payload.lastname,
+        mobilephone: payload.phone,
+        company: payload.company,
+        github_handle: payload.githubHandle
+      })
+    }
+
     return this.#trackerAdapter
   }
 
@@ -48,14 +102,27 @@ export class SignUpTracker {
   /**
    * @param {Object} payload
    * @param {'google'|'azure'|'github'} payload.method
+   * @param {string} [payload.firstSessionUrl] - The first session URL
+   * @param {Object} [payload.signupTypeFlags] - Flags for signup type tracking
    *
    * @returns {AnalyticsTrackerAdapter}
    */
   userAuthorizedSso(payload) {
+    // Get signup_type from flags for consistency
+    const signupType = getFormAction(payload.signupTypeFlags)
+
     this.#trackerAdapter.addEvent({
       eventName: 'User Authorized SSO',
       props: {
-        method: payload.method
+        method: payload.method,
+        first_session_url: payload.firstSessionUrl,
+        signup_type: signupType,
+        login_sso_google: payload.signupTypeFlags?.login_sso_google ?? false,
+        login_sso_github: payload.signupTypeFlags?.login_sso_github ?? false,
+        login_email: payload.signupTypeFlags?.login_email ?? false,
+        signup_sso_google: payload.signupTypeFlags?.signup_sso_google ?? false,
+        signup_sso_github: payload.signupTypeFlags?.signup_sso_github ?? false,
+        signup_email: payload.signupTypeFlags?.signup_email ?? false
       }
     })
     return this.#trackerAdapter

src/router/routes/signup-routes/index.js

@@ -2,6 +2,7 @@ import * as SignupService from '@/services/signup-services'
 import { inject } from 'vue'
 import { useAccountStore } from '@/stores/account'
 import SignupView from '@/views/Signup/SignupView.vue'
+import { getFirstSessionUrl } from '@/helpers/first-session-url'
 
 /** @type {import('vue-router').RouteRecordRaw} */
 export const signupRoutes = {
@@ -38,13 +39,50 @@ export const signupRoutes = {
       beforeEnter: (__, ___, next) => {
         const accountStore = useAccountStore()
         const isFirstLogin = accountStore.isFirstLogin
+        const signupTypeFlags = accountStore.getSignupTypeFlags()
 
-        if (isFirstLogin && accountStore.ssoSignUpMethod) {
+        // Check if this is a first login with signup tracking needed
+        const isEmailSignup = signupTypeFlags.signup_email
+        const isSsoSignup = accountStore.ssoSignUpMethod
+
+        if (isFirstLogin && (isSsoSignup || isEmailSignup)) {
           /** @type {import('@/plugins/adapters/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
           const tracker = inject('tracker')
-          const signUpMethod = { method: accountStore.ssoSignUpMethod }
 
-          tracker.signUp.userSignedUp(signUpMethod).signUp.userAuthorizedSso(signUpMethod)
+          // Determine the method for tracking
+          const method = isSsoSignup || 'email'
+
+          // Get user data for HubSpot tracking
+          const { userId: consoleUserId, accountData } = accountStore
+          const userEmail = accountData?.email
+          const userName = accountData?.name || ''
+          const companyName = accountData?.company_name || ''
+
+          // Parse first and last name from full name
+          const nameParts = userName.split(' ')
+          const firstname = nameParts[0] || ''
+          const lastname = nameParts.slice(1).join(' ') || ''
+
+          const signUpPayload = {
+            method,
+            firstSessionUrl: getFirstSessionUrl(),
+            signupTypeFlags,
+            // HubSpot required fields
+            email: userEmail,
+            userId: consoleUserId,
+            firstname,
+            lastname,
+            company: companyName,
+            githubHandle: method === 'github' ? accountData?.github_handle : undefined
+          }
+
+          // Track user signup with Segment and HubSpot
+          tracker.signUp.userSignedUp(signUpPayload)
+
+          // For SSO, also track the SSO authorization event
+          if (isSsoSignup) {
+            tracker.signUp.userAuthorizedSso(signUpPayload)
+          }
         }
 
         if (isFirstLogin) {