GA

custom.d.ts

@@ -4,29 +4,16 @@ declare module 'react-router-relay'
 declare module 'react-router-scroll'
 declare module 'commonmark-react-renderer'
 declare module 'slug'
-declare module 'smooch'
 declare module 'graphiql'
 declare module 'react-copy-to-clipboard'
 declare module 'cuid'
 
-//declare function require(name: string): any
-
 declare var fetch: any
-
-declare interface Window {
-  analytics: any
-  mixpanel: any
-}
-
 declare var Smooch: any
-declare var analytics: any
-declare var mixpanel: any
 declare var __LAST_UPDATE__: string
 declare var __LAMBDA_AUTH__: string
 declare var __LAMBDA_DOWNLOAD_EXAMPLE__: string
 declare var __GITHUB_OAUTH_CLIENT_ID__: string
-declare var __ENABLE_SEGMENT__: boolean
-declare var __SEGMENT_TOKEN__: string
 declare var __GA_TRACKING_CODE__: string
 
 declare module 'react-relay' {
@@ -137,3 +124,4 @@ declare module 'react-relay' {
     setVariables(variables: Object)
   }
 }
+

src/components/App/App.tsx

@@ -9,6 +9,8 @@ import {collectHeadings, buildHeadingsTree} from '../../utils/markdown'
 import {slug} from '../../utils/string'
 import {StoredState, getStoredState, update} from '../../utils/statestore'
 import {initSmooch} from '../../utils/smooch'
+import * as ReactGA from 'react-ga'
+import { events } from '../../utils/events'
 
 require('./style.css')
 
@@ -315,12 +317,12 @@ class App extends React.Component<Props, State> {
   }
 
   private openLayover = () => {
-    analytics.track(`overlay: open`)
+    ReactGA.event(events.OverlayOpen)
     this.setState({showLayover: true} as State)
   }
 
   private closeLayover = () => {
-    analytics.track(`overlay: close`)
+    ReactGA.event(events.OverlayClose)
     this.setState({showLayover: false} as State)
   }
 
@@ -342,18 +344,9 @@ class App extends React.Component<Props, State> {
       throw Error(response.statusText)
     }
 
-    const {projectId, email, name} = body
+    ReactGA.event(events.EndpointReceived)
 
-    analytics.alias(email)
-    setTimeout(
-      () => {
-        analytics.identify(email, {
-          name: name || email,
-          email: email,
-        })
-      },
-      2000
-    )
+    const {projectId, email, name} = body
 
     this.updateStoredState(['user'], {projectId, email, name})
     this.updateStoredState(['skippedAuth'], false)

src/components/BrowserRow/BrowserRow.tsx

@@ -3,6 +3,8 @@ import * as Relay from 'react-relay'
 import Icon from '../Icon/Icon'
 import DeletePokemonMutation from '../../mutations/DeletePokemonMutation'
 import UpdatePokemonMutation from '../../mutations/UpdatePokemonMutation'
+import * as ReactGA from 'react-ga'
+import { events } from '../../utils/events'
 
 const styles: any = require('./BrowserRow.module.styl')
 
