Mixpanel migration

public/index.html

@@ -27,9 +27,10 @@
       0)))}}var e=a;"undefined"!==typeof g?e=a[g]=[]:g="mixpanel";e.people=e.people||[];e.toString=function(b){var a="mixpanel";"mixpanel"!==g&&(a+="."+g);b||(a+=" (stub)");return a};e.people.toString=function(){return e.toString(1)+".people (stub)"};l="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
       for(h=0;h<l.length;h++)c(e,l[h]);var f="set set_once union unset remove delete".split(" ");e.get_group=function(){function a(c){b[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));e.push([d,call2])}}for(var b={},d=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<f.length;c++)a(f[c]);return b};a._i.push([b,d,g])};a.__SV=1.2;b=c.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?
       MIXPANEL_CUSTOM_LIB_URL:"file:"===c.location.protocol&&"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js";d=c.getElementsByTagName("script")[0];d.parentNode.insertBefore(b,d)}})(document,window.mixpanel||[]);
-      mixpanel.init("578a1a2fd72a2e2f9f1914c2814e1695", {opt_out_tracking_by_default: true});
+      window.__mmMixpanelToken && mixpanel.init(window.__mmMixpanelToken, {opt_out_tracking_by_default: true});
       window.onload = function() { 
         window.__mmMetametrics && mixpanel.has_opted_out_tracking() && mixpanel.opt_in_tracking(); 
+        window.__mmMetametrics && window.__mmDistinctId && mixpanel.identify(window.__mmDistinctId)
       }
     </script>
     <!-- end Mixpanel -->

src/components/Autocomplete/index.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import onUrlSubmit from '../../util/browser';
 import './index.css';
