feat: Add user connection and disconnection tracking to analytics

Author: medyo

src/features/auth/components/AuthModal.tsx

@@ -5,6 +5,7 @@ import { IoMdClose } from 'react-icons/io'
 import ReactModal from 'react-modal'
 import toast from 'react-simple-toasts'
 import { useAuth } from 'src/features/auth'
+import { trackUserConnect } from 'src/lib/analytics'
 import { firebaseAuth, githubAuthProvider, googleAuthProvider } from 'src/lib/firebase'
 import './authModal.css'
 
@@ -24,6 +25,7 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
         const name = result.user.displayName
         const imageURL = result.user.photoURL
         if (idToken && name && email && imageURL) {
+          trackUserConnect(providerName)
           closeAuthModal()
           initState({
             idToken: idToken,

src/features/auth/hooks/useAuth.ts

@@ -1,11 +1,15 @@
 import { AuthModalStore, AuthStore } from 'src/features/auth'
+import { trackUserDisconnect } from 'src/lib/analytics'
 
 export const useAuth = () => {
   const { isAuthModalOpen, openAuthModal, closeAuthModal } = AuthModalStore()
   const authStore = AuthStore()
   const { idToken, user, initState, clear } = authStore
+
   const isConnected = () => user != null
+
   const logout = () => {
+    trackUserDisconnect()
     clear()
   }
 

src/lib/analytics.ts

@@ -44,6 +44,8 @@ enum Verbs {
   DISABLE = 'Disable',
   SHARE = 'Share',
   COPY = 'Copy',
+  CONNECT = 'Connect',
+  DISCONNECT = 'Disconnect',
 }
 
 export enum Attributes {
@@ -376,6 +378,21 @@ export const trackLinkCopy = ({
   })
 }
 
+export const trackUserConnect = (provider: string) => {
+  trackEvent({
+    object: Objects.USER,
+    verb: Verbs.CONNECT,
+    attributes: { [Attributes.PROVIDER]: provider },
+  })
+}
+
+export const trackUserDisconnect = () => {
+  trackEvent({
+    object: Objects.USER,
+    verb: Verbs.DISCONNECT,
+  })
+}
+
 // Identification
 
 export const identifyUserLanguages = (languages: string[]) => {