From 59922623bb5294d395f26ded83b6cca170580932 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Sat, 29 Jul 2023 17:30:40 -0400
Subject: [PATCH 1/2] remove old unused analytics

---
 packages/fakeyou.com/public/index.html | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/packages/fakeyou.com/public/index.html b/packages/fakeyou.com/public/index.html
index dab783eb7..357a0b2f2 100644
--- a/packages/fakeyou.com/public/index.html
+++ b/packages/fakeyou.com/public/index.html
@@ -81,20 +81,6 @@
     <!-- Include this to make the og:image larger -->
     <meta name="twitter:card" content="summary_large_image" />
 
-    <!-- Global site tag (gtag.js) - Google Analytics 
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=UA-32811180-4"
-    ></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-      gtag("config", "UA-32811180-4");
-    </script>-->
-
     <!-- Google tag (gtag.js) -->
     <!-- This replaces old universal analytics. -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-525G5MXFJG"></script>
@@ -117,12 +103,6 @@
       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"

From 4a2a9e007ab12674f7ceb9317eece5ecee896dce Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Sat, 29 Jul 2023 18:23:15 -0400
Subject: [PATCH 2/2] Wrap Posthog with fascade that allows us to control

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

diff --git a/packages/components/src/analytics/PosthogClient.ts b/packages/components/src/analytics/PosthogClient.ts
new file mode 100644
index 000000000..e883d19dc
--- /dev/null
+++ b/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);
+    }
+  }
+}
diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx
index 01b7f8a40..9d8455cfb 100644
--- a/packages/fakeyou.com/src/App.tsx
+++ b/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,
diff --git a/packages/fakeyou.com/src/common/Analytics.ts b/packages/fakeyou.com/src/common/Analytics.ts
index 3f2e08743..e5443fb3b 100644
--- a/packages/fakeyou.com/src/common/Analytics.ts
+++ b/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,
diff --git a/packages/fakeyou.com/src/index.tsx b/packages/fakeyou.com/src/index.tsx
index e25d68aee..ae2ac2e59 100644
--- a/packages/fakeyou.com/src/index.tsx
+++ b/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>
diff --git a/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx b/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx
index ec9f195a9..10adb5de4 100644
--- a/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx
+++ b/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("/");
   };
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 14153e2e0..7919e99b4 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,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 (
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 45985fe30..27ef2d95a 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,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 (
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 5921b8e8b..c76ef2328 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,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 (
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 bb0a35b7a..c15526bce 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,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 (
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 5eba4820b..05f28dd15 100644
--- a/packages/fakeyou.com/src/v2/view/pages/category/CreateCategoryPage.tsx
+++ b/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("");
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 006008894..1a66853a5 100644
--- a/packages/fakeyou.com/src/v2/view/pages/channels/Channels.tsx
+++ b/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}>
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 2aeef8c5e..4431b59f2 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,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");
 
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 bb52910d1..44ed4f4e6 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,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("");
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 7effabc8f..403cdb71e 100644
--- a/packages/fakeyou.com/src/v2/view/pages/contest/CommunityCommissionsPage.tsx
+++ b/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}>
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 32e533a8b..71d0f6aab 100644
--- a/packages/fakeyou.com/src/v2/view/pages/contribute/ContributeIndexPage.tsx
+++ b/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 = (
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 1c0977098..b7ac7918b 100644
--- a/packages/fakeyou.com/src/v2/view/pages/firehose/FirehoseEventListPage.tsx
+++ b/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",
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 a78a3689f..d11856ce7 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
+++ b/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 = <></>;
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 f70f81d05..399adeab1 100644
--- a/packages/fakeyou.com/src/v2/view/pages/leaderboard/LeaderboardPage.tsx
+++ b/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();
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 037a838d3..f783d05cf 100644
--- a/packages/fakeyou.com/src/v2/view/pages/login/LoginPage.tsx
+++ b/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("");
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 17675d897..cd154f01a 100644
--- a/packages/fakeyou.com/src/v2/view/pages/news/NewsPage.tsx
+++ b/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: "",
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 d9180d156..bce76cfef 100644
--- a/packages/fakeyou.com/src/v2/view/pages/patrons/PatronPage.tsx
+++ b/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}>
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 75d1f7824..2f667298e 100644
--- a/packages/fakeyou.com/src/v2/view/pages/premium/CheckoutCancelPage.tsx
+++ b/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}>
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 567ac9058..32aed4755 100644
--- a/packages/fakeyou.com/src/v2/view/pages/premium/CheckoutSuccessPage.tsx
+++ b/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}>
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 588df75b2..123096868 100644
--- a/packages/fakeyou.com/src/v2/view/pages/premium/PortalSuccessPage.tsx
+++ b/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}>
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 814a561d1..260528201 100644
--- a/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx
+++ b/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();
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 0a3888a75..998675c1b 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,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("");
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 b31a2d562..ecb82a014 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,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();
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 7b3c45667..34d137f98 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,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}`;
 
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 b6da40db4..ad9e218f2 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,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();
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 416b07e71..5a573e190 100644
--- a/packages/fakeyou.com/src/v2/view/pages/signup/SignupPage.tsx
+++ b/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;
 
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 7fe625c1c..2aaae5aae 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,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);
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 a8ae26ff3..40ad4eb35 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,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 };
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 9709c1578..cf83aa694 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,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();
 
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 88a2d2e17..bc3e8f60b 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,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);
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 61570c1ae..6d4f47536 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,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>(
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 5e184735e..e39413941 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,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();
 
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 100cabde2..15808360f 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,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();
 
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 8b23ea5d3..4ecbb758c 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,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
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 687689543..0778c8a8f 100644
--- a/packages/fakeyou.com/src/v2/view/pages/upload/UploadComponent.tsx
+++ b/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 (
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 3e38a312b..b011a6097 100644
--- a/packages/fakeyou.com/src/v2/view/pages/upload/UploadTtsModelPage.tsx
+++ b/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("");
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 9fb5f0e6b..6b5debd14 100644
--- a/packages/fakeyou.com/src/v2/view/pages/upload/UploadVocoderPage.tsx
+++ b/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("");
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 8db1d0d21..83a7c516b 100644
--- a/packages/fakeyou.com/src/v2/view/pages/upload/UploadVoiceConversionModel.tsx
+++ b/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("");
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 abd2fc897..8e4352872 100644
--- a/packages/fakeyou.com/src/v2/view/pages/upload/UploadW2lPhotoPage.tsx
+++ b/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("");
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 3107263e6..98fa7d388 100644
--- a/packages/fakeyou.com/src/v2/view/pages/upload/UploadW2lVideoPage.tsx
+++ b/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("");
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 d7287c342..373690fb4 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,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);
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 163631b71..b10d5be56 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vocodes/VocodesPage.tsx
+++ b/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">
 
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 fe06e91f4..32b5c2ccd 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,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 };
 
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 127e1c1e5..c751ae20a 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,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();
 
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 434c60b30..97761141b 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,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
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 f3994643c..dda63ef6e 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,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();
 
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 fbf7b4fe8..eb62943b4 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,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();
 
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 226f4dbfd..2db769576 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,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
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 9b7230d6c..bddbce80c 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,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();
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 a25f93e34..492ef3f94 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,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>(