From 489e3aec9bc5ac9ca2b4ac3ff5fe794276caf6b5 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Mon, 24 Jul 2023 04:08:55 -0400
Subject: [PATCH] Add Posthog analytics

---
 packages/fakeyou.com/package.json               |  1 +
 packages/fakeyou.com/public/index.html          |  6 ++++++
 packages/fakeyou.com/src/index.tsx              |  4 ++++
 packages/fakeyou.com/src/v2/view/nav/TopNav.tsx |  2 ++
 .../view/pages/about/about_page/AboutPage.tsx   |  2 ++
 .../view/pages/about/guide_page/GuidePage.tsx   |  2 ++
 .../pages/about/privacy_page/PrivacyPage.tsx    |  2 ++
 .../view/pages/about/terms_page/TermsPage.tsx   |  2 ++
 .../view/pages/category/CreateCategoryPage.tsx  |  2 ++
 .../src/v2/view/pages/channels/Channels.tsx     |  2 ++
 .../view/pages/character/trump/TrumpTtsPage.tsx |  2 ++
 .../VoiceCloneRequestPage.tsx                   |  2 ++
 .../pages/contest/CommunityCommissionsPage.tsx  |  4 +++-
 .../pages/contribute/ContributeIndexPage.tsx    |  2 ++
 .../pages/firehose/FirehoseEventListPage.tsx    |  3 +++
 .../src/v2/view/pages/landing/LandingPage.tsx   |  3 +++
 .../view/pages/leaderboard/LeaderboardPage.tsx  |  3 +++
 .../src/v2/view/pages/login/LoginPage.tsx       |  2 ++
 .../src/v2/view/pages/news/NewsPage.tsx         |  3 ++-
 .../src/v2/view/pages/patrons/PatronPage.tsx    |  3 +++
 .../view/pages/premium/CheckoutCancelPage.tsx   |  3 +++
 .../view/pages/premium/CheckoutSuccessPage.tsx  |  3 +++
 .../v2/view/pages/premium/PortalSuccessPage.tsx |  3 +++
 .../src/v2/view/pages/premium/PricingPage.tsx   |  2 ++
 .../product_usage_info/ProductUsageInfoPage.tsx |  2 ++
 .../pages/profile/profile_ban/ProfileBanFc.tsx  |  2 ++
 .../profile/profile_edit/ProfileEditFc.tsx      |  3 +++
 .../pages/profile/profile_view/ProfilePage.tsx  |  3 +++
 .../src/v2/view/pages/signup/SignupPage.tsx     |  2 ++
 .../TtsEditCategoriesPage.tsx                   |  2 ++
 .../tts/tts_model_delete/TtsModelDeletePage.tsx |  2 ++
 .../tts/tts_model_edit/TtsModelEditPage.tsx     |  2 ++
 .../tts/tts_model_list/TtsModelListPage.tsx     |  3 +++
 .../tts/tts_model_view/TtsModelViewPage.tsx     |  2 ++
 .../tts_result_delete/TtsResultDeletePage.tsx   |  2 ++
 .../tts/tts_result_edit/TtsResultEditPage.tsx   |  2 ++
 .../tts/tts_result_view/TtsResultViewPage.tsx   |  2 ++
 .../v2/view/pages/upload/UploadComponent.tsx    |  3 +++
 .../v2/view/pages/upload/UploadTtsModelPage.tsx |  2 ++
 .../v2/view/pages/upload/UploadVocoderPage.tsx  |  2 ++
 .../pages/upload/UploadVoiceConversionModel.tsx |  2 ++
 .../v2/view/pages/upload/UploadW2lPhotoPage.tsx |  2 ++
 .../v2/view/pages/upload/UploadW2lVideoPage.tsx |  2 ++
 .../pages/vc/vc_model_list/VcModelListPage.tsx  |  2 ++
 .../src/v2/view/pages/vocodes/VocodesPage.tsx   |  3 +++
 .../w2l_result_delete/W2lResultDeletePage.tsx   |  2 ++
 .../w2l/w2l_result_edit/W2lResultEditPage.tsx   |  2 ++
 .../w2l/w2l_result_view/W2lResultViewPage.tsx   |  3 +++
 .../W2lTemplateApprovePage.tsx                  |  3 +++
 .../W2lTemplateDeletePage.tsx                   |  3 +++
 .../w2l_template_edit/W2lTemplateEditPage.tsx   |  3 +++
 .../w2l_template_list/W2lTemplateListPage.tsx   |  3 +++
 .../w2l_template_view/W2lTemplateViewPage.tsx   |  3 +++
 yarn.lock                                       | 17 +++++++++++++++++
 54 files changed, 147 insertions(+), 2 deletions(-)

