Add Posthog analytics

packages/fakeyou.com/package.json

@@ -37,6 +37,7 @@
     "howler": "^2.2.0",
     "i18next": "^21.6.11",
     "js-cookie": "^3.0.1",
+    "posthog-js": "^1.73.1",
     "pretty-num": "^0.5.2",
     "query-string": "^8.1.0",
     "react": "^16.13.1",

packages/fakeyou.com/public/index.html

@@ -107,6 +107,12 @@
       rel="stylesheet"
     />
 
+    <!-- Posthog -->
+    <!--<script>
+      !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+      posthog.init('phc_x6IRdmevMt4XAoJqx9tCmwDiaQkEkD48c0aLmuXMOvu', {api_host: 'https://app.posthog.com'})
+    </script>-->
+
     <!-- import bootstrap
     <link
       href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"

packages/fakeyou.com/src/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import * as serviceWorker from './serviceWorker';
 import AppTranslated from './AppTranslated';
+import posthog from 'posthog-js'
 
 const IS_IOS : boolean = /iPad|iPhone|iPod/.test(navigator.platform || "");
 
@@ -29,6 +30,9 @@ bootstrapJs.setAttribute("integrity", "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMh
 bootstrapJs.setAttribute("src", "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js");
 document.getElementsByTagName("body")[0].appendChild(bootstrapJs);
 
+// Posthog analytics
+posthog.init('phc_x6IRdmevMt4XAoJqx9tCmwDiaQkEkD48c0aLmuXMOvu', { api_host: 'https://app.posthog.com' })
+
 ReactDOM.render(
   <React.StrictMode>
     <AppTranslated

packages/fakeyou.com/src/v2/view/nav/TopNav.tsx

@@ -31,6 +31,7 @@ import {
   faMessageDots,
   faMicrophoneStand,
 } from "@fortawesome/pro-solid-svg-icons";
+import posthog from 'posthog-js'
 
 // TODO: This is duplicated in SessionTtsInferenceResultsList !
 // Default to querying every 15 seconds, but make it configurable serverside
@@ -90,6 +91,7 @@ function TopNav(props: Props) {
     await Logout();
     props.querySessionCallback();
     props.querySessionSubscriptionsCallback();
+    posthog.reset();
     Analytics.accountLogout();
     history.push("/");
   };

packages/fakeyou.com/src/v2/view/pages/about/about_page/AboutPage.tsx

@@ -3,10 +3,12 @@ import { Link } from "react-router-dom";
 import { motion } from "framer-motion";
 import { container, item, image, panel } from "../../../../../data/animation";
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
+import posthog from 'posthog-js'
 
 interface Props {}
 
 function AboutPage(props: Props) {
+  posthog.capture('$pageview');
   usePrefixedDocumentTitle("About Us");
 
   return (

packages/fakeyou.com/src/v2/view/pages/about/guide_page/GuidePage.tsx

@@ -4,10 +4,12 @@ import { container, item, panel, image } from "../../../../../data/animation";
 import { Link } from "react-router-dom";
 import { DiscordLink2 } from "@storyteller/components/src/elements/DiscordLink2";
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
+import posthog from 'posthog-js'
 
 interface Props {}
 
 function GuidePage(props: Props) {
+  posthog.capture('$pageview');
   usePrefixedDocumentTitle("Guide to all things Deep Fake");
 
   return (

packages/fakeyou.com/src/v2/view/pages/about/privacy_page/PrivacyPage.tsx

@@ -2,10 +2,12 @@ import React from "react";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../../data/animation";
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
+import posthog from 'posthog-js'
 
 interface Props {}
 
 function PrivacyPage(props: Props) {
+  posthog.capture('$pageview');
   usePrefixedDocumentTitle("Privacy Statement");
 
   return (

packages/fakeyou.com/src/v2/view/pages/about/terms_page/TermsPage.tsx

@@ -4,10 +4,12 @@ import { container, item, panel, image } from "../../../../../data/animation";
 import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
 import { Link } from "react-router-dom";
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
+import posthog from 'posthog-js'
 
 interface Props {}
 
 function TermsPage(props: Props) {
+  posthog.capture('$pageview');
   usePrefixedDocumentTitle("Terms of Use");
 
   return (

packages/fakeyou.com/src/v2/view/pages/category/CreateCategoryPage.tsx

@@ -12,6 +12,7 @@ import { BackLink } from "../../_common/BackLink";
 import { WebUrl } from "../../../../common/WebUrl";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../data/animation";
+import posthog from 'posthog-js'
 
 const DEFAULT_CAN_DIRECTLY_HAVE_MODELS = true;
 const DEFAULT_CAN_HAVE_SUBCATEGORIES = false;
@@ -23,6 +24,7 @@ interface Props {
 
 function CreateCategoryPage(props: Props) {
   let history = useHistory();
+  posthog.capture('$pageview');
 
   // Request
   const [name, setName] = useState("");

packages/fakeyou.com/src/v2/view/pages/channels/Channels.tsx

@@ -5,6 +5,7 @@ import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session
 import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
 import { Link } from "react-router-dom";
 import { container, item } from "../../../../data/animation";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -13,6 +14,7 @@ interface Props {
 
 function ChannelsPage(props: Props) {
   usePrefixedDocumentTitle("Channels");
+  posthog.capture('$pageview');
 
   let videoBlock = (
     <motion.div className="col-12 col-sm-6 col-md-4" variants={item}>

packages/fakeyou.com/src/v2/view/pages/character/trump/TrumpTtsPage.tsx

@@ -47,6 +47,7 @@ import { DynamicallyCategorizeModels } from "../../../../../model/categories/Syn
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
 import { SearchOmnibar } from "./search/SearchOmnibar";
 import { InferenceJob } from "@storyteller/components/src/jobs/InferenceJob";
+import posthog from 'posthog-js'
 
 const PAGE_MODEL_TOKENS = new Set<string>([
   "TM:pmd1wm3kf6az", // Development: "Fake Donald Trump #1"
@@ -107,6 +108,7 @@ function TrumpTtsPage(props: Props) {
   //Loading spinning icon
   const [loading, setLoading] = useState(false);
   const [isAudioLimitAlertVisible, setAudioLimitAlertVisible] = useState(false);
+  posthog.capture('$pageview');
 
   usePrefixedDocumentTitle("Donald Trump TTS and Donald Trump AI Voice");
 

packages/fakeyou.com/src/v2/view/pages/clone_voice_requests/VoiceCloneRequestPage.tsx

@@ -26,11 +26,13 @@ import { WebUrl } from "../../../../common/WebUrl";
 import { motion } from "framer-motion";
 import { container, item, image, panel } from "../../../../data/animation";
 import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
+import posthog from 'posthog-js'
 
 interface Props {}
 
 function VoiceCloneRequestPage(props: Props) {
   usePrefixedDocumentTitle("Create a Custom Voice Clone with Deep Fake TTS");
+  posthog.capture('$pageview');
 
   // Contact
   const [emailAddress, setEmailAddress] = useState("");

packages/fakeyou.com/src/v2/view/pages/contest/CommunityCommissionsPage.tsx

@@ -6,11 +6,13 @@ import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocument
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faWaveformLines } from "@fortawesome/pro-solid-svg-icons";
 import { faDiscord } from "@fortawesome/free-brands-svg-icons";
+import posthog from 'posthog-js'
 
 interface Props {}
 
 function CommunityCommissionsPage(props: Props) {
   usePrefixedDocumentTitle("Voice to Voice Community Commissions");
+  posthog.capture('$pageview');
 
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>
@@ -40,7 +42,7 @@ function CommunityCommissionsPage(props: Props) {
               </div>
               <div>
                 <p className="lead">
-                  We're pleased to announce a pool of over <b>$15,000</b> in
+                  We're pleased to announce a pool of over <b>$5,000</b> in
                   rewards to creators in our community for creating quality
                   Voice to Voice models!
                 </p>

packages/fakeyou.com/src/v2/view/pages/contribute/ContributeIndexPage.tsx

@@ -23,6 +23,7 @@ import {
 } from "@fortawesome/pro-solid-svg-icons";
 import { faMicrophoneStand } from "@fortawesome/pro-duotone-svg-icons";
 import { faWaveformLines } from "@fortawesome/pro-regular-svg-icons";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -38,6 +39,7 @@ function ContributeIndexPage(props: Props) {
     : t("pages.contributeIndex.buttonSuggestCategory");
 
   usePrefixedDocumentTitle("Contribute to FakeYou");
+  posthog.capture('$pageview');
 
   const title = <>{t("pages.contributeIndex.heroTitle")}</>;
   const subText = (

packages/fakeyou.com/src/v2/view/pages/firehose/FirehoseEventListPage.tsx

@@ -18,6 +18,7 @@ import {
 import { motion } from "framer-motion";
 import { duration, delay, container, item } from "../../../../data/animation";
 import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
+import posthog from 'posthog-js'
 
 const Fade = require("react-reveal/Fade");
 
@@ -59,9 +60,11 @@ function FirehoseEventListPage(props: Props) {
     []
   );
 
+
   const fetchEvents = () => {
     const api = new ApiConfig();
     const endpointUrl = api.firehoseEvents();
+    posthog.capture('$pageview');
 
     fetch(endpointUrl, {
       method: "GET",

packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx

@@ -14,6 +14,7 @@ import {
 import { faDiscord, faTwitter } from "@fortawesome/free-brands-svg-icons";
 import { WebUrl } from "../../../../common/WebUrl";
 import { faFileArrowUp } from "@fortawesome/pro-solid-svg-icons";
+import posthog from 'posthog-js'
 // import {
 //   faFileArrowUp,
 //   faMicrophone,
@@ -27,6 +28,8 @@ interface Props {
 }
 
 function LandingPage(props: Props) {
+  posthog.capture('$pageview');
+
   let signUpButton = <></>;
   let viewPricingButton = <></>;
   let upgradeButton = <></>;

packages/fakeyou.com/src/v2/view/pages/leaderboard/LeaderboardPage.tsx

@@ -15,6 +15,7 @@ import { DiscordLink2 } from "@storyteller/components/src/elements/DiscordLink2"
 import { motion } from "framer-motion";
 import { container, item, panel } from "data/animation";
 import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -31,6 +32,8 @@ function LeaderboardPage(props: Props) {
     Array<LeaderboardRow> | undefined
   >(undefined);
   const [retryCount, setRetryCount] = useState(0);
+  
+  posthog.capture('$pageview');
 
   const getLeaderboard = useCallback(async () => {
     const leaderboardReponse = await GetLeaderboard();

packages/fakeyou.com/src/v2/view/pages/login/LoginPage.tsx

@@ -13,6 +13,7 @@ import { motion } from "framer-motion";
 import { container, panel } from "../../../../data/animation";
 import { Analytics } from "../../../../common/Analytics";
 import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -22,6 +23,7 @@ interface Props {
 
 function LoginPage(props: Props) {
   let history = useHistory();
+  posthog.capture('$pageview');
 
   const [password, setPassword] = useState("");
   const [usernameOrEmail, setUsernameOrEmail] = useState("");

packages/fakeyou.com/src/v2/view/pages/news/NewsPage.tsx

@@ -11,6 +11,7 @@ import { WebUrl } from "../../../../common/WebUrl";
 import { DiscordLink2 } from "@storyteller/components/src/elements/DiscordLink2";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faStar } from "@fortawesome/pro-solid-svg-icons";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -43,7 +44,7 @@ const TWITCH_CHANNEL = "FakeYouLabs";
 
 function NewsPage(props: Props) {
   usePrefixedDocumentTitle("AI News");
-  console.log("Channels page regenerated");
+  posthog.capture('$pageview');
 
   //const [stream, setStream] = useState<StreamInfo>({
   //  broadcaster_name: "",

packages/fakeyou.com/src/v2/view/pages/patrons/PatronPage.tsx

@@ -8,12 +8,15 @@ import { motion } from "framer-motion";
 import { container, item, image, panel } from "../../../../data/animation";
 import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
 import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
+import posthog from 'posthog-js'
+
 interface Props {
   sessionWrapper: SessionWrapper;
 }
 
 function PatronPage(props: Props) {
   usePrefixedDocumentTitle("Thank you to our Patrons!");
+  posthog.capture('$pageview');
 
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>

packages/fakeyou.com/src/v2/view/pages/premium/CheckoutCancelPage.tsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { motion } from "framer-motion";
 import { container, item, image } from "../../../../data/animation";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -10,6 +11,8 @@ interface Props {
 }
 
 function CheckoutCancelPage(props: Props) {
+  posthog.capture('$pageview');
+
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>
       <div className="container mb-4">

packages/fakeyou.com/src/v2/view/pages/premium/CheckoutSuccessPage.tsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { motion } from "framer-motion";
 import { container, item, image } from "../../../../data/animation";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -10,6 +11,8 @@ interface Props {
 }
 
 function CheckoutSuccessPage(props: Props) {
+  posthog.capture('$pageview');
+
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>
       <div className="container mb-4">

packages/fakeyou.com/src/v2/view/pages/premium/PortalSuccessPage.tsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { motion } from "framer-motion";
 import { container, item, image } from "../../../../data/animation";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -10,6 +11,8 @@ interface Props {
 }
 
 function PortalSuccessPage(props: Props) {
+  posthog.capture('$pageview');
+
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>
       <div className="container mb-4">

packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx

@@ -17,6 +17,7 @@ import { Analytics } from "../../../../common/Analytics";
 import { WebUrl } from "../../../../common/WebUrl";
 import { BeginStripeCheckoutFlow } from "../../../../common/BeginStripeCheckoutFlow";
 import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -25,6 +26,7 @@ interface Props {
 
 function PricingPage(props: Props) {
   let history = useHistory();
+  posthog.capture('$pageview');
 
   const beginStripePortalFlow = async (): Promise<boolean> => {
     const response = await CreateStripePortalRedirect();

packages/fakeyou.com/src/v2/view/pages/product_usage_info/ProductUsageInfoPage.tsx

@@ -3,6 +3,7 @@ import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapp
 import { motion } from "framer-motion";
 import { container, panel } from "data/animation";
 import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -46,6 +47,7 @@ const radioButtonsWhy = [
 
 function ProductUsageInfoPage(props: Props) {
   usePrefixedDocumentTitle("Product Usage Survey");
+  posthog.capture('$pageview');
 
   const [selectedOptionWho, setSelectedOptionWho] = useState("");
   const [selectedOptionWhy, setSelectedOptionWhy] = useState("");

packages/fakeyou.com/src/v2/view/pages/profile/profile_ban/ProfileBanFc.tsx

@@ -11,6 +11,7 @@ import {
 import { BackLink } from "../../../_common/BackLink";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../../data/animation";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -43,6 +44,7 @@ function ProfileBanFc(props: Props) {
   }, [username, getUserProfile]);
 
   const handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>): boolean => {
+    posthog.capture('$pageview');
     ev.preventDefault();
 
     const api = new ApiConfig();

packages/fakeyou.com/src/v2/view/pages/profile/profile_edit/ProfileEditFc.tsx

@@ -21,6 +21,7 @@ import {
 import { BackLink } from "../../../_common/BackLink";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../../data/animation";
+import posthog from 'posthog-js'
 
 const DEFAULT_VISIBILITY = "public";
 
@@ -61,6 +62,8 @@ interface UserPayload {
 
 function ProfileEditFc(props: Props) {
   const { username } = useParams() as { username: string };
+  posthog.capture('$pageview');
+  
   const userProfilePage = `/profile/${username}`;
 
   const history = useHistory();

packages/fakeyou.com/src/v2/view/pages/profile/profile_view/ProfilePage.tsx

@@ -40,6 +40,7 @@ import { motion } from "framer-motion";
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
 import { faCalendarAlt } from "@fortawesome/pro-solid-svg-icons";
 import { CommentComponent } from "../../../_common/comments/CommentComponent";
+import posthog from 'posthog-js'
 
 interface Props {
    sessionWrapper: SessionWrapper;
@@ -52,6 +53,8 @@ interface Props {
 
 function ProfilePage(this: any, props: Props) {
    const { username }: { username: string } = useParams();
+   posthog.capture('$pageview');
+
    const { pathname } = useLocation();
    const { url } = useRouteMatch();
 

packages/fakeyou.com/src/v2/view/pages/signup/SignupPage.tsx

@@ -17,6 +17,7 @@ import queryString from "query-string";
 import { WebUrl } from "../../../../common/WebUrl";
 import { BeginStripeCheckoutFlow } from "../../../../common/BeginStripeCheckoutFlow";
 import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
+import posthog from 'posthog-js'
 
 enum FieldTriState {
   EMPTY_FALSE,
@@ -57,6 +58,7 @@ function SignupPage(props: Props) {
 
   const handleUsernameChange = (ev: React.FormEvent<HTMLInputElement>) => {
     ev.preventDefault();
+    posthog.capture('$pageview');
 
     const newUsername = (ev.target as HTMLInputElement).value;
 

packages/fakeyou.com/src/v2/view/pages/tts/tts_edit_categories/TtsEditCategoriesPage.tsx

@@ -34,6 +34,7 @@ import {
 import { useParams, Link } from "react-router-dom";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../../data/animation";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -41,6 +42,7 @@ interface Props {
 
 function TtsEditCategoriesPage(props: Props) {
   let { token } = useParams() as { token: string };
+  posthog.capture('$pageview');
 
   const [ttsModel, setTtsModel] = useState<TtsModel | undefined>(undefined);
   const [notFoundState, setNotFoundState] = useState<boolean>(false);

packages/fakeyou.com/src/v2/view/pages/tts/tts_model_delete/TtsModelDeletePage.tsx

@@ -6,6 +6,7 @@ import { useParams, Link, useHistory } from "react-router-dom";
 import { BackLink } from "../../../_common/BackLink";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../../data/animation";
+import posthog from 'posthog-js'
 
 interface TtsModelViewResponsePayload {
   success: boolean;
@@ -45,6 +46,7 @@ interface Props {
 }
 
 function TtsModelDeletePage(props: Props) {
+  posthog.capture('$pageview');
   const history = useHistory();
 
   let { token } = useParams() as { token: string };

packages/fakeyou.com/src/v2/view/pages/tts/tts_model_edit/TtsModelEditPage.tsx

@@ -38,6 +38,7 @@ import {
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../../data/animation";
 import { faFunction } from "@fortawesome/pro-solid-svg-icons";
+import posthog from 'posthog-js'
 
 const DEFAULT_VISIBILITY = "public";
 
@@ -53,6 +54,7 @@ interface Props {
 
 function TtsModelEditPage(props: Props) {
   let { token } = useParams() as { token: string };
+  posthog.capture('$pageview');
 
   const history = useHistory();
 

packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx

@@ -66,6 +66,7 @@ import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocum
 import { RatingButtons } from "../../../_common/ratings/RatingButtons";
 import { RatingStats } from "../../../_common/ratings/RatingStats";
 import { SearchOmnibar } from "./search/SearchOmnibar";
+import posthog from 'posthog-js'
 
 export interface EnqueueJobResponsePayload {
   success: boolean;
@@ -134,6 +135,8 @@ interface Props {
 }
 
 function TtsModelListPage(props: Props) {
+  posthog.capture('$pageview');
+
   //Loading spinning icon
   const [loading, setLoading] = useState(false);
   const [isAudioLimitAlertVisible, setAudioLimitAlertVisible] = useState(false);

packages/fakeyou.com/src/v2/view/pages/tts/tts_model_view/TtsModelViewPage.tsx

@@ -67,6 +67,7 @@ import { RatingButtons } from "../../../_common/ratings/RatingButtons";
 import { RatingStats } from "../../../_common/ratings/RatingStats";
 import { CommentComponent } from "../../../_common/comments/CommentComponent";
 import { InferenceJob } from "@storyteller/components/src/jobs/InferenceJob";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -81,6 +82,7 @@ interface Props {
 
 function TtsModelViewPage(props: Props) {
   let { token } = useParams() as { token: string };
+  posthog.capture('$pageview');
 
   const [ttsModel, setTtsModel] = useState<TtsModel | undefined>(undefined);
   const [ttsModelUseCount, setTtsModelUseCount] = useState<number | undefined>(

packages/fakeyou.com/src/v2/view/pages/tts/tts_result_delete/TtsResultDeletePage.tsx

@@ -6,6 +6,7 @@ import { Gravatar } from "@storyteller/components/src/elements/Gravatar";
 import { WebUrl } from "../../../../../common/WebUrl";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../../data/animation";
+import posthog from 'posthog-js'
 
 interface TtsInferenceResultResponsePayload {
   success: boolean;
@@ -53,6 +54,7 @@ interface Props {
 
 function TtsResultDeletePage(props: Props) {
   const history = useHistory();
+  posthog.capture('$pageview');
 
   let { token }: { token: string } = useParams();
 

packages/fakeyou.com/src/v2/view/pages/tts/tts_result_edit/TtsResultEditPage.tsx

@@ -7,6 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../../data/animation";
+import posthog from 'posthog-js'
 
 const DEFAULT_VISIBILITY = "public";
 
@@ -58,6 +59,7 @@ interface Props {
 
 function TtsResultEditPage(props: Props) {
   let { token }: { token: string } = useParams();
+  posthog.capture('$pageview');
 
   const history = useHistory();
 

packages/fakeyou.com/src/v2/view/pages/tts/tts_result_view/TtsResultViewPage.tsx

@@ -41,6 +41,7 @@ import { BackLink } from "../../../_common/BackLink";
 import { TextExpander } from "../../../_common/TextExpander";
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
 import { CommentComponent } from "../../../_common/comments/CommentComponent";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -48,6 +49,7 @@ interface Props {
 
 function TtsResultViewPage(props: Props) {
   let { token }: { token: string } = useParams();
+  posthog.capture('$pageview');
 
   const [ttsInferenceResult, setTtsInferenceResult] = useState<
     TtsResult | undefined

packages/fakeyou.com/src/v2/view/pages/upload/UploadComponent.tsx

@@ -4,6 +4,7 @@ import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapp
 import { TtsModelUploadJob } from '@storyteller/components/src/jobs/TtsModelUploadJobs';
 import { W2lTemplateUploadJob } from '@storyteller/components/src/jobs/W2lTemplateUploadJobs';
 import { v4 } from 'uuid';
+import posthog from 'posthog-js'
 
 enum UploadType {
   TTS_MODEL,
@@ -145,6 +146,8 @@ class UploadComponent extends React.Component<Props, State> {
   }
 
   public render() {
+    posthog.capture('$pageview');
+
     if (!this.props.sessionWrapper.isLoggedIn()) {
       return (
         <div>

packages/fakeyou.com/src/v2/view/pages/upload/UploadTtsModelPage.tsx

@@ -11,6 +11,7 @@ import { Link } from "react-router-dom";
 import { WebUrl } from "../../../../common/WebUrl";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../data/animation";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -25,6 +26,7 @@ interface TtsModelUploadJobResponsePayload {
 
 function UploadTtsModelPage(props: Props) {
   let history = useHistory();
+  posthog.capture('$pageview');
 
   const [downloadUrl, setDownloadUrl] = useState("");
   const [title, setTitle] = useState("");

packages/fakeyou.com/src/v2/view/pages/upload/UploadVocoderPage.tsx

@@ -14,6 +14,7 @@ import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../data/animation";
 import { VocoderUploadJob } from "@storyteller/components/src/jobs/VocoderUploadJobs";
 import { SessionVocoderUploadResultList } from "../../_common/SessionVocoderUploadResultsList";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -22,6 +23,7 @@ interface Props {
 }
 
 function UploadVocoderPage(props: Props) {
+  posthog.capture('$pageview');
   let history = useHistory();
 
   const [downloadUrl, setDownloadUrl] = useState("");

packages/fakeyou.com/src/v2/view/pages/upload/UploadVoiceConversionModel.tsx

@@ -14,6 +14,7 @@ import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../data/animation";
 import { VoiceConversionModelUploadJob } from "@storyteller/components/src/jobs/VoiceConversionModelUploadJob";
 import { SessionVoiceConversionModelUploadResultList } from "../../_common/SessionVoiceConversionModelUploadResultsList";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -23,6 +24,7 @@ interface Props {
 
 function UploadVoiceConversionModel(props: Props) {
   let history = useHistory();
+  posthog.capture('$pageview');
 
   const [downloadUrl, setDownloadUrl] = useState("");
   const [title, setTitle] = useState("");

packages/fakeyou.com/src/v2/view/pages/upload/UploadW2lPhotoPage.tsx

@@ -9,6 +9,7 @@ import { BackLink } from "../../_common/BackLink";
 import { WebUrl } from "../../../../common/WebUrl";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../data/animation";
+import posthog from 'posthog-js'
 
 interface W2lTemplateUploadJobResponsePayload {
   success: boolean;
@@ -23,6 +24,7 @@ interface Props {
 
 function UploadW2lPhotoPage(props: Props) {
   let history = useHistory();
+  posthog.capture('$pageview');
 
   const [downloadUrl, setDownloadUrl] = useState("");
   const [title, setTitle] = useState("");

packages/fakeyou.com/src/v2/view/pages/upload/UploadW2lVideoPage.tsx

@@ -9,6 +9,7 @@ import { BackLink } from "../../_common/BackLink";
 import { WebUrl } from "../../../../common/WebUrl";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../data/animation";
+import posthog from 'posthog-js'
 
 interface W2lTemplateUploadJobResponsePayload {
   success: boolean;
@@ -23,6 +24,7 @@ interface Props {
 
 function UploadW2lVideoPage(props: Props) {
   let history = useHistory();
+  posthog.capture('$pageview');
 
   const [downloadUrl, setDownloadUrl] = useState("");
   const [title, setTitle] = useState("");

packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx

@@ -33,6 +33,7 @@ import {
 import { SessionVoiceConversionResultsList } from "../../../_common/SessionVoiceConversionResultsList";
 import PitchShiftComponent from "./components/PitchShiftComponent";
 import PitchEstimateMethodComponent from "./components/PitchEstimateMethodComponent";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -58,6 +59,7 @@ interface Props {
 
 function VcModelListPage(props: Props) {
   usePrefixedDocumentTitle("Voice Conversion");
+  posthog.capture('$pageview');
 
   const [convertLoading, setConvertLoading] = useState(false);
   const [canConvert, setCanConvert] = useState(false);

packages/fakeyou.com/src/v2/view/pages/vocodes/VocodesPage.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import posthog from 'posthog-js'
+
 
 interface Props {
 }
 
 function VocodesPage(props: Props) {
+  posthog.capture('$pageview');
   return (
     <div className="content is-medium">
 

packages/fakeyou.com/src/v2/view/pages/w2l/w2l_result_delete/W2lResultDeletePage.tsx

@@ -10,6 +10,7 @@ import {
 } from "@storyteller/components/src/api/w2l/GetW2lResult";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../../data/animation";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -17,6 +18,7 @@ interface Props {
 
 function W2lResultDeletePage(props: Props) {
   const history = useHistory();
+  posthog.capture('$pageview');
 
   let { token } = useParams() as { token: string };
 

packages/fakeyou.com/src/v2/view/pages/w2l/w2l_result_edit/W2lResultEditPage.tsx

@@ -7,6 +7,7 @@ import { VisibleIconFc } from "../../../_icons/VisibleIcon";
 import { HiddenIconFc } from "../../../_icons/HiddenIcon";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../../data/animation";
+import posthog from 'posthog-js'
 
 const DEFAULT_VISIBILITY = "public";
 
@@ -58,6 +59,7 @@ interface Props {
 
 function W2lResultEditPage(props: Props) {
   let { token }: { token: string } = useParams();
+  posthog.capture('$pageview');
 
   const history = useHistory();
 

packages/fakeyou.com/src/v2/view/pages/w2l/w2l_result_view/W2lResultViewPage.tsx

@@ -21,6 +21,7 @@ import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../../data/animation";
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
 import { CommentComponent } from "../../../_common/comments/CommentComponent";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -29,6 +30,8 @@ interface Props {
 function W2lResultViewPage(props: Props) {
   let { token } = useParams() as { token: string };
 
+  posthog.capture('$pageview');
+
   const [w2lInferenceResult, setW2lInferenceResult] = useState<
     W2lResult | undefined
   >(undefined);

packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_approve/W2lTemplateApprovePage.tsx

@@ -12,6 +12,7 @@ import { GetW2lTemplateUseCount } from "@storyteller/components/src/api/w2l/GetW
 import { BackLink } from "../../../_common/BackLink";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../../data/animation";
+import posthog from 'posthog-js'
 
 const DEFAULT_APPROVED_STATE = true;
 
@@ -22,6 +23,8 @@ interface Props {
 function W2lTemplateApprovePage(props: Props) {
   const history = useHistory();
 
+  posthog.capture('$pageview');
+
   let { templateToken }: { templateToken: string } = useParams();
 
   const [w2lTemplate, setW2lTemplate] = useState<W2lTemplate | undefined>(

packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_delete/W2lTemplateDeletePage.tsx

@@ -12,6 +12,7 @@ import { GetW2lTemplateUseCount } from "@storyteller/components/src/api/w2l/GetW
 import { BackLink } from "../../../_common/BackLink";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../../data/animation";
+import posthog from 'posthog-js'
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -20,6 +21,8 @@ interface Props {
 function W2lTemplateDeletePage(props: Props) {
   const history = useHistory();
 
+  posthog.capture('$pageview');
+
   let { templateToken }: { templateToken: string } = useParams();
 
   const [w2lTemplate, setW2lTemplate] = useState<W2lTemplate | undefined>(

packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_edit/W2lTemplateEditPage.tsx

@@ -13,6 +13,7 @@ import {
 import { BackLink } from "../../../_common/BackLink";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../../data/animation";
+import posthog from 'posthog-js'
 
 const DEFAULT_VISIBILITY = "public";
 
@@ -25,6 +26,8 @@ function W2lTemplateEditPage(props: Props) {
 
   const history = useHistory();
 
+  posthog.capture('$pageview');
+
   const [w2lTemplate, setW2lTemplate] = useState<W2lTemplate | undefined>(
     undefined
   );

packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_list/W2lTemplateListPage.tsx

@@ -19,6 +19,7 @@ import { motion } from "framer-motion";
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
 import { PageHeader } from "../../../_common/PageHeader";
 import { faVideo } from "@fortawesome/pro-solid-svg-icons";
+import posthog from 'posthog-js'
 
 const Fade = require("react-reveal/Fade");
 
@@ -53,6 +54,8 @@ function W2lTemplateListPage(props: Props) {
   const [w2lTemplates, setW2lTemplates] = useState<Array<W2lTemplate>>([]);
   const [currentPageIndex, setCurrentPageIndex] = useState(0);
 
+  posthog.capture('$pageview');
+
   useEffect(() => {
     const api = new ApiConfig();
     const endpointUrl = api.listW2l();

packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_view/W2lTemplateViewPage.tsx

@@ -28,6 +28,7 @@ import { container, item, panel } from "../../../../../data/animation";
 import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
 import { CommentComponent } from "../../../_common/comments/CommentComponent";
+import posthog from 'posthog-js'
 
 interface EnqueueJobResponsePayload {
   success: boolean;
@@ -43,6 +44,8 @@ interface Props {
 function W2lTemplateViewPage(props: Props) {
   let { templateSlug }: { templateSlug: string } = useParams();
 
+  posthog.capture('$pageview');
+
   // Ajax
   const [w2lTemplate, setW2lTemplate] = useState<W2lTemplate | undefined>(
     undefined

yarn.lock

@@ -4379,6 +4379,7 @@ __metadata:
     howler: ^2.2.0
     i18next: ^21.6.11
     js-cookie: ^3.0.1
+    posthog-js: ^1.73.1
     pretty-num: ^0.5.2
     query-string: ^8.1.0
     react: ^16.13.1
@@ -10428,6 +10429,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fflate@npm:^0.4.1":
+  version: 0.4.8
+  resolution: "fflate@npm:0.4.8"
+  checksum: 29d8cbe44d5e7f53e7f5a160ac7f9cc025480c7b3bfd85c5f898cbe20dfa2dad4732daa534982664bf30b35896a90af44ea33ede5d94c5ffd1b8b0c0a0a56ca2
+  languageName: node
+  linkType: hard
+
 "figgy-pudding@npm:^3.5.1":
   version: 3.5.2
   resolution: "figgy-pudding@npm:3.5.2"
@@ -16555,6 +16563,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"posthog-js@npm:^1.73.1":
+  version: 1.73.1
+  resolution: "posthog-js@npm:1.73.1"
+  dependencies:
+    fflate: ^0.4.1
+  checksum: 0490caeed064502e8acc0c5d13ac09cb67b612dbf921ed0e0f203aabb0d48fee103b9821dd87bea34aabac2a0919b1d76f64b611d16968cd63ab768e1381bc00
+  languageName: node
+  linkType: hard
+
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"