added Google Analytic events to VideoMediaPage

src/website/packages/fakeyou.com/src/components/common/SocialButton/SocialButton.tsx

@@ -21,7 +21,8 @@ export type Socials =
   | "download";
 
 interface SocialButtonProps {
-  downloadLink?: string;
+  bucketUrl?: string;
+  GApage?: string;
   hideLabel?: boolean;
   social: Socials;
   shareUrl?: string;
@@ -29,7 +30,8 @@ interface SocialButtonProps {
 }
 
 export default function SocialButton({
-  downloadLink,
+  bucketUrl,
+  GApage,
   hideLabel,
   social,
   shareUrl,
@@ -67,7 +69,7 @@ export default function SocialButton({
           text
         )}&body=${encodeURIComponent(url)}`;
       case "download":
-        return downloadLink;
+        return bucketUrl;
       default:
         return "#";
     }
@@ -79,7 +81,19 @@ export default function SocialButton({
         className: "social-button",
         href: getShareLink(social, shareUrl || "", shareText),
         target: "_blank",
-        ...(social === "download" ? { download: true } : {}),
+        ...(social === "download"
+          ? {
+              download: true,
+              onClick: () => {
+                // @ts-ignore
+                window.dataLayer.push({
+                  event: "media_file_download",
+                  page: GApage || "/",
+                  user_id: "$user_id",
+                });
+              },
+            }
+          : {}),
       }}
     >
       <div

src/website/packages/fakeyou.com/src/v2/view/pages/media/MediaPageSwitch.tsx

@@ -38,6 +38,7 @@ export interface MediaSubViewProps {
   animationType: AnimationOptions;
   animationTypeChange: (event: { target: { value: AnimationType } }) => void;
   bookmarkButtonProps: ActionButtonProps;
+  bucketUrl: string;
   canAccessStudio: () => boolean;
   canBanUsers: () => boolean;
   canEdit: boolean;
@@ -68,7 +69,7 @@ export default function MediaPageSwitch() {
   const [engineCategory, engineCategorySet] =
     useState<EngineCategoryOptions>(null);
 
-  const { mediaFile, prompt, remove, status } = useMedia({
+  const { bucketUrl, mediaFile, prompt, remove, status } = useMedia({
     mediaToken: urlToken,
     onSuccess: (res: any) => {
       isFeaturedSet(res.is_featured);
@@ -180,6 +181,7 @@ export default function MediaPageSwitch() {
   const subViewProps: MediaSubViewProps = {
     animationType,
     animationTypeChange,
+    bucketUrl,
     bookmarkButtonProps,
     canAccessStudio,
     canBanUsers,

src/website/packages/fakeyou.com/src/v2/view/pages/media/VideoMediaPage.tsx

@@ -19,7 +19,6 @@ import {
   RenameMediaResponse,
 } from "@storyteller/components/src/api/media_files/RenameMedia";
 import { GetWebsiteLink } from "@storyteller/components/src/env/GetWebsiteLink";
-import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 import PromptViewer from "./PromptViewer";
 import { MediaSubViewProps } from "./MediaPageSwitch";
 import { a, useTransition } from "@react-spring/web";
@@ -41,8 +40,9 @@ export enum EditingTitleState {
   saving,
 }
 
-export default function DevMediaPage({
+export default function VideoMediaPage({
   bookmarkButtonProps,
+  bucketUrl,
   canAccessStudio,
   canEdit,
   featureButtonProps,
@@ -58,7 +58,6 @@ export default function DevMediaPage({
   const [editingTitle, editingTitleSet] = useState(EditingTitleState.closed);
   const { events, status: animationStatus } = useAnimationStatus();
   const titlePaused = animationStatus === AnimationStatus.paused;
-  const bucketConfig = new BucketConfig();
 
   const transitions = useTransition(
     editingTitle,
@@ -125,8 +124,6 @@ export default function DevMediaPage({
     "download",
   ];
 
-  let downloadLink = bucketConfig.getGcsUrl(mediaFile?.public_bucket_path);
-
   const sharePath = `/media/${mediaFile?.token || ""}`;
 
   const shareUrl = GetWebsiteLink(sharePath);
@@ -320,7 +317,8 @@ export default function DevMediaPage({
                 {shareLinks.map((social, i) => (
                   <SocialButton
                     {...{
-                      downloadLink,
+                      bucketUrl,
+                      GApage: "/media",
                       hideLabel: true,
                       social,
                       shareUrl,