feat: mixpanel and ga integration

solana-labs · Jul 24, 2019 · 2278bdb · 2278bdb
1 parent 63261c6
commit 2278bdb
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "ip": "^1.1.5",
     "localforage": "^1.7.3",
     "lodash": "^4.17.15",
+    "mixpanel-browser": "^2.29.0",
     "mobx": "^5.13.0",
     "mobx-react-lite": "^1.4.1",
     "nocache": "^2.1.0",

diff --git a/public/index.html b/public/index.html
@@ -1,6 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-112467444-2"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-112467444-2');
+    </script>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta

diff --git a/src/v2/components/Footer/Newsletter/index.jsx b/src/v2/components/Footer/Newsletter/index.jsx
@@ -1,10 +1,17 @@
 import {InputBase, Typography} from '@material-ui/core';
 import React from 'react';
+import Mixpanel from 'v2/mixpanel';
 
 import useStyles from './styles';
 
 const Newsletter = () => {
   const classes = useStyles();
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    Mixpanel.track('Clicked Partner with us');
+  };
+
   return (
     <div>
       <Typography className={classes.title} variant="h5">
@@ -13,7 +20,7 @@ const Newsletter = () => {
       <Typography className={classes.desc}>
         Stay up to date with the latest Solana news.
       </Typography>
-      <form className={classes.form}>
+      <form className={classes.form} onSubmit={handleSubmit}>
         <InputBase
           className={classes.input}
           placeholder="Email Address"

diff --git a/src/v2/components/Footer/Partnership/index.jsx b/src/v2/components/Footer/Partnership/index.jsx
@@ -2,11 +2,17 @@ import {Typography} from '@material-ui/core';
 import React from 'react';
 import Button from 'v2/components/UI/Button';
 import iconRight from 'v2/assets/icons/arrow-right.png';
+import Mixpanel from 'v2/mixpanel';
 
 import useStyles from './styles';
 
 const Partnership = () => {
   const classes = useStyles();
+
+  const handlePartner = () => Mixpanel.track('Clicked Partner with us');
+
+  const handleDiscuss = () => Mixpanel.track('Clicked Discuss on Forums');
+
   return (
     <div>
       <Typography className={classes.title} variant="h5">
@@ -17,11 +23,11 @@ const Partnership = () => {
         <br />
         Let’s build something together.
       </Typography>
-      <Button color="primary" variant="contained">
+      <Button color="primary" variant="contained" onClick={handlePartner}>
         Partner with us
       </Button>
       <div className={classes.links}>
-        <a href="https://forums.solana.com/">
+        <a href="https://forums.solana.com/" onClick={handleDiscuss}>
           Discuss on forums
           <img src={iconRight} width={53} alt="" />
         </a>

diff --git a/src/v2/components/NavBar/index.jsx b/src/v2/components/NavBar/index.jsx
@@ -14,6 +14,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import {RouterHistory, withRouter} from 'react-router-dom';
 import React from 'react';
 import {map, propEq, eq} from 'lodash/fp';
+import Mixpanel from 'v2/mixpanel';
 
 import {ReactComponent as dashboard} from './assets/dashboard.svg';
 import {ReactComponent as transactions} from './assets/transactions.svg';
@@ -34,6 +35,16 @@ const icons = {
   favorites,
 };
 
+const navTracks = {
+  dashboard: 'Clicked Overview',
+  transactions: 'Clicked Transactions Page',
+  validators: 'Clicked Transactions Page',
+  'tour-de-sol': 'Clicked Transactions Page',
+  applications: 'Clicked Applications page',
+  blocks: 'Clicked Applications page',
+  favorites: 'Clicked Applications page',
+};
+
 const NavBar = ({
   location,
   history,
@@ -64,6 +75,7 @@ const NavBar = ({
       location.pathname.includes(link) ||
       (propEq('pathname', '/rc/')(location) && isDashboard);
     const changeRoute = () => {
+      Mixpanel.track(navTracks[link]);
       history.push(`/rc/${isDashboard ? '' : link}`);
       toggleDrawer(false)();
     };

diff --git a/src/v2/components/Social/index.jsx b/src/v2/components/Social/index.jsx
@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
 import {map} from 'lodash/fp';
+import Mixpanel from 'v2/mixpanel';
 
 import {ReactComponent as discord} from './assets/discord.svg';
 import {ReactComponent as medium} from './assets/medium.svg';
@@ -44,8 +45,16 @@ const links: Link[] = [
 ];
 const Social = () => {
   const classes = useStyles();
+
+  const handleLink = () => social => Mixpanel.track(`Visit ${social}`);
+
   const renderLink = ({name, link, icon: Icon}: Link) => (
-    <a key={name} className={classes.link} href={link}>
+    <a
+      key={name}
+      className={classes.link}
+      href={link}
+      onClick={handleLink(name)}
+    >
       <Icon />
     </a>
   );

diff --git a/src/v2/components/TourDeSol/Cards/index.jsx b/src/v2/components/TourDeSol/Cards/index.jsx
@@ -9,8 +9,8 @@ import useStyles from './styles';
 
 const Cards = () => {
   const classes = useStyles();
-  const {cluster} = NodesStore;
-  const {nodes} = cluster;
+  const {cluster, validators} = NodesStore;
+
   const cards = [
     {
       title: 'Stage Duration Blocks',
@@ -44,7 +44,7 @@ const Cards = () => {
     },
     {
       title: '# of Active Validators',
-      value: nodes.length,
+      value: validators.length,
       changes: '',
       period: 'since yesterday',
     },

diff --git a/src/v2/components/TourDeSol/Ranking/index.jsx b/src/v2/components/TourDeSol/Ranking/index.jsx
@@ -9,14 +9,12 @@ import useStyles from './styles';
 
 const Ranking = () => {
   const classes = useStyles();
-  const {
-    cluster: {voting},
-  } = NodesStore;
+  const {validators} = NodesStore;
 
   const maxVal = compose(
     get('stake'),
     maxBy('stake'),
-  )(voting);
+  )(validators);
 
   const renderNode = node => {
     const position = (node.stake * 100) / maxVal;
@@ -41,7 +39,7 @@ const Ranking = () => {
         Top Validator Ranking
         <HelpLink text="" term="" />
       </div>
-      <ul className={classes.list}>{map(renderNode)(voting)}</ul>
+      <ul className={classes.list}>{map(renderNode)(validators)}</ul>
     </div>
   );
 };

diff --git a/src/v2/components/Validators/Detail/index.jsx b/src/v2/components/Validators/Detail/index.jsx
@@ -2,7 +2,7 @@
 import {Container, useTheme} from '@material-ui/core';
 import {observer} from 'mobx-react-lite';
 import useMediaQuery from '@material-ui/core/useMediaQuery/useMediaQuery';
-import React from 'react';
+import React, {useEffect} from 'react';
 import {map, find, compose, mergeWith} from 'lodash/fp';
 import {Match} from 'react-router-dom';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
@@ -22,6 +22,7 @@ import HelpLink from 'v2/components/HelpLink';
 import getColor from 'v2/utils/getColor';
 
 import {ReactComponent as CopyIcon} from '../../../assets/icons/copy.svg';
+import Mixpanel from '../../../mixpanel';
 import useStyles from './styles';
 
 const mapStyles = {
@@ -38,10 +39,16 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
   const {
     cluster: {voting, cluster},
   } = NodesStore;
+
   const classes = useStyles();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const {params} = match;
+
+  useEffect(() => {
+    Mixpanel.track(`Clicked Validator ${params.id}`);
+  }, [params.id]);
+
   const currentNode = find({pubkey: params.id})(cluster);
   if (!currentNode) {
     return <div>Loading...</div>;

diff --git a/src/v2/components/Validators/index.jsx b/src/v2/components/Validators/index.jsx
@@ -7,6 +7,7 @@ import Card from 'v2/components/UI/StatCard';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import NodesStore from 'v2/stores/nodes';
 
+import Mixpanel from '../../mixpanel';
 import Button from '../UI/Button';
 import ValidatorsMap from './ValidatorsMap';
 import ValidatorsTable from './Table';
@@ -67,12 +68,15 @@ const Validators = () => {
     </div>
   );
 
+  const handleValidator = () => Mixpanel.track('Clicked Become a Validator');
+
   return (
     <Container>
       <div className={classes.root}>
         <SectionHeader title="Validators Overview">
           <div className={classes.becomeBtn}>
             <Button
+              onClick={handleValidator}
               href="https://solana.com/network/"
               variant="contained"
               color="primary"

diff --git a/src/v2/mixpanel.js b/src/v2/mixpanel.js
@@ -0,0 +1,21 @@
+import mixpanel from 'mixpanel-browser';
+mixpanel.init('a733ed40b877d30ff2a1a58b4e326cf0');
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+export default {
+  identify: id => {
+    if (isProduction) mixpanel.identify(id);
+  },
+  alias: id => {
+    if (isProduction) mixpanel.alias(id);
+  },
+  track: (name, props) => {
+    if (isProduction) mixpanel.track(name, props);
+  },
+  people: {
+    set: props => {
+      if (isProduction) mixpanel.people.set(props);
+    },
+  },
+};
diff --git a/yarn.lock b/yarn.lock
@@ -10615,6 +10615,11 @@ mixin-object@^2.0.1:
     for-in "^0.1.3"
     is-extendable "^0.1.1"
 
+mixpanel-browser@^2.29.0:
+  version "2.29.0"
+  resolved "https://registry.yarnpkg.com/mixpanel-browser/-/mixpanel-browser-2.29.0.tgz#07c8e25d289de308acff67971e6b393451f65e77"
+  integrity sha512-ql58ZM5rRnodlV5+BB+SgBuCZ9/gFWrDwdDnDB3SrpEhYFLUiR8rTjdi0Nyd0wuXqq2hcr2Rx3aJx6ubs2Cc8Q==
+
 [email protected], [email protected], "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"