-import trackEvent from '../../util/analytics';
 
 export default class Autocomplete extends Component {
     state = {
@@ -15,7 +14,6 @@ export default class Autocomplete extends Component {
     onFocus = (event) => {
         event.preventDefault();
         window.ethereum.send('metamask_showAutocomplete');
-        trackEvent('Autocomplete focus');
     };
 
     handleSubmit = (event) => {

src/components/Dapp/index.js

@@ -1,16 +1,16 @@
 import React, { Component } from 'react'
 import closeIcon from '../../images/close-icon.svg';
-import trackEvent from '../../util/analytics';
+import{trackEvent, ANALYTICS_EVENT_OPTS} from '../../util/analytics';
 import './index.css';
 
 export default class Dapp extends Component {
 
     track = (e) => {
         e.preventDefault();
-        trackEvent('Click', { 
-            'dapp' : this.props.data.name,
-            'url': this.props.data.url,
-            'position': this.props.position + 1
+        trackEvent(ANALYTICS_EVENT_OPTS.CLICKS_DAPP, { 
+            'Dapp' : this.props.data.name,
+            'Url': this.props.data.url,
+            'Position': this.props.position + 1
         });
         window.location.href = this.props.data.url;
     }

src/components/ExploreDapps/DappCategory.js

@@ -2,14 +2,14 @@ import React, { Component } from 'react'
 import { Link } from "react-router-dom";
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import trackEvent from '../../util/analytics';
+import{trackEvent, ANALYTICS_EVENT_OPTS} from '../../util/analytics';
 
 import './DappCategory.css';
 
 export default class DappCategory extends Component {
     track = () => {
-        trackEvent('Click', { 
-            'dapp-category' : this.props.data.name,
+        trackEvent(ANALYTICS_EVENT_OPTS.CLICKS_DAPP_CATEGORY, { 
+            'Category' : this.props.data.name,
         });
     }
 

src/components/FeaturedDappsCarousel/FeaturedDapp.js

@@ -1,14 +1,14 @@
 import React, { Component } from 'react'
 import './FeaturedDapp.css';
-import trackEvent from '../../util/analytics';
+import{trackEvent, ANALYTICS_EVENT_OPTS} from '../../util/analytics';
 
 export default class FeaturedDapp extends Component {
 
     track = (e) => {
-        trackEvent('Click', { 
-            'featured-dapp' : this.props.data.shortName,
-            'url' : this.props.data.url,
-            'position': this.props.position + 1
+        trackEvent(ANALYTICS_EVENT_OPTS.CLICKS_FEATURED_DAPP, { 
+            'Dapp' : this.props.data.shortName,
+            'Url' : this.props.data.url,
+            'Position': this.props.position + 1
         });
         window.location.href = this.props.data.url;
     }

src/components/Tabs/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import trackEvent from '../../util/analytics';
+import{trackEvent, ANALYTICS_EVENT_OPTS} from '../../util/analytics';
 import Tab from './Tab';
 
 import './index.css';
@@ -20,7 +20,7 @@ export default class Tabs extends Component {
 
   onTabSelected = (tab) => {
     this.setState({ activeTab: tab });
-    trackEvent('Click', { 'Homepage Tab' : tab});
+    trackEvent(ANALYTICS_EVENT_OPTS.CLICKS_HOMEPAGE_TAB, { 'Tab' : tab});
   }
 
   render() {

src/components/TakeATour/index.js

@@ -32,6 +32,7 @@ export default class TakeATour extends Component {
                     <div className={'take-a-tour-content'}>
                         <h3>Take a tour</h3>
                         <p>Our new mobile app gives you the control to access the new decentralized web</p>
+
                     </div>
                 </a>
                 <button 

src/pages/Home.js

@@ -6,7 +6,7 @@ import FeaturedDappsCarousel from '../components/FeaturedDappsCarousel/';
 import ExploreDapps from '../components/ExploreDapps/';
 import Favorites from '../components/Favorites/';
 import TakeATour from '../components/TakeATour/';
-import trackEvent from '../util/analytics';
+import{trackEvent, ANALYTICS_EVENT_OPTS} from '../util/analytics';
 
 const isMobile = {
     Android: function () {
@@ -31,7 +31,7 @@ const isMobile = {
 
 export default class Home extends Component {
     componentDidMount() {
-        trackEvent('Impression', { 'page': 'home' });
+      trackEvent(ANALYTICS_EVENT_OPTS.IMPRESSION);
     }
 
     render() {

src/util/analytics.js

@@ -1,9 +1,58 @@
 /* eslint-disable no-undef */
-export default function trackEvent(name, data){
+export function trackEvent(action, data){
     if(mixpanel && window.__mmMetametrics){
+        const category = action.category
+        delete action.category
         mixpanel.track(
-            name,
-            data
+            category,
+            {...action, ...data},
         );
     }
-}
+}
+
+const generateOpt = (category, action, name) => ({ category, action, name });
+
+const NAMES = {
+    DAPP: 'Dapp',
+    FEATURED_DAPP: 'Featured Dapp',
+	DAPP_CATEGORY: 'Dapp Category',
+    HOMEPAGE_TAB: 'Homepage Tab',
+};
+
+const ACTIONS = {
+	CLICK: 'Click',
+	IMPRESSION: 'Impression',
+};
+
+const CATEGORIES = {
+	BROWSER_HOME: 'Browser Home',
+};
+
+export const ANALYTICS_EVENT_OPTS = {
+	CLICKS_DAPP: generateOpt(
+		CATEGORIES.BROWSER_HOME,
+		ACTIONS.CLICK,
+		NAMES.DAPP
+    ),
+    CLICKS_FEATURED_DAPP: generateOpt(
+		CATEGORIES.BROWSER_HOME,
+		ACTIONS.CLICK,
+		NAMES.FEATURED_DAPP
+	),
+	CLICKS_DAPP_CATEGORY: generateOpt(
+		CATEGORIES.BROWSER_HOME,
+		ACTIONS.CLICK,
+		NAMES.DAPP_CATEGORY
+	),
+	CLICKS_HOMEPAGE_TAB: generateOpt(
+		CATEGORIES.BROWSER_HOME,
+		ACTIONS.CLICK,
+		NAMES.HOMEPAGE_TAB
+    ),
+    IMPRESSION: generateOpt(
+		CATEGORIES.BROWSER_HOME,
+		ACTIONS.IMPRESSION,
+	),
+};
+
+export default {trackEvent,ANALYTICS_EVENT_OPTS }