fix(admin-ui): disabling analytics when opted out (#4939)

* fixes #4423 by either using the `useAnalytics` hook or using an ErrorBoundary specific instance

Co-authored-by: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>

.changeset/seven-weeks-exist.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+correctly skipping analytics when user opted out

packages/admin-ui/ui/src/components/organisms/analytics-preferences/index.tsx

@@ -2,10 +2,7 @@ import clsx from "clsx"
 import { useForm, useWatch } from "react-hook-form"
 import useNotification from "../../../hooks/use-notification"
 import { useAnalytics } from "../../../providers/analytics-provider"
-import {
-  analytics,
-  useAdminCreateAnalyticsConfig,
-} from "../../../services/analytics"
+import { useAdminCreateAnalyticsConfig } from "../../../services/analytics"
 import { getErrorMessage } from "../../../utils/error-messages"
 import { nestedForm } from "../../../utils/nested-form"
 import Button from "../../fundamentals/button"
@@ -38,7 +35,7 @@ const AnalyticsPreferencesModal = () => {
     control,
   } = form
 
-  const { setSubmittingConfig } = useAnalytics()
+  const { setSubmittingConfig, trackUserEmail } = useAnalytics()
 
   const watchOptOut = useWatch({
     control: control,
@@ -65,7 +62,7 @@ const AnalyticsPreferencesModal = () => {
         )
 
         if (shouldTrackEmail) {
-          analytics.track("userEmail", { email })
+          trackUserEmail({ email })
         }
 
         setSubmittingConfig(false)

packages/admin-ui/ui/src/components/organisms/error-boundary/index.tsx

@@ -1,7 +1,9 @@
 import { AxiosError } from "axios"
 import React, { ErrorInfo } from "react"
-import { analytics, getAnalyticsConfig } from "../../../services/analytics"
+import { analyticsOptIn } from "../../../services/analytics"
 import Button from "../../fundamentals/button"
+import { WRITE_KEY } from "../../../constants/analytics"
+import { AnalyticsBrowser } from "@segment/analytics-next"
 
 type State = {
   hasError: boolean
@@ -13,6 +15,18 @@ type Props = {
   children?: React.ReactNode
 }
 
+// Analytics instance used for tracking errors
+let analyticsInstance: ReturnType<typeof AnalyticsBrowser.load> | undefined;
+
+const analytics = () => {
+  if (!analyticsInstance) {
+    analyticsInstance = AnalyticsBrowser.load({
+      writeKey: WRITE_KEY,
+    })
+  }
+  return analyticsInstance
+}
+
 class ErrorBoundary extends React.Component<Props, State> {
   public state: State = {
     hasError: false,
@@ -40,7 +54,7 @@ class ErrorBoundary extends React.Component<Props, State> {
     }
 
     const properties = getTrackingInfo(error, errorInfo)
-    analytics.track("error", properties)
+    analytics().track("error", properties)
   }
 
   public dismissError = () => {
@@ -98,19 +112,7 @@ const shouldTrackEvent = async (error: Error) => {
     return false
   }
 
-  const res = await getAnalyticsConfig().catch(() => undefined)
-
-  // Don't track if we have no config to ensure we have permission
-  if (!res) {
-    return false
-  }
-
-  // Don't track if user has opted out from sharing usage insights
-  if (res.analytics_config.opt_out) {
-    return false
-  }
-
-  return true
+  return await analyticsOptIn();
 }
 
 const errorMessage = (status?: number) => {

packages/admin-ui/ui/src/pages/invite.tsx

@@ -12,7 +12,8 @@ import PublicLayout from "../components/templates/login-layout"
 import useNotification from "../hooks/use-notification"
 import { getErrorMessage } from "../utils/error-messages"
 import FormValidator from "../utils/form-validator"
-import { analytics, useAdminCreateAnalyticsConfig } from "../services/analytics"
+import { useAdminCreateAnalyticsConfig } from "../services/analytics"
+import { useAnalytics } from "../providers/analytics-provider"
 import AnalyticsConfigForm, {
   AnalyticsConfigFormType,
 } from "../components/organisms/analytics-config-form"
@@ -30,6 +31,7 @@ const InvitePage = () => {
   const location = useLocation()
   const parsed = qs.parse(location.search.substring(1))
   const [signUp, setSignUp] = useState(false)
+  const { trackUserEmail } = useAnalytics()
 
   const first_run = !!parsed.first_run
 
@@ -117,7 +119,7 @@ const InvitePage = () => {
       await createAnalyticsConfig(data.analytics)
 
       if (shouldTrackEmail) {
-        await analytics.track("userEmail", {
+        trackUserEmail({
           email: token?.user_email,
         })
       }

packages/admin-ui/ui/src/providers/analytics-provider.tsx

@@ -28,6 +28,7 @@ type Event =
   | "regions"
   | "currencies"
   | "storeName"
+  | "userEmail"
 
 type AnalyticsContextType = {
   trackCurrencies: (properties: TrackCurrenciesPayload) => void
@@ -35,6 +36,7 @@ type AnalyticsContextType = {
   trackNumberOfDiscounts: (properties: TrackCountPayload) => void
   trackNumberOfProducts: (properties: TrackCountPayload) => void
   trackRegions: (properties: TrackRegionsPayload) => void
+  trackUserEmail: (properties: TrackUserEmailPayload) => void
   setSubmittingConfig: (status: boolean) => void
 }
 
@@ -140,6 +142,10 @@ export const AnalyticsProvider = ({ writeKey, children }: Props) => {
     track("numDiscounts", properties)
   }
 
+  const trackUserEmail = (properties: TrackUserEmailPayload) => {
+    track("userEmail", properties)
+  }
+
   // Track number of users
   useEffect(() => {
     if (users) {
@@ -171,6 +177,7 @@ export const AnalyticsProvider = ({ writeKey, children }: Props) => {
         trackNumberOfOrders,
         trackNumberOfProducts,
         trackNumberOfDiscounts,
+        trackUserEmail,
         setSubmittingConfig,
       }}
     >
@@ -201,6 +208,10 @@ type TrackRegionsPayload = {
   count: number
 }
 
+type TrackUserEmailPayload = {
+  email: string | undefined
+}
+
 export const useAnalytics = () => {
   const context = useContext(AnalyticsContext)
 

packages/admin-ui/ui/src/services/analytics.ts

@@ -1,8 +1,6 @@
 import { AdminAnalyticsConfigRes } from "@medusajs/medusa"
-import { AnalyticsBrowser } from "@segment/analytics-next"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import axios from "axios"
-import { WRITE_KEY } from "../constants/analytics"
 import { MEDUSA_BACKEND_URL } from "../constants/medusa-backend-url"
 import { useFeatureFlag } from "../providers/feature-flag-provider"
 
@@ -15,10 +13,19 @@ const client = axios.create({
   withCredentials: true,
 })
 
-// Analytics instance used for tracking one-off events, such as errors and the initial permission request
-export const analytics = AnalyticsBrowser.load({
-  writeKey: WRITE_KEY,
-})
+/**
+ * Returns true if analytics are enabled for the current user.
+ */
+export const analyticsOptIn = async () => {
+  const res = await getAnalyticsConfig().catch(() => undefined)
+
+  // Don't track if we have no config to ensure we have permission
+  if (!res) {
+    return false
+  }
+
+  return !res.analytics_config.opt_out
+}
 
 /**
  * Fetches the analytics config for the current user.