@@ -81,14 +83,14 @@ class BrowserRow extends React.Component<Props, State> {
   }
 
   private removePokemon = () => {
-    analytics.track('overlay: delete pokemon')
+    ReactGA.event(events.OverlayDeletePokemon)
     Relay.Store.commitUpdate(
       new DeletePokemonMutation({viewerId: this.props.viewerId, pokemonId: this.props.pokemon.id})
     )
   }
 
   private updatePokemon = () => {
-    analytics.track('overlay: update pokemon')
+    ReactGA.event(events.OverlayUpdatePokemon)
     if (this.state.changesMade) {
       Relay.Store.commitUpdate(
         new UpdatePokemonMutation({pokemonId: this.props.pokemon.id, name: this.state.name, url: this.state.url})

src/components/BrowserView/BrowserView.tsx

@@ -3,6 +3,8 @@ import * as Relay from 'react-relay'
 import Icon from '../Icon/Icon'
 import AddPokemonMutation from '../../mutations/AddPokemonMutation'
 import BrowserRow from '../BrowserRow/BrowserRow'
+import * as ReactGA from 'react-ga'
+import { events } from '../../utils/events'
 
 const styles: any = require('./BrowserView.module.styl')
 
@@ -93,7 +95,8 @@ class BrowserView extends React.Component<Props, State> {
   }
 
   private addPokemon = () => {
-    analytics.track('overlay: create pokemon')
+    ReactGA.event(events.OverlayCreatePokemon)
+
     Relay.Store.commitUpdate(
       new AddPokemonMutation({
         viewer: this.props.viewer,

src/components/ContentEndpoint/ContentEndpoint.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react'
 import * as CopyToClipboard from 'react-copy-to-clipboard'
 import Loading from '../Loading/Loading'
-import {StoredState} from '../../utils/statestore'
+import { StoredState } from '../../utils/statestore'
 import Markdown from '../Markdown/Markdown'
-import TrackLink from '../TrackLink/TrackLink'
 import Icon from '../Icon/Icon'
-import {Parser} from 'commonmark'
+import { Parser } from 'commonmark'
+import * as ReactGA from 'react-ga'
+import { events } from '../../utils/events'
+import TrackLink from '../TrackLink/TrackLink'
 
 const styles: any = require('./ContentEndpoint.module.styl')
 
@@ -54,7 +56,7 @@ export default class ContentEndpoint extends React.Component<Props, State> {
         <TrackLink
           href={githubUrl}
           className={`pa3 pointer ${styles.getEndpoint}`}
-          eventMessage='open github auth'
+          event={Object.assign({}, events.OpenGithub, {label: this.state.allowStar ? 'star-allowed' : 'star-disallowed'})}
         >
           Get GraphQL Endpoint (via Github)
         </TrackLink>
@@ -80,7 +82,7 @@ export default class ContentEndpoint extends React.Component<Props, State> {
           <div className='tc'>
             {endpoint}
           </div>
-          <Markdown ast={ast} location={this.props.location} sourceName='getting-started-bottom' />
+          <Markdown ast={ast} location={this.props.location} sourceName='getting-started-bottom'/>
         </div>
       )
     }
@@ -96,7 +98,7 @@ export default class ContentEndpoint extends React.Component<Props, State> {
             <CopyToClipboard
               className='ml3'
               text={`https://api.graph.cool/simple/v1/${this.context.storedState.user.projectId}`}
-              onCopy={() => analytics.track('overlay: copied endpoint')}
+              onCopy={() => ReactGA.event(events.ContentCopiedEndpoint)}
             >
               <Icon
                 src={require('../../assets/icons/copy.svg')}
@@ -109,7 +111,7 @@ export default class ContentEndpoint extends React.Component<Props, State> {
               />
             </CopyToClipboard>
           </div>
-          <Markdown ast={ast} location={this.props.location} sourceName='getting-started-bottom' />
+          <Markdown ast={ast} location={this.props.location} sourceName='getting-started-bottom'/>
         </div>
       )
     }
@@ -125,7 +127,7 @@ export default class ContentEndpoint extends React.Component<Props, State> {
   }
 
   private skipEndpoint = () => {
-    analytics.track('skip endpoint')
+    ReactGA.event(events.ContentSkippedEndpoint)
     this.context.updateStoredState(['skippedAuth'], true)
   }
 }

src/components/Download/Download.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react'
 import ContentEndpoint from '../ContentEndpoint/ContentEndpoint'
-import {StoredState} from '../../utils/statestore'
+import { StoredState } from '../../utils/statestore'
+import TrackLink from '../TrackLink/TrackLink'
+import { events } from '../../utils/events'
 
 const styles: any = require('./Download.module.styl')
 
@@ -32,22 +34,26 @@ export default class Download extends React.Component<Props, State> {
   render() {
     if (!this.context.storedState.user) {
       return (
-        <ContentEndpoint location={this.props.location} />
+        <ContentEndpoint location={this.props.location}/>
       )
     }
 
     const url = `${__LAMBDA_DOWNLOAD_EXAMPLE__}?repository=${this.props.repository}&project_id=${this.context.storedState.user.projectId}&user=learnapollo&name=${encodeURIComponent(this.context.storedState.user.name)}`
     return (
-      <div className='tc'>
-        <a
+      <div
+        className='tc'
+        id='graphql-endpoint'
+        onClick={() => this.setState({ downloading: true} as State)}
+      >
+        <TrackLink
+          event={Object.assign({}, events.DownloadExample, { label: this.props.repository })}
           href={url}
           target='_blank'
           className={`pa3 pointer ${styles.getEndpoint}`}
           download={this.props.repository}
-          onClick={() => this.setState({ downloading: true} as State)}
         >
           Download Example
-        </a>
+        </TrackLink>
         {this.state.downloading &&
         <div className='pb4 black-50'>
           Magic in progress. Download starts in a few seconds...

src/components/ServerLayover/ServerLayover.tsx

@@ -4,6 +4,8 @@ import * as CopyToClipboard from 'react-copy-to-clipboard'
 import * as Relay from 'react-relay'
 import BrowserView from '../BrowserView/BrowserView'
 import Icon from '../Icon/Icon'
+import * as ReactGA from 'react-ga'
+import { events } from '../../utils/events'
 
 require('graphiql/graphiql.css')
 
@@ -30,7 +32,13 @@ class ServerLayover extends React.Component<Props, State> {
         headers: {'Content-Type': 'application/json'},
         body: JSON.stringify(graphQLParams),
       })
-        .then(response => response.json())
+        .then(response => {
+          if (response.ok && !graphQLParams.query.includes('IntrospectionQuery')) {
+            ReactGA.event(events.OverlayGraphiQLRanQuery)
+          }
+
+          return response.json()
+        })
     }
 
     return (
@@ -68,7 +76,7 @@ class ServerLayover extends React.Component<Props, State> {
             <div className='flex items-center'>
               <CopyToClipboard
                 text={`https://api.graph.cool/simple/v1/${this.props.projectId}`}
-                onCopy={() => analytics.track('overlay: copied endpoint')}
+                onCopy={() => ReactGA.event(events.OverlayCopiedEndpoint)}
               >
                 <Icon src={require('../../assets/icons/copy.svg')}
                       className='dim'
@@ -115,13 +123,13 @@ class ServerLayover extends React.Component<Props, State> {
   }
 
   private showData = () => {
-    analytics.track('overlay: show data')
-    this.setState({ showData: true } as State)
+    ReactGA.event(events.OverlayShowDatabrowser)
+    this.setState({showData: true} as State)
   }
 
   private showGraphiQL = () => {
-    analytics.track('overlay: show graphiql')
-    this.setState({ showData: false } as State)
+    ReactGA.event(events.OverlayShowGraphiQL)
+    this.setState({showData: false} as State)
   }
 }
 

src/components/SharePanel/SharePanel.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react'
-import {getStoredState} from '../../utils/statestore'
-import {throttle} from 'lodash'
+import { getStoredState } from '../../utils/statestore'
+import { throttle } from 'lodash'
 import * as classNames from 'classnames'
 const styles: any = require('./SharingPanel.module.styl')
+import { events } from '../../utils/events'
+import TrackLink from '../TrackLink/TrackLink'
 
 interface Props {
 }
@@ -70,22 +72,24 @@ export default class SharePanel extends React.Component<Props, {}> {
             paddingBottom: '2rem',
           }}
           >
-            <a
+            <TrackLink
+              event={events.SharePanelTwitter}
               href={`http://www.twitter.com/share?url=${shareUrl}&text=${shareTitle}`}
               target='_blank'
               className={styles.button}
               style={{background: '#3cf'}}
             >
               Share on Twitter
-            </a>
-            <a
+            </TrackLink>
+            <TrackLink
+              event={events.SharePanelFacebook}
               href={`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}&t=${shareTitle}`}
               target='_blank'
               className={classNames(styles.button, {'ml2': displayMode !== 'medium'})}
               style={{background: '#3b5998'}}
             >
               Share on Facebook
-            </a>
+            </TrackLink>
           </div>
         </div>
       </div>

src/components/Sharing/Sharing.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react'
 import {StoredState} from '../../utils/statestore'
+import * as ReactGA from 'react-ga'
+import { events } from '../../utils/events'
+import TrackLink from '../TrackLink/TrackLink'
 
 const styles: any = require('./Sharing.module.styl')
 
@@ -53,22 +56,24 @@ export default class Sharing extends React.Component<Props, State> {
             marginBottom: '2rem',
           }}
         >
-          <a
+          <TrackLink
+            event={events.ShareWrapupTwitter}
             href={`http://www.twitter.com/share?url=${shareUrl}&text=${shareTitle}`}
             target='_blank'
             className={styles.button}
             style={{background: '#3cf'}}
           >
             Share on Twitter
-          </a>
-          <a
+          </TrackLink>
+          <TrackLink
+            event={events.ShareWrapupTwitter}
             href={`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}&t=${shareTitle}`}
             target='_blank'
             className={`ml2 ${styles.button}`}
             style={{background: '#3b5998'}}
           >
             Share on Facebook
-          </a>
+          </TrackLink>
         </div>
         <h1
           className='accent'
@@ -131,7 +136,7 @@ export default class Sharing extends React.Component<Props, State> {
   private submit = () => {
     const { email } = this.state
 
-    analytics.track('join slack', { email })
+    ReactGA.event(events.JoinSlack)
 
     fetch('https://slack.graph.cool/invite', {
       method: 'POST',