Don't go through segment

A. Maybe fix lack of GA referrer problem?
B. Cost, and only using two destinations

Author: lorensr

package-lock.json

@@ -35,6 +35,7 @@
     "react": "^16.2.0",
     "react-apollo": "^2.1.3",
     "react-dom": "^16.3.2",
+    "react-ga": "^2.5.3",
     "react-loading-skeleton": "^0.3.2",
     "react-markdown": "^3.3.0",
     "react-odometerjs": "^2.0.0",

package.json

@@ -61,14 +61,9 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
 
-  <script>
-    !function () {
-      var analytics = window.analytics = window.analytics || []; if (!analytics.initialize) if (analytics.invoked) window.console && console.error && console.error("Segment snippet included twice."); else {
-        analytics.invoked = !0; analytics.methods = ["trackSubmit", "trackClick", "trackLink", "trackForm", "pageview", "identify", "reset", "group", "track", "ready", "alias", "debug", "page", "once", "off", "on"]; analytics.factory = function (t) { return function () { var e = Array.prototype.slice.call(arguments); e.unshift(t); analytics.push(e); return analytics } }; for (var t = 0; t < analytics.methods.length; t++) { var e = analytics.methods[t]; analytics[e] = analytics.factory(e) } analytics.load = function (t, e) { var n = document.createElement("script"); n.type = "text/javascript"; n.async = !0; n.src = ("https:" === document.location.protocol ? "https://" : "http://") + "cdn.segment.com/analytics.js/v1/" + t + "/analytics.min.js"; var o = document.getElementsByTagName("script")[0]; o.parentNode.insertBefore(n, o); analytics._loadOptions = e }; analytics.SNIPPET_VERSION = "4.1.0";
-        analytics.load("yLpaTOLBdUXKuWMOcJy87R2GIt5Bativ");
-        analytics.page();
-      }
-    }();
+  <script type="text/javascript">
+    window.heap = window.heap || [], heap.load = function (e, t) { window.heap.appid = e, window.heap.config = t = t || {}; var r = t.forceSSL || "https:" === document.location.protocol, a = document.createElement("script"); a.type = "text/javascript", a.async = !0, a.src = (r ? "https:" : "http:") + "//cdn.heapanalytics.com/js/heap-" + e + ".js"; var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(a, n); for (var o = function (e) { return function () { heap.push([e].concat(Array.prototype.slice.call(arguments, 0))) } }, p = ["addEventProperties", "addUserProperties", "clearEventProperties", "identify", "resetIdentity", "removeEventProperty", "setEventProperties", "track", "unsetEventProperty"], c = 0; c < p.length; c++)heap[p[c]] = o(p[c]) };
+    heap.load('3557733793');
   </script>
 </body>
 

public/index.html

@@ -5,10 +5,11 @@ import { Router } from 'react-router-dom'
 import { createBrowserHistory } from 'history'
 import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'
 import { CloudinaryContext } from 'cloudinary-react'
+import ReactGA from 'react-ga'
 
 import './index.css'
 import './lib/common.css'
-import './lib/logrocket'
+import './startup/'
 import registerServiceWorker from './registerServiceWorker'
 import App from './components/App'
 import { apollo, inDevelopment } from './lib/apollo'
@@ -21,7 +22,7 @@ const theme = createMuiTheme({
 
 const history = createBrowserHistory()
 history.listen(location => {
-  window.analytics.page(location.pathname)
+  ReactGA.pageview(location.pathname)
 })
 
 const render = Component => {

src/index.js

@@ -2,6 +2,7 @@ import { Component } from 'react'
 import gql from 'graphql-tag'
 
 import { apollo } from './apollo'
+import track from './track'
 
 // https://stripe.com/docs/checkout#integration-custom
 // https://stripe.com/docs/checkout/express
@@ -90,28 +91,34 @@ export const stripeCheckout = (packageInfo, routerHistory) => {
 
         // todo show spinner
 
+        const { key: packageName, licenses: teamLicenses } = packageInfo
+
         // https://www.apollographql.com/docs/react/api/apollo-client.html#ApolloClient.mutate
         const response = await apollo.mutate({
           mutation: CHARGE_MUTATION,
           variables: {
             input: {
-              package: packageInfo.key,
+              package: packageName,
               stripeToken: id,
-              teamLicenses: packageInfo.licenses,
+              teamLicenses,
               email,
               addresses
             }
           }
         })
 
-        console.log(response)
         // todo switch to thrown error message instead of {charge: false}
         if (!response.data || !response.data.charge) {
           alert('Charge failed 🤷‍♀️. Please try another payment method.')
           return
         }
 
         routerHistory.push('/welcome')
+
+        track('purchase', {
+          packageName,
+          teamLicenses
+        })
       }
     })
   })

src/lib/payment.js

@@ -0,0 +1,28 @@
+import ReactGA from 'react-ga'
+import find from 'lodash/find'
+import defer from 'lodash/defer'
+
+const EVENTS = [
+  {
+    name: 'purchase',
+    category: 'User'
+  }
+]
+
+const track = (name, data) => {
+  defer(() => {
+    const event = find(EVENTS, { name })
+    if (!event) {
+      throw new Error('unknown event type—add it to track.js')
+    }
+
+    ReactGA.event({
+      category: event.category,
+      action: name,
+      ...(data.package && { label: data.package })
+    })
+    window.heap.track(name, data)
+  })
+}
+
+export default track

src/lib/track.js

@@ -7,6 +7,8 @@ import gql from 'graphql-tag'
 import auth0 from 'auth0-js'
 import { initAuthHelpers, login, logout } from 'auth0-helpers'
 import LogRocket from 'logrocket'
+import defer from 'lodash/defer'
+import ReactGA from 'react-ga'
 
 import { associateToken } from '../lib/payment'
 
@@ -67,14 +69,14 @@ function withAuth(BaseComponent) {
         loggingIn: false
       }
 
-      this.onCreateOrUpdate()
+      defer(this.onCreateOrUpdate)
     }
 
     componentDidUpdate() {
       this.onCreateOrUpdate()
     }
 
-    onCreateOrUpdate() {
+    onCreateOrUpdate = () => {
       const { currentUser } = this.props
       if (!currentUser) {
         return
@@ -92,7 +94,12 @@ function withAuth(BaseComponent) {
         hasPurchased
       }
 
-      window.analytics.identify(id, userData)
+      window.heap.identify(id, 'ID')
+      window.heap.addUserProperties(userData)
+      ReactGA.set({
+        id,
+        ...userData
+      })
       LogRocket.identify(id, userData)
 
       this.lastCurrentUser = currentUser

src/lib/withAuth.js

@@ -0,0 +1,3 @@
+import ReactGA from 'react-ga'
+
+ReactGA.initialize('UA-96115966-1')

src/startup/google-analytics.js

@@ -0,0 +1,4 @@
+import './google-analytics'
+// heap set up in index.html
+
+import './logrocket'