Wrap Posthog with fascade that allows us to control

packages/components/src/analytics/PosthogClient.ts

@@ -0,0 +1,50 @@
+
+import posthog from 'posthog-js'
+
+/**
+ * Since Posthog costs a lot of money, we'll use this interface to mediate when to 
+ * turn on Posthog calls.
+ */
+export class PosthogClient {
+
+  private static POSTHOG_ENABLED : boolean = false;
+
+  public static enablePosthog() {
+    if (PosthogClient.isEnabled()) {
+      return;
+    }
+    PosthogClient.POSTHOG_ENABLED = true;
+    posthog.init('phc_x6IRdmevMt4XAoJqx9tCmwDiaQkEkD48c0aLmuXMOvu', { 
+      api_host: 'https://app.posthog.com' 
+    })
+  }
+
+  public static isEnabled() : boolean {
+    return PosthogClient.POSTHOG_ENABLED;
+  }
+
+  public static setUsername(username: string) {
+    if (PosthogClient.isEnabled()) {
+      posthog.identify(username, {});
+    }
+  }
+
+  // Disassociate any identity (eg. on logout)
+  public static reset() {
+    if (PosthogClient.isEnabled()) {
+      posthog.reset(); 
+    }
+  }
+
+  public static recordPageview() {
+    if (PosthogClient.isEnabled()) {
+      posthog.capture('$pageview');
+    }
+  }
+
+  public static recordAction(actionName: string) {
+    if (PosthogClient.isEnabled()) {
+      posthog.capture(actionName);
+    }
+  }
+}

packages/fakeyou.com/src/App.tsx

