diff --git a/frontend/package.json b/frontend/package.json index fe3787a..dcdc2f6 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -40,6 +40,7 @@ "codemirror": "^6.0.1", "copy-to-clipboard": "^3.3.3", "html2canvas": "^1.4.1", + "posthog-js": "^1.101.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", diff --git a/frontend/src/components/hosted/AppContainer.tsx b/frontend/src/components/hosted/AppContainer.tsx index cbe7eed..f2e8997 100644 --- a/frontend/src/components/hosted/AppContainer.tsx +++ b/frontend/src/components/hosted/AppContainer.tsx @@ -1,4 +1,5 @@ import { SignUp, useUser } from "@clerk/clerk-react"; +import posthog from "posthog-js"; import App from "../../App"; import { useEffect, useRef, useState } from "react"; import { AlertDialog } from "@radix-ui/react-alert-dialog"; @@ -8,7 +9,7 @@ import { useAuthenticatedFetch } from "./useAuthenticatedFetch"; import { useStore } from "../../store/store"; import AvatarDropdown from "./AvatarDropdown"; import { UserResponse } from "./types"; -import { SAAS_BACKEND_URL } from "../../config"; +import { POSTHOG_HOST, POSTHOG_KEY, SAAS_BACKEND_URL } from "../../config"; function AppContainer() { const [showPopup, setShowPopup] = useState(false); @@ -44,6 +45,15 @@ function AppContainer() { if (!user.subscriber_tier) { setSubscriberTier("free"); } else { + // Initialize PostHog only for paid users + posthog.init(POSTHOG_KEY, { api_host: POSTHOG_HOST }); + // Identify the user to PostHog + posthog.identify(user.email, { + email: user.email, + first_name: user.first_name, + last_name: user.last_name, + }); + setSubscriberTier(user.subscriber_tier); } diff --git a/frontend/src/config.ts b/frontend/src/config.ts index c9a7272..c83914d 100644 --- a/frontend/src/config.ts +++ b/frontend/src/config.ts @@ -20,3 +20,7 @@ export const STRIPE_PUBLISHABLE_KEY = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || null; export const SAAS_BACKEND_URL = import.meta.env.VITE_SAAS_BACKEND_URL || null; + +// PostHog +export const POSTHOG_KEY = import.meta.env.VITE_POSTHOG_KEY || null; +export const POSTHOG_HOST = import.meta.env.VITE_POSTHOG_HOST || null; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 678fe44..8bb1a2f 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2319,6 +2319,11 @@ fastq@^1.6.0: dependencies: reusify "^1.0.4" +fflate@^0.4.1: + version "0.4.8" + resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae" + integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA== + file-entry-cache@^6.0.1: version "6.0.1" resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz" @@ -3148,6 +3153,19 @@ postcss@^8.4.32: picocolors "^1.0.0" source-map-js "^1.0.2" +posthog-js@^1.101.0: + version "1.101.0" + resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.101.0.tgz#00e0fc6e164addd52b1738f087996bb0d6685943" + integrity sha512-mzwYSSWr9FdEMDeVpc+diLfc85+10r/LgELGtsW/HaYk+0du/GEql6szpqG8YXMMgb2dE4dnj0JICZFIJd7K3w== + dependencies: + fflate "^0.4.1" + preact "^10.19.3" + +preact@^10.19.3: + version "10.19.3" + resolved "https://registry.yarnpkg.com/preact/-/preact-10.19.3.tgz#7a7107ed2598a60676c943709ea3efb8aaafa899" + integrity sha512-nHHTeFVBTHRGxJXKkKu5hT8C/YWBkPso4/Gad6xuj5dbptt9iF9NZr9pHbPhBrnT2klheu7mHTxTZ/LjwJiEiQ== + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"