diff --git a/.changeset/hip-horses-mate.md b/.changeset/hip-horses-mate.md new file mode 100644 index 00000000000..06ef0cbc664 --- /dev/null +++ b/.changeset/hip-horses-mate.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": patch +--- + +Now you can see pageviews in the posthog. diff --git a/.github/workflows/deploy-cloud.yaml b/.github/workflows/deploy-cloud.yaml index c5d2edd4a14..af1425108e5 100644 --- a/.github/workflows/deploy-cloud.yaml +++ b/.github/workflows/deploy-cloud.yaml @@ -24,6 +24,9 @@ jobs: SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }} APPS_MARKETPLACE_API_URL: "https://apps.saleor.io/api/v2/saleor-apps" IS_CLOUD_INSTANCE: true + POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }} + POSTHOG_HOST: ${{ secrets.POSTHOG_HOST }} + POSTHOG_EXCLUDED_DOMAINS: ${{ vars.POSTHOG_EXCLUDED_DOMAINS }} ONBOARDING_USER_JOINED_DATE_THRESHOLD: ${{ vars.CLOUD_ONBOARDING_USER_JOINED_DATE_THRESHOLD }} steps: - name: Check region diff --git a/.github/workflows/deploy-staging-and-prepare-release.yaml b/.github/workflows/deploy-staging-and-prepare-release.yaml index 6ea0bdd7f7c..0d4cfe0a8de 100644 --- a/.github/workflows/deploy-staging-and-prepare-release.yaml +++ b/.github/workflows/deploy-staging-and-prepare-release.yaml @@ -59,9 +59,6 @@ jobs: APPS_MARKETPLACE_API_URL: "https://apps.staging.saleor.io/api/v2/saleor-apps" VERSION: ${{ github.event.inputs.git_ref || github.ref_name }} IS_CLOUD_INSTANCE: true - POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }} - POSTHOG_HOST: ${{ secrets.POSTHOG_HOST }} - POSTHOG_EXCLUDED_DOMAINS: ${{ vars.EXCLUDED_DOMAINS }} ONBOARDING_USER_JOINED_DATE_THRESHOLD: ${{ vars.STAGING_ONBOARDING_USER_JOINED_DATE_THRESHOLD }} steps: - uses: actions/checkout@v4 diff --git a/src/components/ProductAnalytics/index.tsx b/src/components/ProductAnalytics/index.tsx index 9a39f02be98..bcc4a047dbf 100644 --- a/src/components/ProductAnalytics/index.tsx +++ b/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(); }, diff --git a/src/components/ProductAnalytics/useAnalytics.ts b/src/components/ProductAnalytics/useAnalytics.ts index b97a7651dba..6022721d1c5 100644 --- a/src/components/ProductAnalytics/useAnalytics.ts +++ b/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( - "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) { diff --git a/src/components/Router/useRouteChange.ts b/src/components/Router/useRouteChange.ts new file mode 100644 index 00000000000..ccf8d17c36d --- /dev/null +++ b/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(router.history.location); + const listener = useRef(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 }; +}; diff --git a/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.test.tsx b/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.test.tsx index b0a44319639..de5335718cf 100644 --- a/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.test.tsx +++ b/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({