Add pageview tracking

.changeset/hip-horses-mate.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Now you can see pageviews in the posthog.

.github/workflows/deploy-staging-and-prepare-release.yaml

@@ -61,7 +61,7 @@ jobs:
       IS_CLOUD_INSTANCE: true
       POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
       POSTHOG_HOST: ${{ secrets.POSTHOG_HOST }}
-      POSTHOG_EXCLUDED_DOMAINS: ${{ vars.EXCLUDED_DOMAINS }}
+      POSTHOG_EXCLUDED_DOMAINS: ${{ vars.POSTHOG_EXCLUDED_DOMAINS }}
       ONBOARDING_USER_JOINED_DATE_THRESHOLD: ${{ vars.STAGING_ONBOARDING_USER_JOINED_DATE_THRESHOLD }}
     steps:
       - uses: actions/checkout@v4

.github/workflows/pr-automation.yml

@@ -123,6 +123,7 @@ jobs:
           STATIC_URL: /
           IS_CLOUD_INSTANCE: true
           ONBOARDING_USER_JOINED_DATE_THRESHOLD: ${{ vars.STAGING_ONBOARDING_USER_JOINED_DATE_THRESHOLD }}
+
         run: npm run build
 
       - name: Configure AWS credentials

src/components/ProductAnalytics/index.tsx

@@ -20,6 +20,7 @@ const useConfig = () => {
     capture_pageview: false,
     autocapture: false,
     advanced_disable_decide: true,
+    cookie_expiration: 30, // 30 days,
     loaded: posthog => {
       if (process.env.NODE_ENV === "development") posthog.debug();
     },

src/components/ProductAnalytics/useAnalytics.ts

@@ -1,6 +1,7 @@
-import useLocalStorage from "@dashboard/hooks/useLocalStorage";
 import { usePostHog } from "posthog-js/react";
 
+import { useRouteChange } from "../Router/useRouteChange";
+
 interface UserProperties {
   domain: string;
   email_domain: string;
@@ -13,23 +14,21 @@ interface Analytics {
 
 export function useAnalytics(): Analytics {
   const posthog = usePostHog();
-  const [hasBeenUserSet, setHasBeenUserSet] = useLocalStorage<boolean>(
-    "analyticsHasBeenUserSet",
-    false,
-  );
+
+  const { register } = useRouteChange(location => {
+    trackEvent("$pageview", {
+      normalized_path: location.pathname,
+    });
+  });
 
   function initialize(userProperties: UserProperties) {
     if (!posthog) return;
 
-    // initialize function is called on each reload that cause generates new used id by identify function
-    // to avoid this we need to check if user has been set
-    if (hasBeenUserSet) return;
+    register();
 
     const id = posthog.get_distinct_id();
 
     posthog.identify(id, userProperties);
-
-    setHasBeenUserSet(true);
   }
 
   function trackEvent(event: string, properties?: Record<string, any>) {

src/components/Router/useRouteChange.ts

@@ -0,0 +1,28 @@
+import { Location, UnregisterCallback } from "history";
+import { useRef } from "react";
+import useRouter from "use-react-router";
+
+const compareLocations = (a: Location, b: Location) => {
+  return a.pathname === b.pathname && a.search === b.search;
+};
+
+export const useRouteChange = (onChange: (location: Location) => void) => {
+  const router = useRouter();
+  const location = useRef<Location>(router.history.location);
+  const listener = useRef<UnregisterCallback | null>(null);
+
+  const register = () => {
+    if (listener.current) return;
+
+    onChange(router.history.location);
+
+    listener.current = router.history.listen(incomingLocation => {
+      if (location.current && compareLocations(location.current, incomingLocation)) return;
+
+      onChange(incomingLocation);
+      location.current = incomingLocation;
+    });
+  };
+
+  return { register };
+};

src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.test.tsx

@@ -8,6 +8,11 @@ import { OnboardingProvider } from "./onboardingContext";
 import { useOnboardingStorage } from "./onboardingContext/useOnboardingStorage";
 import { WelcomePageOnboarding } from "./WelcomePageOnboarding";
 
+jest.mock("@dashboard/components/Router/useRouteChange", () => ({
+  useRouteChange: () => ({
+    register: jest.fn(),
+  }),
+}));
 jest.mock("@dashboard/auth");
 jest.mock("@dashboard/featureFlags", () => ({
   useFlag: jest.fn().mockReturnValue({