ref(analytics): Replace amplitude with analytics:track-event (#13536)

Author: evanpurkhiser

src/sentry/static/sentry/app/stores/hookStore.jsx

@@ -11,9 +11,12 @@ const validHookNames = new Set([
   'routes:organization-root',
 
   // Analytics and tracking hooks
-  'amplitude:event',
-  'analytics:event',
   'analytics:init-user',
+  'analytics:track-event',
+  'analytics:track-adhoc-event',
+
+  // TODO(epurkhser): This is deprecated and should be replaced
+  'analytics:event',
 
   // Operational metrics
   'metrics:event',

src/sentry/static/sentry/app/utils/analytics.jsx

@@ -1,34 +1,70 @@
 import HookStore from 'app/stores/hookStore';
 
 /**
- * If the backend for `analytics` is reload, you will need to add the event `name`
- * to the inclusion list in https://github.com/getsentry/reload/blob/master/reload_app/events.py
+ * Analytics and metric tracking functionality.
  *
+ * These are primarily driven through hooks provided through the hookstore. For
+ * sentry.io these are currently mapped to our in-house analytics backend
+ * 'Reload' and the Amplitude service.
  *
- * If you are using `gauge` or `increment`, the metric names need to be added to
- * https://github.com/getsentry/reload/blob/master/reload_app/metrics/__init__.py
+ * NOTE: sentry.io contributors, you will need to nesure that the eventKey
+ *       passed exists as an event key in the Reload events.py configuration:
+ *
+ *       https://github.com/getsentry/reload/blob/master/reload_app/events.py
+ *
+ * NOTE: sentry.io contributors, if you are using `gauge` or `increment` the
+ *       name must be added to the Reload metrics module:
+ *
+ *       https://github.com/getsentry/reload/blob/master/reload_app/metrics/__init__.py
+ */
+
+/**
+ * This should be primarily used for product events. In that case where you
+ * want to track some one-off Adhoc events, use the `trackAdhocEvent` function.
+ *
+ * Generally this is the function you will want to use for event tracking.
+ *
+ * Refer for the backend implementation provided through HookStore for more
+ * details.
+ *
+ * @param {Object} options Event tracking options
+ * @param {String} options.eventKey The string key of the event to track
+ * @param {String} options.name The human readable string name of the event
+ * @param {...Object} options.data The parameters of the event to track
+ */
+export const trackAnalyticsEvent = options =>
+  HookStore.get('analytics:track-event').forEach(cb => cb(options));
+
+/**
+ * This should be used for adhoc analytics tracking.
+ *
+ * This is used for high volume events, and events with unbounded parameters,
+ * such as tracking search queries.
+ *
+ * Refer for the backend implementation provided through HookStore for a more
+ * thorough explanation of when to use this.
+ *
+ * @param {Object} options Event tracking options
+ * @param {String} options.eventKey The string key of the event to track
+ * @param {...Object} options.data The parameters of the event to track
  */
+export const trackAdhocEvent = options =>
+  HookStore.get('analytics:track-adhoc-event').forEach(cb => cb(options));
 
 /**
  * @param {String} name The name of the event
  * @param {Object} data Additional event data to record
  */
-export function analytics(name, data) {
+export const analytics = (name, data) =>
   HookStore.get('analytics:event').forEach(cb => cb(name, data));
-}
-
-export function amplitude(name, organization_id, data) {
-  HookStore.get('amplitude:event').forEach(cb => cb(name, organization_id, data));
-}
 
 /**
  * @param {String} name Metric name
  * @param {Number} value Value to record for this metric
  * @param {Object} tags An additional tags object
  */
-export function metric(name, value, tags) {
+export const metric = (name, value, tags) =>
   HookStore.get('metrics:event').forEach(cb => cb(name, value, tags));
-}
 
 // JSDOM implements window.performance but not window.performance.mark
 const CAN_MARK =

src/sentry/static/sentry/app/views/onboarding/configure.jsx

@@ -2,8 +2,8 @@ import {browserHistory} from 'react-router';
 import React from 'react';
 import styled from 'react-emotion';
 
-import {analytics, amplitude} from 'app/utils/analytics';
 import {t} from 'app/locale';
+import {trackAnalyticsEvent} from 'app/utils/analytics';
 import Button from 'app/components/button';
 import ProjectContext from 'app/views/projects/projectContext';
 import ProjectInstallPlatform from 'app/views/projectInstall/platform';
@@ -23,19 +23,15 @@ class Configure extends React.Component {
 
   componentDidMount() {
     const {organization, params} = this.props;
-    const data = {
+
+    trackAnalyticsEvent({
+      eventKey: 'onboarding.configure_viewed',
+      eventName: 'Viewed Onboarding Installation Instructions',
+      organization_id: organization.id,
       project: params.projectId,
       platform: params.platform,
-    };
-
-    amplitude(
-      'Viewed Onboarding Installation Instructions',
-      parseInt(organization.id, 10),
-      data
-    );
+    });
 
-    data.org_id = parseInt(organization.id, 10);
-    analytics('onboarding.configure_viewed', data);
     this.sentRealEvent();
   }
 
@@ -64,12 +60,13 @@ class Configure extends React.Component {
   submit = () => {
     const {organization} = this.props;
     const {projectId} = this.props.params;
-    analytics('onboarding.complete', {project: projectId});
-    amplitude(
-      'Completed Onboarding Installation Instructions',
-      parseInt(organization.id, 10),
-      {projectId}
-    );
+
+    trackAnalyticsEvent({
+      eventKey: 'onboarding.complete',
+      eventName: 'Completed Onboarding Installation Instructions',
+      organization_id: organization.id,
+      projectId,
+    });
     this.redirectUrl();
   };
 

src/sentry/static/sentry/app/views/onboarding/progress.jsx

@@ -3,8 +3,8 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import styled from 'react-emotion';
 
-import {analytics, amplitude} from 'app/utils/analytics';
 import {onboardingSteps, stepDescriptions} from 'app/views/onboarding/utils';
+import {trackAnalyticsEvent} from 'app/utils/analytics';
 import ConfigStore from 'app/stores/configStore';
 import HookStore from 'app/stores/hookStore';
 import InlineSvg from 'app/components/inlineSvg';
@@ -27,10 +27,11 @@ const ProgressNodes = createReactClass({
     const step = this.inferStep();
 
     if (step === 1) {
-      analytics('onboarding.create_project_viewed', {
-        org_id: parseInt(organization.id, 10),
+      trackAnalyticsEvent({
+        eventKey: 'onboarding.create_project_viewed',
+        eventName: 'Viewed Onboarding Create Project',
+        organization_id: organization.id,
       });
-      amplitude('Viewed Onboarding Create Project', parseInt(organization.id, 10));
     }
   },