diff --git a/packages/fakeyou.com/package.json b/packages/fakeyou.com/package.json
index e77693211e..5922ec1760 100644
--- a/packages/fakeyou.com/package.json
+++ b/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",
diff --git a/packages/fakeyou.com/public/index.html b/packages/fakeyou.com/public/index.html
index 791567c3b9..bfb5220f83 100644
--- a/packages/fakeyou.com/public/index.html
+++ b/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"
diff --git a/packages/fakeyou.com/src/index.tsx b/packages/fakeyou.com/src/index.tsx
index 16b95bd78a..e25d68aeec 100644
--- a/packages/fakeyou.com/src/index.tsx
+++ b/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
diff --git a/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx b/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx
index 33f6926cb7..ec9f195a91 100644
--- a/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx
+++ b/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("/");
   };
diff --git a/packages/fakeyou.com/src/v2/view/pages/about/about_page/AboutPage.tsx b/packages/fakeyou.com/src/v2/view/pages/about/about_page/AboutPage.tsx
index 23770f6bf5..14153e2e02 100644
--- a/packages/fakeyou.com/src/v2/view/pages/about/about_page/AboutPage.tsx
+++ b/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 (
diff --git a/packages/fakeyou.com/src/v2/view/pages/about/guide_page/GuidePage.tsx b/packages/fakeyou.com/src/v2/view/pages/about/guide_page/GuidePage.tsx
index fbe105464b..45985fe304 100644
--- a/packages/fakeyou.com/src/v2/view/pages/about/guide_page/GuidePage.tsx
+++ b/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 (
diff --git a/packages/fakeyou.com/src/v2/view/pages/about/privacy_page/PrivacyPage.tsx b/packages/fakeyou.com/src/v2/view/pages/about/privacy_page/PrivacyPage.tsx
index 8a121ea6e7..5921b8e8b9 100644
--- a/packages/fakeyou.com/src/v2/view/pages/about/privacy_page/PrivacyPage.tsx
+++ b/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 (
diff --git a/packages/fakeyou.com/src/v2/view/pages/about/terms_page/TermsPage.tsx b/packages/fakeyou.com/src/v2/view/pages/about/terms_page/TermsPage.tsx
index c095ffe25a..bb0a35b7ab 100644
--- a/packages/fakeyou.com/src/v2/view/pages/about/terms_page/TermsPage.tsx
+++ b/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 (
diff --git a/packages/fakeyou.com/src/v2/view/pages/category/CreateCategoryPage.tsx b/packages/fakeyou.com/src/v2/view/pages/category/CreateCategoryPage.tsx
index 62fdf058d6..5eba4820b8 100644
--- a/packages/fakeyou.com/src/v2/view/pages/category/CreateCategoryPage.tsx
+++ b/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("");
diff --git a/packages/fakeyou.com/src/v2/view/pages/channels/Channels.tsx b/packages/fakeyou.com/src/v2/view/pages/channels/Channels.tsx
index a11d76f5d9..0060088942 100644
--- a/packages/fakeyou.com/src/v2/view/pages/channels/Channels.tsx
+++ b/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}>
diff --git a/packages/fakeyou.com/src/v2/view/pages/character/trump/TrumpTtsPage.tsx b/packages/fakeyou.com/src/v2/view/pages/character/trump/TrumpTtsPage.tsx
index d8c277c421..2aeef8c5e2 100644
--- a/packages/fakeyou.com/src/v2/view/pages/character/trump/TrumpTtsPage.tsx
+++ b/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");
 
diff --git a/packages/fakeyou.com/src/v2/view/pages/clone_voice_requests/VoiceCloneRequestPage.tsx b/packages/fakeyou.com/src/v2/view/pages/clone_voice_requests/VoiceCloneRequestPage.tsx
index 798d9ebc60..bb52910d1c 100644
--- a/packages/fakeyou.com/src/v2/view/pages/clone_voice_requests/VoiceCloneRequestPage.tsx
+++ b/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("");
diff --git a/packages/fakeyou.com/src/v2/view/pages/contest/CommunityCommissionsPage.tsx b/packages/fakeyou.com/src/v2/view/pages/contest/CommunityCommissionsPage.tsx
index 63aac6dd73..7effabc8f7 100644
--- a/packages/fakeyou.com/src/v2/view/pages/contest/CommunityCommissionsPage.tsx
+++ b/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>
diff --git a/packages/fakeyou.com/src/v2/view/pages/contribute/ContributeIndexPage.tsx b/packages/fakeyou.com/src/v2/view/pages/contribute/ContributeIndexPage.tsx
index dbc68b4ff1..32e533a8be 100644
--- a/packages/fakeyou.com/src/v2/view/pages/contribute/ContributeIndexPage.tsx
+++ b/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 = (
diff --git a/packages/fakeyou.com/src/v2/view/pages/firehose/FirehoseEventListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/firehose/FirehoseEventListPage.tsx
index e7eaf0d461..1c0977098a 100644
--- a/packages/fakeyou.com/src/v2/view/pages/firehose/FirehoseEventListPage.tsx
+++ b/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",
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
index e397800a5f..a78a3689f7 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
+++ b/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 = <></>;
diff --git a/packages/fakeyou.com/src/v2/view/pages/leaderboard/LeaderboardPage.tsx b/packages/fakeyou.com/src/v2/view/pages/leaderboard/LeaderboardPage.tsx
index f519898ca4..f70f81d05f 100644
--- a/packages/fakeyou.com/src/v2/view/pages/leaderboard/LeaderboardPage.tsx
+++ b/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();
diff --git a/packages/fakeyou.com/src/v2/view/pages/login/LoginPage.tsx b/packages/fakeyou.com/src/v2/view/pages/login/LoginPage.tsx
index 5b0812b284..037a838d3f 100644
--- a/packages/fakeyou.com/src/v2/view/pages/login/LoginPage.tsx
+++ b/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("");
diff --git a/packages/fakeyou.com/src/v2/view/pages/news/NewsPage.tsx b/packages/fakeyou.com/src/v2/view/pages/news/NewsPage.tsx
index 43462a3789..17675d8970 100644
--- a/packages/fakeyou.com/src/v2/view/pages/news/NewsPage.tsx
+++ b/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: "",
diff --git a/packages/fakeyou.com/src/v2/view/pages/patrons/PatronPage.tsx b/packages/fakeyou.com/src/v2/view/pages/patrons/PatronPage.tsx
index b6e42bd38c..d9180d1565 100644
--- a/packages/fakeyou.com/src/v2/view/pages/patrons/PatronPage.tsx
+++ b/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}>
diff --git a/packages/fakeyou.com/src/v2/view/pages/premium/CheckoutCancelPage.tsx b/packages/fakeyou.com/src/v2/view/pages/premium/CheckoutCancelPage.tsx
index a9e858700a..75d1f78242 100644
--- a/packages/fakeyou.com/src/v2/view/pages/premium/CheckoutCancelPage.tsx
+++ b/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">
diff --git a/packages/fakeyou.com/src/v2/view/pages/premium/CheckoutSuccessPage.tsx b/packages/fakeyou.com/src/v2/view/pages/premium/CheckoutSuccessPage.tsx
index f8e872bcb0..567ac90586 100644
--- a/packages/fakeyou.com/src/v2/view/pages/premium/CheckoutSuccessPage.tsx
+++ b/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">
diff --git a/packages/fakeyou.com/src/v2/view/pages/premium/PortalSuccessPage.tsx b/packages/fakeyou.com/src/v2/view/pages/premium/PortalSuccessPage.tsx
index 346c280a57..588df75b22 100644
--- a/packages/fakeyou.com/src/v2/view/pages/premium/PortalSuccessPage.tsx
+++ b/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">
diff --git a/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx
index 5d657bd920..814a561d18 100644
--- a/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx
+++ b/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();
diff --git a/packages/fakeyou.com/src/v2/view/pages/product_usage_info/ProductUsageInfoPage.tsx b/packages/fakeyou.com/src/v2/view/pages/product_usage_info/ProductUsageInfoPage.tsx
index 9b88a00552..0a3888a750 100644
--- a/packages/fakeyou.com/src/v2/view/pages/product_usage_info/ProductUsageInfoPage.tsx
+++ b/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("");
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_ban/ProfileBanFc.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_ban/ProfileBanFc.tsx
index 0dcca57dce..b31a2d5622 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_ban/ProfileBanFc.tsx
+++ b/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();
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_edit/ProfileEditFc.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_edit/ProfileEditFc.tsx
index 60fafd0fec..7b3c456676 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_edit/ProfileEditFc.tsx
+++ b/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();
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/ProfilePage.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/ProfilePage.tsx
index 88f67aa709..b6da40db47 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/ProfilePage.tsx
+++ b/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();
 
diff --git a/packages/fakeyou.com/src/v2/view/pages/signup/SignupPage.tsx b/packages/fakeyou.com/src/v2/view/pages/signup/SignupPage.tsx
index 8adf87aee8..416b07e71a 100644
--- a/packages/fakeyou.com/src/v2/view/pages/signup/SignupPage.tsx
+++ b/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;
 
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_edit_categories/TtsEditCategoriesPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_edit_categories/TtsEditCategoriesPage.tsx
index be6a06bd17..7fe625c1c8 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_edit_categories/TtsEditCategoriesPage.tsx
+++ b/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);
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_delete/TtsModelDeletePage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_delete/TtsModelDeletePage.tsx
index 9edba49682..a8ae26ff3e 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_delete/TtsModelDeletePage.tsx
+++ b/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 };
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_edit/TtsModelEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_edit/TtsModelEditPage.tsx
index da91b1773b..9709c15784 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_edit/TtsModelEditPage.tsx
+++ b/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();
 
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
index 30a663aa90..88a2d2e17d 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
+++ b/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);
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_view/TtsModelViewPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_view/TtsModelViewPage.tsx
index 52bb433d9a..61570c1aef 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_view/TtsModelViewPage.tsx
+++ b/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>(
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_delete/TtsResultDeletePage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_delete/TtsResultDeletePage.tsx
index abf34c4070..5e184735ec 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_delete/TtsResultDeletePage.tsx
+++ b/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();
 
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_edit/TtsResultEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_edit/TtsResultEditPage.tsx
index 876adfe0be..100cabde28 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_edit/TtsResultEditPage.tsx
+++ b/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();
 
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_view/TtsResultViewPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_view/TtsResultViewPage.tsx
index 235a73f4c8..8b23ea5d33 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_view/TtsResultViewPage.tsx
+++ b/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
diff --git a/packages/fakeyou.com/src/v2/view/pages/upload/UploadComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/upload/UploadComponent.tsx
index a43f2f9e62..6876895435 100644
--- a/packages/fakeyou.com/src/v2/view/pages/upload/UploadComponent.tsx
+++ b/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>
diff --git a/packages/fakeyou.com/src/v2/view/pages/upload/UploadTtsModelPage.tsx b/packages/fakeyou.com/src/v2/view/pages/upload/UploadTtsModelPage.tsx
index 84a1017f42..3e38a312bf 100644
--- a/packages/fakeyou.com/src/v2/view/pages/upload/UploadTtsModelPage.tsx
+++ b/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("");
diff --git a/packages/fakeyou.com/src/v2/view/pages/upload/UploadVocoderPage.tsx b/packages/fakeyou.com/src/v2/view/pages/upload/UploadVocoderPage.tsx
index 6879ea161b..9fb5f0e6b4 100644
--- a/packages/fakeyou.com/src/v2/view/pages/upload/UploadVocoderPage.tsx
+++ b/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("");
diff --git a/packages/fakeyou.com/src/v2/view/pages/upload/UploadVoiceConversionModel.tsx b/packages/fakeyou.com/src/v2/view/pages/upload/UploadVoiceConversionModel.tsx
index 0367b8f0c9..8db1d0d217 100644
--- a/packages/fakeyou.com/src/v2/view/pages/upload/UploadVoiceConversionModel.tsx
+++ b/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("");
diff --git a/packages/fakeyou.com/src/v2/view/pages/upload/UploadW2lPhotoPage.tsx b/packages/fakeyou.com/src/v2/view/pages/upload/UploadW2lPhotoPage.tsx
index 691fd605a9..abd2fc897a 100644
--- a/packages/fakeyou.com/src/v2/view/pages/upload/UploadW2lPhotoPage.tsx
+++ b/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("");
diff --git a/packages/fakeyou.com/src/v2/view/pages/upload/UploadW2lVideoPage.tsx b/packages/fakeyou.com/src/v2/view/pages/upload/UploadW2lVideoPage.tsx
index 1e63bd0594..3107263e67 100644
--- a/packages/fakeyou.com/src/v2/view/pages/upload/UploadW2lVideoPage.tsx
+++ b/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("");
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx
index 8443b7d8b5..d7287c3425 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx
+++ b/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);
diff --git a/packages/fakeyou.com/src/v2/view/pages/vocodes/VocodesPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vocodes/VocodesPage.tsx
index 78408dfce8..163631b71c 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vocodes/VocodesPage.tsx
+++ b/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">
 
