mirror
/
moonstream
kopia lustrzana https://github.com/bugout-dev/moonstream
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Refactored mixpanel reporting into the AnalyticsProvider.

pull/611/head
Kellan Wampler 2022-05-22 19:59:16 -04:00
rodzic c3f06e09a1
commit 081b20bdc7
4 zmienionych plików z 115 dodań i 128 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

27
frontend/pages/features/index.js
Wyświetl plik

@ -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 (
<Container id="container" maxW="container.xl">
{!ui.isMobileView && (
<RouteButton
variant="orangeAndBlue"
onClick={mixpanelReport("Learn More", "main")}
onClick={() => 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

188
frontend/pages/index.js
Wyświetl plik

@ -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 (
<RouterLink
href={path}
onClick={() => {
if (mixpanel.get_distinct_id()) {
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
full_url: mixpanel_url,
buttonName: mixpanel_name,
page: `landing`,
section: `features`,
});
}
}}
>
<Stack
transition={"1s"}
spacing={1}
px={1}
alignItems="center"
borderRadius="12px"
borderColor="blue.700"
bgColor={"blue.800"}
borderWidth={"1px"}
_hover={{ transform: "scale(1.05)", transition: "0.42s" }}
cursor="pointer"
m={[2, 3, null, 4, 8, 12]}
pb={2}
>
<ChakraImage
boxSize={["220px", "220px", "xs", null, "xs"]}
objectFit="contain"
src={image}
alt={altText}
/>
<Heading textAlign="center" fontSize={["md", "md", "lg", "3xl", "4xl"]}>
{title}
</Heading>
</Stack>
</RouterLink>
);
};
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 (
<Box onClick={props.onClick}>
<RouterLink href={props.href}>
<Stack
transition={"1s"}
spacing={1}
px={1}
alignItems="center"
borderRadius="12px"
borderColor="blue.700"
bgColor={"blue.800"}
borderWidth={"1px"}
_hover={{ transform: "scale(1.05)", transition: "0.42s" }}
cursor="pointer"
m={[2, 3, null, 4, 8, 12]}
pb={2}
>
<ChakraImage
boxSize={["220px", "220px", "xs", null, "xs"]}
objectFit="contain"
src={image}
alt={altText}
/>
<Heading
textAlign="center"
fontSize={["md", "md", "lg", "3xl", "4xl"]}
>
{title}
</Heading>
</Stack>
</RouterLink>
</Box>
);
};
return (
<Suspense fallback="">
<Fade in>
@ -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
</Heading>
<chakra.span
pt={4}
@ -289,17 +282,11 @@ const Homepage = () => {
]}
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");
}}
/>
<Feature
title="Crafting Recipes"
altText="Crafting Recipes"
path="/features/#crafting"
mixpanel_name="crafting"
mixpanel_url={router.nextRouter.asPath}
image={assets["NFT"]}
href="/features/#crafting"
onClick={() => {
buttonReport("Crafting Recipes", "features", "landing");
}}
/>
<Feature
title="Minigames"
altText="Minigames"
path="/features/#minigames"
mixpanel_name="minigames"
mixpanel_url={router.nextRouter.asPath}
image={assets["DAO"]}
href="/features/#minigames"
onClick={() => {
buttonReport("Minigames", "features", "landing");
}}
/>
<Feature
title="Airdrops"
altText="Airdrops"
path="/features/#airdrops"
mixpanel_name="airdrops"
mixpanel_url={router.nextRouter.asPath}
image={assets["lender"]}
href="/features/#airdrops"
onClick={() => {
buttonReport("Airdrops", "features", "landing");
}}
/>
</SimpleGrid>
</GridItem>
@ -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
>

4
frontend/src/components/FeatureCard.js
Wyświetl plik

@ -50,7 +50,7 @@ const _FeatureCard = (props) => {
>
<Center flexDirection="column">
{props.isMobile && (
<Link href="/discordleed" isExternal>
// <Link href="/discordleed" isExternal>
<Text
as="u"
display="inline"
@ -59,7 +59,7 @@ const _FeatureCard = (props) => {
>
Learn More
</Text>
</Link>
// </Link>
)}
<ChakraImage
boxSize={["220px", "md", "md", null, "lg"]}

24
frontend/src/core/providers/AnalyticsProvider/index.js
Wyświetl plik

@ -199,9 +199,31 @@ const AnalyticsProvider = ({ children }) => {
}
}, [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 (
<AnalyticsContext.Provider
value={{ mixpanel, isMixpanelReady, MIXPANEL_EVENTS, MIXPANEL_PROPS }}
value={{
mixpanel,
buttonReport,
isMixpanelReady,
MIXPANEL_EVENTS,
MIXPANEL_PROPS,
}}
>
{children}
</AnalyticsContext.Provider>