Refactored mixpanel reporting into the AnalyticsProvider.

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 { buttonReport } = useContext(AnalyticsContext);
-  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;
-  };
 
   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

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 AnalyticsContext from "../src/core/providers/AnalyticsProvider/context";
-import { MIXPANEL_EVENTS } from "../src/core/providers/AnalyticsProvider/constants";
 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()) {
+                            buttonReport(
-                              mixpanel.track(
+                              "Join our Discord",
-                                `${MIXPANEL_EVENTS.BUTTON_CLICKED}`,
+                              "front-and-center",
-                                {
+                              "landing"
-                                  full_url: router.nextRouter.asPath,
-                                  buttonName: `Join our Discord`,
-                                  page: `landing`,
-                                  section: `front-and-center`,
-                                }
                             );
-                            }
                           }}
                           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()) {
+                          buttonReport(
-                            mixpanel.track(
+                            "Explore the Use Cases",
-                              `${MIXPANEL_EVENTS.BUTTON_CLICKED}`,
+                            "Dive into Engine Features",
-                              {
+                            "landing"
-                                full_url: router.nextRouter.asPath,
-                                buttonName: `Explore the Use Cases`,
-                                page: `landing`,
-                                section: `Dive into Engine Features`,
-                              }
                           );
-                          }
                         }}
                         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()) {
+                            console.log("sending report to mixpanel");
-                              mixpanel.track(
+                            buttonReport(
-                                `${MIXPANEL_EVENTS.BUTTON_CLICKED}`,
+                              "Join our Discord",
-                                {
+                              "inline-text",
-                                  full_url: router.nextRouter.asPath,
+                              "landing"
-                                  buttonName: `Join our Discord`,
-                                  page: `landing`,
-                                  section: `inline-text`,
-                                }
                             );
-                            }
                           }}
                         >
                           Join our Discord
@@ -694,16 +679,9 @@ const Homepage = () => {
                       "400px",
                     ]}
                     fontSize={["lg", "xl", "2xl", "3xl", "4xl", "4xl"]}
-                    onClick={() => {
+                    onClick={() =>
-                      if (mixpanel.get_distinct_id()) {
+                      buttonReport("Join our Discord", "page-bottom", "landing")
-                        mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
-                          full_url: router.nextRouter.asPath,
-                          buttonName: `Join our Discord`,
-                          page: `landing`,
-                          section: `bottom-line`,
-                        });
                     }
-                    }}
                     href={"/discordleed"}
                     isExternal
                   >

frontend/src/components/FeatureCard.js

@@ -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"]}

frontend/src/core/providers/AnalyticsProvider/index.js

@@ -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>