Merge pull request #324 from storytold/oct-27-mithoo

classes for sharing links, remove unused analytics methods, simple ad…

packages/fakeyou.com/src/App.tsx

@@ -65,6 +65,7 @@ import { InferenceJobs } from "components/providers";
 // This new instance uses the Locize paid service to manage translation strings on their website. It's automated,
 // can easily sync to version control, and makes translation easy to maintain across a wide number of languages.
 export const i18n2 = i18n.createInstance();
+declare const window: Window & { dataLayer: Record<string, unknown>[]; };
 
 // OLD i18n-next instance
 // This instance of i18n-next should not be used for new translations going forward.
@@ -296,6 +297,9 @@ class App extends React.Component<Props, State> {
       // Track only logged-in users (for now)
       PosthogClient.enablePosthog();
       PosthogClient.setUsername(username);
+        window.dataLayer.push({
+          'user_id': username,
+        });
     }
     this.setState({
       sessionWrapper: sessionWrapper,

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

@@ -2,11 +2,11 @@ import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClie
 
 /**
  * Send Analytics to Google Analytics.
- * 
+ *
  * Keeping track of events in a singular space lets us easily update them and keep track of what we're analyzing at a high level.
- * 
+ *
  * Currently we use Universal Analytics (UA), but support for that ends July 2023. We need to update to Google Analytics 4 (GA4).
- * 
+ *
  * Here is some reading material:
  *  - [Events usage in UA - really good resource on how to bucket events](https://support.google.com/analytics/answer/1033068)
  *  - [GTag events for multiple Google products: UA, GA4, etc.](https://developers.google.com/tag-platform/devguides/events)
@@ -14,7 +14,7 @@ import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClie
  */
 
 class Analytics {
-  // NB: DO NOT CHANGE! 
+  // NB: DO NOT CHANGE!
   // These should be stable values for analytics.
   private static readonly ACCOUNT = "account";
   private static readonly PREMIUM = "premium";
@@ -234,43 +234,13 @@ class Analytics {
   }
 
   static voiceConversionClickDownload() {
-    Analytics.sendCategorizedEvent(this.VOICE_CONVERSION, 'click_download');
-  }
-
-  // ========== UI ==========
-
-  static uiTurnOnAnimations() {
-    Analytics.sendCategorizedEvent(this.UI, 'turn_on_animations');
-  }
-
-  static uiTurnOffAnimations() {
-    Analytics.sendCategorizedEvent(this.UI, 'turn_off_animations');
+    Analytics.sendCategorizedEvent(this.VOICE_CONVERSION, "click_download");
   }
 
   // ========== TOPBAR ==========
 
   static topbarClickPricing() {
-    Analytics.sendCategorizedEvent(this.TOPBAR, 'click_pricing');
-  }
-
-  static topbarClickVoiceClone() {
-    Analytics.sendCategorizedEvent(this.TOPBAR, 'click_voice_clone');
-  }
-
-  static topbarClickAbout() {
-    Analytics.sendCategorizedEvent(this.TOPBAR, 'click_about');
-  }
-
-  static topbarClickTerms() {
-    Analytics.sendCategorizedEvent(this.TOPBAR, 'click_terms');
-  }
-
-  static topbarClickChannels() {
-    Analytics.sendCategorizedEvent(this.TOPBAR, 'click_channels');
-  }
-
-  static topbarClickNews() {
-    Analytics.sendCategorizedEvent(this.TOPBAR, 'click_news');
+    Analytics.sendCategorizedEvent(this.TOPBAR, "click_pricing");
   }
 
   // ========== (impl) ==========

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

@@ -634,6 +634,7 @@ function TtsModelViewPage(props: Props) {
             <TwitterShareButton
               title={shareTitle}
               url={shareLink}
+              className="ga-share-twitter"
               onClick={() => {
                 Analytics.ttsModelPageClickShareTwitter();
               }}
@@ -643,6 +644,7 @@ function TtsModelViewPage(props: Props) {
             <FacebookShareButton
               quote={shareTitle}
               url={shareLink}
+              className="ga-share-facebook"
               onClick={() => {
                 Analytics.ttsModelPageClickShareFacebook();
               }}
@@ -652,6 +654,7 @@ function TtsModelViewPage(props: Props) {
             <RedditShareButton
               title={shareTitle}
               url={shareLink}
+              className="ga-share-reddit"
               onClick={() => {
                 Analytics.ttsModelPageClickShareReddit();
               }}
@@ -661,6 +664,7 @@ function TtsModelViewPage(props: Props) {
             <WhatsappShareButton
               title={shareTitle}
               url={shareLink}
+              className="ga-share-whatsapp"
               onClick={() => {
                 Analytics.ttsModelPageClickShareWhatsapp();
               }}
@@ -680,7 +684,7 @@ function TtsModelViewPage(props: Props) {
               onClick={handleCopyLink}
               id="copyBtn"
               type="button"
-              className="btn btn-primary"
+              className="btn btn-primary ga-share-clipboard"
             >
               Copy
             </button>