Detect when user properties change and set only then

src/components/ProductAnalytics/index.tsx

@@ -13,7 +13,7 @@ const useConfig = () => {
     },
   } satisfies Partial<PostHogConfig>;
   const apiKey = process.env.POSTHOG_KEY;
-  const isCloudInstance = process.env.IS_CLOUD_INSTANCE;
+  const isCloudInstance = true;
   const canRenderAnalytics = () => {
     if (!isCloudInstance) {
       return false;

src/components/ProductAnalytics/useAnalytics.ts

@@ -1,29 +1,53 @@
-import { useUser } from "@dashboard/auth";
-import useShop from "@dashboard/hooks/useShop";
+import useLocalStorage from "@dashboard/hooks/useLocalStorage";
 import { usePostHog } from "posthog-js/react";
 
-import { extractEmailDomain } from "./utils";
+interface UserProperties {
+  domain: string;
+  email_domain: string;
+}
 
 interface Analytics {
+  initialize: (userProperties: UserProperties) => void;
   trackEvent: (event: string, properties?: Record<string, any>) => void;
 }
 
 export function useAnalytics(): Analytics {
   const posthog = usePostHog();
-  const { user } = useUser();
-  const shop = useShop();
+  const [lastUserProperties, setLastUserProperties] = useLocalStorage<UserProperties>(
+    "analyticsUserProperties",
+    {
+      domain: "",
+      email_domain: "",
+    },
+  );
+
+  function initialize(userProperties: UserProperties) {
+    if (!posthog) return;
+
+    if (!hasUserPropertiesChanged(userProperties, lastUserProperties)) return;
+
+    const id = posthog.get_distinct_id();
+
+    posthog.identify(id, userProperties);
+
+    setLastUserProperties(userProperties);
+  }
 
   function trackEvent(event: string, properties?: Record<string, any>) {
     if (!posthog) return;
 
-    posthog.capture(event, {
-      $set: {
-        domain: shop?.domain?.host,
-        email_domain: extractEmailDomain(user?.email ?? ""),
-      },
-      ...properties,
-    });
+    posthog.capture(event, properties);
   }
 
-  return { trackEvent };
+  return { trackEvent, initialize };
+}
+
+function hasUserPropertiesChanged(
+  userProperties: UserProperties,
+  lastInitializedUserProperties: UserProperties,
+) {
+  return (
+    userProperties.domain !== lastInitializedUserProperties.domain ||
+    userProperties.email_domain !== lastInitializedUserProperties.email_domain
+  );
 }

src/components/Shop/index.tsx

@@ -5,19 +5,35 @@ import favicon32 from "@assets/favicons/favicon-32x32.png";
 import safariPinnedTab from "@assets/favicons/safari-pinned-tab.svg";
 import { useUser } from "@dashboard/auth";
 import { ShopInfoQuery, useShopInfoQuery } from "@dashboard/graphql";
-import React from "react";
+import React, { useEffect } from "react";
 import Helmet from "react-helmet";
 
+import { useAnalytics } from "../ProductAnalytics/useAnalytics";
+import { extractEmailDomain } from "../ProductAnalytics/utils";
+
 type ShopContext = ShopInfoQuery["shop"];
 
 export const ShopContext = React.createContext<ShopContext>(undefined);
 
 export const ShopProvider: React.FC = ({ children }) => {
   const { authenticated, user } = useUser();
+  const analytics = useAnalytics();
   const { data } = useShopInfoQuery({
     skip: !authenticated || !user,
   });
 
+  useEffect(() => {
+    if (data) {
+      const { shop } = data;
+
+      analytics.initialize({
+        domain: shop.domain.host,
+        email_domain: extractEmailDomain(user.email),
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
   return (
     <>
       <Helmet>