diff --git a/frontend/pages/features/index.js b/frontend/pages/features/index.js index 76e38985..70d011ca 100644 --- a/frontend/pages/features/index.js +++ b/frontend/pages/features/index.js @@ -8,6 +8,7 @@ import { MIXPANEL_EVENTS } from "../../src/core/providers/AnalyticsProvider/cons import FeatureCard from "../../src/components/FeatureCard"; import useRouter from "../../src/core/hooks/useRouter"; import UIContext from "../../src/core/providers/UIProvider/context"; +import AnalyticsContext from "../../src/core/providers/AnalyticsProvider/context"; const assets = { cryptoTraders: `${AWS_ASSETS_PATH}/crypto+traders.png`, @@ -17,29 +18,15 @@ const assets = { }; const Features = () => { - const router = useRouter(); const ui = useContext(UIContext); - - const mixpanelReport = function (name, section) { - const _report = function () { - if (mixpanel.get_distinct_id()) { - mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { - full_url: router.nextRouter.asPath, - buttonName: name, - page: `features`, - section: section, - }); - } - }; - return _report; - }; + const { buttonReport } = useContext(AnalyticsContext); return ( {!ui.isMobileView && ( buttonReport("Learn More", "main")} href={"/discordleed"} isExternal minW={["150", "150", "150", "200px", "300px", "300px"]} @@ -57,7 +44,7 @@ const Features = () => { image={assets["lender"]} cardOrder={1} isMobile={ui.isMobileView} - clickEvent={mixpanelReport("Learn More", "airdrops")} + clickEvent={() => buttonReport("Learn More", "airdrops")} > <> Use Moonstream to distribute ERC20 tokens, NFTs, items, or @@ -82,7 +69,7 @@ const Features = () => { image={assets["DAO"]} cardOrder={-1} isMobile={ui.isMobileView} - clickEvent={mixpanelReport("Learn More", "minigames")} + clickEvent={() => buttonReport("Learn More", "minigames")} > <> Use Moonstream to deploy on-chain minigames into your project. Our @@ -101,7 +88,7 @@ const Features = () => { image={assets["cryptoTraders"]} cardOrder={1} isMobile={ui.isMobileView} - clickEvent={mixpanelReport("Learn More", "lootboxes")} + clickEvent={() => buttonReport("Learn More", "lootboxes")} > <> Use Moonstream Lootboxes to reward your players on-chain for @@ -120,7 +107,7 @@ const Features = () => { image={assets["NFT"]} cardOrder={-1} isMobile={ui.isMobileView} - clickEvent={mixpanelReport("Learn More", "crafting")} + clickEvent={() => buttonReport("Learn More", "crafting")} > <> Use Moonstream to set up a fully on-chain crafting system and give diff --git a/frontend/pages/index.js b/frontend/pages/index.js index 1abe71ab..713c6521 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -1,4 +1,10 @@ -import React, { useState, Suspense, useEffect, useLayoutEffect } from "react"; +import React, { + useState, + Suspense, + useEffect, + useLayoutEffect, + useContext, +} from "react"; import { Fade, Flex, @@ -23,8 +29,7 @@ import { AWS_ASSETS_PATH, DEFAULT_METATAGS } from "../src/core/constants"; import TrustedBadge from "../src/components/TrustedBadge"; import RouteButton from "../src/components/RouteButton"; import MilestoneBox from "../src/components/MilestoneBox"; -import mixpanel from "mixpanel-browser"; -import { MIXPANEL_EVENTS } from "../src/core/providers/AnalyticsProvider/constants"; +import AnalyticsContext from "../src/core/providers/AnalyticsProvider/context"; import RouterLink from "next/link"; const HEADING_PROPS = { @@ -53,56 +58,6 @@ const assets = { meetup: `${AWS_ASSETS_PATH}/featured_by/meetup_logo.png`, }; -const Feature = ({ - title, - altText, - path, - mixpanel_url, - mixpanel_name, - image, -}) => { - return ( - { - if (mixpanel.get_distinct_id()) { - mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { - full_url: mixpanel_url, - buttonName: mixpanel_name, - page: `landing`, - section: `features`, - }); - } - }} - > - - - - {title} - - - - ); -}; - const Homepage = () => { const [background, setBackground] = useState("background720"); const [backgroundLoaded720, setBackgroundLoaded720] = useState(false); @@ -124,6 +79,8 @@ const Homepage = () => { "(min-width: 3840px)", ]); + const { buttonReport } = useContext(AnalyticsContext); + useEffect(() => { assets["background720"] = `${AWS_ASSETS_PATH}/background720.png`; assets["background1920"] = `${AWS_ASSETS_PATH}/background1920.png`; @@ -201,6 +158,42 @@ const Homepage = () => { }; }, []); + const Feature = ({ title, altText, image, ...props }) => { + return ( + + + + + + {title} + + + + + ); + }; + return ( @@ -262,7 +255,7 @@ const Homepage = () => { fontWeight="semibold" color="white" > - Build a Sustainable Game Economy in only a few clicks + Build a Sustainable Game Economy in Only a Few Clicks { ]} fontSize={["lg", "xl", "2xl", "3xl", "4xl", "4xl"]} onClick={() => { - if (mixpanel.get_distinct_id()) { - mixpanel.track( - `${MIXPANEL_EVENTS.BUTTON_CLICKED}`, - { - full_url: router.nextRouter.asPath, - buttonName: `Join our Discord`, - page: `landing`, - section: `front-and-center`, - } - ); - } + buttonReport( + "Join our Discord", + "front-and-center", + "landing" + ); }} href={"/discordleed"} isExternal @@ -431,17 +418,11 @@ const Homepage = () => { fontSize={["lg", "xl", "2xl", "3xl", "4xl", "4xl"]} px={[4, 4, 4, 8, 8]} onClick={() => { - if (mixpanel.get_distinct_id()) { - mixpanel.track( - `${MIXPANEL_EVENTS.BUTTON_CLICKED}`, - { - full_url: router.nextRouter.asPath, - buttonName: `Explore the Use Cases`, - page: `landing`, - section: `Dive into Engine Features`, - } - ); - } + buttonReport( + "Explore the Use Cases", + "Dive into Engine Features", + "landing" + ); }} href="https://docs.google.com/document/d/1mjfF8SgRrAZvtCVVxB2qNSUcbbmrH6dTEYSMfHKdEgc/preview" isExternal @@ -463,33 +444,42 @@ const Homepage = () => { title="Lootboxes" altText="Lootboxes" path="/features/#lootboxes" - mixpanel_name="lootboxes" - mixpanel_url={router.nextRouter.asPath} image={assets["cryptoTraders"]} + href="/features/#lootboxes" + onClick={() => { + console.log("Sending report to mixpanel"); + buttonReport("Lootboxes", "features", "landing"); + }} /> { + buttonReport("Crafting Recipes", "features", "landing"); + }} /> { + buttonReport("Minigames", "features", "landing"); + }} /> { + buttonReport("Airdrops", "features", "landing"); + }} /> @@ -546,17 +536,12 @@ const Homepage = () => { display="inline" fontWeight="semibold" onClick={() => { - if (mixpanel.get_distinct_id()) { - mixpanel.track( - `${MIXPANEL_EVENTS.BUTTON_CLICKED}`, - { - full_url: router.nextRouter.asPath, - buttonName: `Join our Discord`, - page: `landing`, - section: `inline-text`, - } - ); - } + console.log("sending report to mixpanel"); + buttonReport( + "Join our Discord", + "inline-text", + "landing" + ); }} > Join our Discord @@ -694,16 +679,9 @@ const Homepage = () => { "400px", ]} fontSize={["lg", "xl", "2xl", "3xl", "4xl", "4xl"]} - onClick={() => { - if (mixpanel.get_distinct_id()) { - mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { - full_url: router.nextRouter.asPath, - buttonName: `Join our Discord`, - page: `landing`, - section: `bottom-line`, - }); - } - }} + onClick={() => + buttonReport("Join our Discord", "page-bottom", "landing") + } href={"/discordleed"} isExternal > diff --git a/frontend/src/components/FeatureCard.js b/frontend/src/components/FeatureCard.js index 00c3f4ec..a6494a99 100644 --- a/frontend/src/components/FeatureCard.js +++ b/frontend/src/components/FeatureCard.js @@ -50,7 +50,7 @@ const _FeatureCard = (props) => { >
{props.isMobile && ( - + // { > Learn More - + // )} { } }, [user, isInit, isMixpanelReady]); + const buttonReport = React.useCallback( + (name, section, pageName) => { + pageName = pageName || router.nextRouter.pathname.slice(1); + console.log(`Reporting on name ${name} and section ${section}`); + if (mixpanel?.get_distinct_id()) { + mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { + full_url: router.nextRouter.asPath, + buttonName: name, + page: pageName, + section: section, + }); + } + }, + [router.nextRouter.asPath, router.nextRouter.pathname] + ); + return ( {children}