@@ -10,6 +10,7 @@ import { Language } from "@storyteller/components/src/i18n/Language";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import { PageContainer } from "./v2/view/PageContainer";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
 import {
   TtsInferenceJob,
@@ -48,7 +49,6 @@ import { FrontendInferenceJobType, InferenceJob } from "@storyteller/components/
 import { GetModelInferenceJobStatus, GetModelInferenceJobStatusIsOk } from "@storyteller/components/src/api/model_inference/GetModelInferenceJobStatus";
 import { VoiceConversionModelUploadJob } from "@storyteller/components/src/jobs/VoiceConversionModelUploadJob";
 import { VoiceConversionModelListItem } from "@storyteller/components/src/api/voice_conversion/ListVoiceConversionModels";
-import posthog from 'posthog-js'
 
 i18n
   .use(initReactI18next) // passes i18n down to react-i18next
@@ -260,7 +260,9 @@ class App extends React.Component<Props, State> {
     const sessionWrapper = await SessionWrapper.lookupSession();
     const username = sessionWrapper.getDisplayName();
     if (username !== undefined) {
-      posthog.identify(username, {});
+      // Track only logged-in users (for now)
+      PosthogClient.enablePosthog();
+      PosthogClient.setUsername(username);
     }
     this.setState({
       sessionWrapper: sessionWrapper,

packages/fakeyou.com/src/common/Analytics.ts

@@ -1,4 +1,4 @@
-import posthog from 'posthog-js'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 /**
  * Send Analytics to Google Analytics.
@@ -284,7 +284,7 @@ class Analytics {
   }
 
   private static sendCategorizedEvent(eventCategory: string, actionName: string, eventLabel?: string, value?: number) {
-    posthog.capture(actionName);
+    PosthogClient.recordAction(actionName);
 
     gtag('event', actionName, {
       'event_category': eventCategory,

packages/fakeyou.com/src/index.tsx

@@ -2,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 const IS_IOS : boolean = /iPad|iPhone|iPod/.test(navigator.platform || "");
 
@@ -30,8 +30,10 @@ 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);
 
+// NB: Posthog turned off for most users (anonymous users) due to cost.
+// We'll track for logged-in users only
 // Posthog analytics
-posthog.init('phc_x6IRdmevMt4XAoJqx9tCmwDiaQkEkD48c0aLmuXMOvu', { api_host: 'https://app.posthog.com' })
+// posthog.init('phc_x6IRdmevMt4XAoJqx9tCmwDiaQkEkD48c0aLmuXMOvu', { api_host: 'https://app.posthog.com' })
 
 ReactDOM.render(
   <React.StrictMode>

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { t } from "i18next";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 import { Link, useHistory } from "react-router-dom";
 import { WebUrl } from "../../../common/WebUrl";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -31,7 +32,6 @@ 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
@@ -91,7 +91,7 @@ function TopNav(props: Props) {
     await Logout();
     props.querySessionCallback();
     props.querySessionSubscriptionsCallback();
-    posthog.reset();
+    PosthogClient.reset();
     Analytics.accountLogout();
     history.push("/");
   };

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

@@ -3,12 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {}
 
 function AboutPage(props: Props) {
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
   usePrefixedDocumentTitle("About Us");
 
   return (

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

@@ -4,12 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {}
 
 function GuidePage(props: Props) {
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
   usePrefixedDocumentTitle("Guide to all things Deep Fake");
 
   return (

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

@@ -2,12 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {}
 
 function PrivacyPage(props: Props) {
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
   usePrefixedDocumentTitle("Privacy Statement");
 
   return (

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

@@ -4,12 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {}
 
 function TermsPage(props: Props) {
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
   usePrefixedDocumentTitle("Terms of Use");
 
   return (

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

@@ -12,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 const DEFAULT_CAN_DIRECTLY_HAVE_MODELS = true;
 const DEFAULT_CAN_HAVE_SUBCATEGORIES = false;
@@ -24,7 +24,7 @@ interface Props {
 
 function CreateCategoryPage(props: Props) {
   let history = useHistory();
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   // Request
   const [name, setName] = useState("");

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

@@ -5,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -14,7 +14,7 @@ interface Props {
 
 function ChannelsPage(props: Props) {
   usePrefixedDocumentTitle("Channels");
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   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,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 const PAGE_MODEL_TOKENS = new Set<string>([
   "TM:pmd1wm3kf6az", // Development: "Fake Donald Trump #1"
@@ -108,7 +108,7 @@ function TrumpTtsPage(props: Props) {
   //Loading spinning icon
   const [loading, setLoading] = useState(false);
   const [isAudioLimitAlertVisible, setAudioLimitAlertVisible] = useState(false);
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   usePrefixedDocumentTitle("Donald Trump TTS and Donald Trump AI Voice");
 

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

@@ -26,13 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {}
 
 function VoiceCloneRequestPage(props: Props) {
   usePrefixedDocumentTitle("Create a Custom Voice Clone with Deep Fake TTS");
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   // Contact
   const [emailAddress, setEmailAddress] = useState("");

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

@@ -6,13 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {}
 
 function CommunityCommissionsPage(props: Props) {
   usePrefixedDocumentTitle("Voice to Voice Community Commissions");
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>

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

@@ -23,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -39,7 +39,7 @@ function ContributeIndexPage(props: Props) {
     : t("pages.contributeIndex.buttonSuggestCategory");
 
   usePrefixedDocumentTitle("Contribute to FakeYou");
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   const title = <>{t("pages.contributeIndex.heroTitle")}</>;
   const subText = (

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

@@ -18,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 const Fade = require("react-reveal/Fade");
 
@@ -64,7 +64,7 @@ function FirehoseEventListPage(props: Props) {
   const fetchEvents = () => {
     const api = new ApiConfig();
     const endpointUrl = api.firehoseEvents();
-    posthog.capture('$pageview');
+    PosthogClient.recordPageview();
 
     fetch(endpointUrl, {
       method: "GET",

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

@@ -14,7 +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 { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 // import {
 //   faFileArrowUp,
 //   faMicrophone,
@@ -28,7 +28,7 @@ interface Props {
 }
 
 function LandingPage(props: Props) {
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   let signUpButton = <></>;
   let viewPricingButton = <></>;

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

@@ -15,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -33,7 +33,7 @@ function LeaderboardPage(props: Props) {
   >(undefined);
   const [retryCount, setRetryCount] = useState(0);
   
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   const getLeaderboard = useCallback(async () => {
     const leaderboardReponse = await GetLeaderboard();

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

@@ -13,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -23,7 +23,7 @@ interface Props {
 
 function LoginPage(props: Props) {
   let history = useHistory();
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   const [password, setPassword] = useState("");
   const [usernameOrEmail, setUsernameOrEmail] = useState("");

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

@@ -5,13 +5,12 @@ import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session
 import { container, item } from "../../../../data/animation";
 import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
 import { TwitchPlayer, TwitchChat } from "react-twitch-embed";
-//import axios from "axios";
 import { Link } from "react-router-dom";
 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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -44,7 +43,7 @@ const TWITCH_CHANNEL = "FakeYouLabs";
 
 function NewsPage(props: Props) {
   usePrefixedDocumentTitle("AI News");
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   //const [stream, setStream] = useState<StreamInfo>({
   //  broadcaster_name: "",

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

@@ -8,7 +8,7 @@ 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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -16,7 +16,7 @@ interface Props {
 
 function PatronPage(props: Props) {
   usePrefixedDocumentTitle("Thank you to our Patrons!");
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>

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

@@ -3,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -11,7 +11,7 @@ interface Props {
 }
 
 function CheckoutCancelPage(props: Props) {
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>

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

@@ -3,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -11,7 +11,7 @@ interface Props {
 }
 
 function CheckoutSuccessPage(props: Props) {
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>

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

@@ -3,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -11,7 +11,7 @@ interface Props {
 }
 
 function PortalSuccessPage(props: Props) {
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>

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

@@ -17,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -26,7 +26,7 @@ interface Props {
 
 function PricingPage(props: Props) {
   let history = useHistory();
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   const beginStripePortalFlow = async (): Promise<boolean> => {
     const response = await CreateStripePortalRedirect();

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

@@ -3,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -47,7 +47,7 @@ const radioButtonsWhy = [
 
 function ProductUsageInfoPage(props: Props) {
   usePrefixedDocumentTitle("Product Usage Survey");
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   const [selectedOptionWho, setSelectedOptionWho] = useState("");
   const [selectedOptionWhy, setSelectedOptionWhy] = useState("");

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

@@ -11,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -44,7 +44,7 @@ function ProfileBanFc(props: Props) {
   }, [username, getUserProfile]);
 
   const handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>): boolean => {
-    posthog.capture('$pageview');
+    PosthogClient.recordPageview();
     ev.preventDefault();
 
     const api = new ApiConfig();

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

@@ -21,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 const DEFAULT_VISIBILITY = "public";
 
@@ -62,7 +62,7 @@ interface UserPayload {
 
 function ProfileEditFc(props: Props) {
   const { username } = useParams() as { username: string };
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
   
   const userProfilePage = `/profile/${username}`;
 

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

@@ -40,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
    sessionWrapper: SessionWrapper;
@@ -53,7 +53,7 @@ interface Props {
 
 function ProfilePage(this: any, props: Props) {
    const { username }: { username: string } = useParams();
-   posthog.capture('$pageview');
+   PosthogClient.recordPageview();
 
    const { pathname } = useLocation();
    const { url } = useRouteMatch();

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

@@ -17,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 enum FieldTriState {
   EMPTY_FALSE,
@@ -58,7 +58,7 @@ function SignupPage(props: Props) {
 
   const handleUsernameChange = (ev: React.FormEvent<HTMLInputElement>) => {
     ev.preventDefault();
-    posthog.capture('$pageview');
+    PosthogClient.recordPageview();
 
     const newUsername = (ev.target as HTMLInputElement).value;
 

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

@@ -34,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -42,7 +42,7 @@ interface Props {
 
 function TtsEditCategoriesPage(props: Props) {
   let { token } = useParams() as { token: string };
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   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,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface TtsModelViewResponsePayload {
   success: boolean;
@@ -46,7 +46,7 @@ interface Props {
 }
 
 function TtsModelDeletePage(props: Props) {
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
   const history = useHistory();
 
   let { token } = useParams() as { token: string };

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

@@ -38,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 const DEFAULT_VISIBILITY = "public";
 
@@ -54,7 +54,7 @@ interface Props {
 
 function TtsModelEditPage(props: Props) {
   let { token } = useParams() as { token: string };
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   const history = useHistory();
 

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

@@ -66,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 export interface EnqueueJobResponsePayload {
   success: boolean;
@@ -135,7 +135,7 @@ interface Props {
 }
 
 function TtsModelListPage(props: Props) {
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   //Loading spinning icon
   const [loading, setLoading] = useState(false);

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

@@ -67,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -82,7 +82,7 @@ interface Props {
 
 function TtsModelViewPage(props: Props) {
   let { token } = useParams() as { token: string };
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   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,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface TtsInferenceResultResponsePayload {
   success: boolean;
@@ -54,7 +54,7 @@ interface Props {
 
 function TtsResultDeletePage(props: Props) {
   const history = useHistory();
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   let { token }: { token: string } = useParams();
 

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

@@ -7,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 const DEFAULT_VISIBILITY = "public";
 
@@ -59,7 +59,7 @@ interface Props {
 
 function TtsResultEditPage(props: Props) {
   let { token }: { token: string } = useParams();
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   const history = useHistory();
 

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

@@ -41,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -49,7 +49,7 @@ interface Props {
 
 function TtsResultViewPage(props: Props) {
   let { token }: { token: string } = useParams();
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   const [ttsInferenceResult, setTtsInferenceResult] = useState<
     TtsResult | undefined

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

@@ -4,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 enum UploadType {
   TTS_MODEL,
@@ -146,7 +146,7 @@ class UploadComponent extends React.Component<Props, State> {
   }
 
   public render() {
-    posthog.capture('$pageview');
+    PosthogClient.recordPageview();
 
     if (!this.props.sessionWrapper.isLoggedIn()) {
       return (

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

@@ -11,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -26,7 +26,7 @@ interface TtsModelUploadJobResponsePayload {
 
 function UploadTtsModelPage(props: Props) {
   let history = useHistory();
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   const [downloadUrl, setDownloadUrl] = useState("");
   const [title, setTitle] = useState("");

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

@@ -14,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -23,7 +23,7 @@ interface Props {
 }
 
 function UploadVocoderPage(props: Props) {
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
   let history = useHistory();
 
   const [downloadUrl, setDownloadUrl] = useState("");

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

@@ -14,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -24,7 +24,7 @@ interface Props {
 
 function UploadVoiceConversionModel(props: Props) {
   let history = useHistory();
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   const [downloadUrl, setDownloadUrl] = useState("");
   const [title, setTitle] = useState("");

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

@@ -9,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface W2lTemplateUploadJobResponsePayload {
   success: boolean;
@@ -24,7 +24,7 @@ interface Props {
 
 function UploadW2lPhotoPage(props: Props) {
   let history = useHistory();
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   const [downloadUrl, setDownloadUrl] = useState("");
   const [title, setTitle] = useState("");

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

@@ -9,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface W2lTemplateUploadJobResponsePayload {
   success: boolean;
@@ -24,7 +24,7 @@ interface Props {
 
 function UploadW2lVideoPage(props: Props) {
   let history = useHistory();
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   const [downloadUrl, setDownloadUrl] = useState("");
   const [title, setTitle] = useState("");

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

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

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

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

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

@@ -10,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -18,7 +18,7 @@ interface Props {
 
 function W2lResultDeletePage(props: Props) {
   const history = useHistory();
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   let { token } = useParams() as { token: string };
 

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

@@ -7,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 const DEFAULT_VISIBILITY = "public";
 
@@ -59,7 +59,7 @@ interface Props {
 
 function W2lResultEditPage(props: Props) {
   let { token }: { token: string } = useParams();
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   const history = useHistory();
 

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

@@ -21,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -30,7 +30,7 @@ interface Props {
 function W2lResultViewPage(props: Props) {
   let { token } = useParams() as { token: string };
 
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   const [w2lInferenceResult, setW2lInferenceResult] = useState<
     W2lResult | undefined

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

@@ -12,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 const DEFAULT_APPROVED_STATE = true;
 
@@ -23,7 +23,7 @@ interface Props {
 function W2lTemplateApprovePage(props: Props) {
   const history = useHistory();
 
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   let { templateToken }: { templateToken: string } = useParams();
 

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

@@ -12,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -21,7 +21,7 @@ interface Props {
 function W2lTemplateDeletePage(props: Props) {
   const history = useHistory();
 
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   let { templateToken }: { templateToken: string } = useParams();
 

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

@@ -13,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 const DEFAULT_VISIBILITY = "public";
 
@@ -26,7 +26,7 @@ function W2lTemplateEditPage(props: Props) {
 
   const history = useHistory();
 
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   const [w2lTemplate, setW2lTemplate] = useState<W2lTemplate | undefined>(
     undefined

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

@@ -19,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 const Fade = require("react-reveal/Fade");
 
@@ -54,7 +54,7 @@ function W2lTemplateListPage(props: Props) {
   const [w2lTemplates, setW2lTemplates] = useState<Array<W2lTemplate>>([]);
   const [currentPageIndex, setCurrentPageIndex] = useState(0);
 
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   useEffect(() => {
     const api = new ApiConfig();

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

@@ -28,7 +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'
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 
 interface EnqueueJobResponsePayload {
   success: boolean;
@@ -44,7 +44,7 @@ interface Props {
 function W2lTemplateViewPage(props: Props) {
   let { templateSlug }: { templateSlug: string } = useParams();
 
-  posthog.capture('$pageview');
+  PosthogClient.recordPageview();
 
   // Ajax
   const [w2lTemplate, setW2lTemplate] = useState<W2lTemplate | undefined>(