diff --git a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_result_delete/W2lResultDeletePage.tsx b/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_result_delete/W2lResultDeletePage.tsx
index f5769fd8fc..fe06e91f4a 100644
--- a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_result_delete/W2lResultDeletePage.tsx
+++ b/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 };
 
diff --git a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_result_edit/W2lResultEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_result_edit/W2lResultEditPage.tsx
index 7ad45995be..127e1c1e5f 100644
--- a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_result_edit/W2lResultEditPage.tsx
+++ b/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();
 
diff --git a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_result_view/W2lResultViewPage.tsx b/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_result_view/W2lResultViewPage.tsx
index c8920479b6..434c60b30d 100644
--- a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_result_view/W2lResultViewPage.tsx
+++ b/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);
diff --git a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_approve/W2lTemplateApprovePage.tsx b/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_approve/W2lTemplateApprovePage.tsx
index 0410726336..f3994643c3 100644
--- a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_approve/W2lTemplateApprovePage.tsx
+++ b/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>(
diff --git a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_delete/W2lTemplateDeletePage.tsx b/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_delete/W2lTemplateDeletePage.tsx
index f0a7a7ea98..fbf7b4fe82 100644
--- a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_delete/W2lTemplateDeletePage.tsx
+++ b/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>(
diff --git a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_edit/W2lTemplateEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_edit/W2lTemplateEditPage.tsx
index 55d79e4fdf..226f4dbfdd 100644
--- a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_edit/W2lTemplateEditPage.tsx
+++ b/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
   );
diff --git a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_list/W2lTemplateListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_list/W2lTemplateListPage.tsx
index 2079266148..9b7230d6c0 100644
--- a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_list/W2lTemplateListPage.tsx
+++ b/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();
diff --git a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_view/W2lTemplateViewPage.tsx b/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_view/W2lTemplateViewPage.tsx
index ae8eb058d7..a25f93e348 100644
--- a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_view/W2lTemplateViewPage.tsx
+++ b/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
diff --git a/yarn.lock b/yarn.lock
index 6115ff8a85..9367db1e64 100644
--- a/yarn.lock
+++ b/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"