From 4a2a9e007ab12674f7ceb9317eece5ecee896dce Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Sat, 29 Jul 2023 18:23:15 -0400 Subject: [PATCH] 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 0000000000..e883d19dc4 --- /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 01b7f8a40f..9d8455cfb0 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 { 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 3f2e087431..e5443fb3bd 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 e25d68aeec..ae2ac2e590 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( diff --git a/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx b/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx index ec9f195a91..10adb5de4a 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 14153e2e02..7919e99b4f 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 45985fe304..27ef2d95ab 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 5921b8e8b9..c76ef2328f 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 bb0a35b7ab..c15526bceb 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 5eba4820b8..05f28dd15b 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 0060088942..1a66853a50 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 = ( 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 2aeef8c5e2..4431b59f2f 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([ "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 bb52910d1c..44ed4f4e66 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 7effabc8f7..403cdb71ed 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 ( 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 32e533a8be..71d0f6aab9 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 1c0977098a..b7ac7918bf 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 a78a3689f7..d11856ce7a 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 f70f81d05f..399adeab1a 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 037a838d3f..f783d05cf6 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 17675d8970..cd154f01a8 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({ // 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 d9180d1565..bce76cfef6 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 ( 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 75d1f78242..2f667298e2 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 ( 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 567ac90586..32aed47557 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 ( 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 588df75b22..1230968680 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 ( 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 814a561d18..2605282010 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 => { 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 0a3888a750..998675c1bf 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 b31a2d5622..ecb82a014f 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): 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 7b3c456676..34d137f985 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 b6da40db47..ad9e218f24 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 416b07e71a..5a573e1906 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) => { 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 7fe625c1c8..2aaae5aae3 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(undefined); const [notFoundState, setNotFoundState] = useState(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 a8ae26ff3e..40ad4eb35e 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 9709c15784..cf83aa6946 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 88a2d2e17d..bc3e8f60b1 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 61570c1aef..6d4f475362 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(undefined); const [ttsModelUseCount, setTtsModelUseCount] = useState( 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 5e184735ec..e394139419 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 100cabde28..15808360f7 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 8b23ea5d33..4ecbb758cc 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 6876895435..0778c8a8f7 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 { } 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 3e38a312bf..b011a6097a 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 9fb5f0e6b4..6b5debd149 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 8db1d0d217..83a7c516b8 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 abd2fc897a..8e4352872f 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 3107263e67..98fa7d3882 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 d7287c3425..373690fb4f 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 163631b71c..b10d5be56e 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 (
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 fe06e91f4a..32b5c2ccdb 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 127e1c1e5f..c751ae20ad 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 434c60b30d..97761141b1 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 f3994643c3..dda63ef6e5 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 fbf7b4fe82..eb62943b4a 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 226f4dbfdd..2db7695766 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( 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 9b7230d6c0..bddbce80cc 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>([]); 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 a25f93e348..492ef3f94c 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(