use the GA code that is injected into the app dynamically and instrument our...

use the GA code that is injected into the app dynamically and instrument our setup steps so we know if people fail on install.

frontend/app/services.js

@@ -233,9 +233,10 @@ MetabaseServices.factory('AppState', ['$rootScope', '$q', '$location', '$interva
 
         // enable / disable GA based on opt-out of anonymous tracking
         $rootScope.$on("appstate:site-settings", function(event, settings) {
+            const ga_code = MetabaseSettings.get('ga_code');
             if (MetabaseSettings.isTrackingEnabled()) {
                 // we are doing tracking
-                window['ga-disable-UA-60817802-1'] = null;
+                window['ga-disable-'+ga_code] = null;
 
                 if (currentUserPromise) {
                     currentUserPromise.then(function(user) {
@@ -244,7 +245,7 @@ MetabaseServices.factory('AppState', ['$rootScope', '$q', '$location', '$interva
                 }
             } else {
                 // tracking is disabled
-                window['ga-disable-UA-60817802-1'] = true;
+                window['ga-disable-'+ga_code] = true;
 
                 teardownIntercom();
             }

frontend/app/setup/components/DatabaseStep.react.js

@@ -3,6 +3,7 @@ import _ from "underscore";
 
 import DatabaseDetailsForm from "metabase/components/database/DatabaseDetailsForm.react";
 import FormField from "metabase/components/form/FormField.react";
+import MetabaseAnalytics from "metabase/lib/analytics";
 import MetabaseCore from "metabase/lib/core";
 
 import StepTitle from './StepTitle.react'
@@ -23,6 +24,8 @@ export default class DatabaseStep extends Component {
         this.setState({
             'engine': engine
         });
+
+        MetabaseAnalytics.trackEvent('Setup', 'Choose Database', engine);
     }
 
     async detailsCaptured(details) {
@@ -39,6 +42,8 @@ export default class DatabaseStep extends Component {
                 'nextStep': ++this.props.stepNumber,
                 'details': details
             }));
+
+            MetabaseAnalytics.trackEvent('Setup', 'Database Step', this.state.engine);
         } catch (error) {
             this.setState({
                 'formError': error
@@ -55,6 +60,8 @@ export default class DatabaseStep extends Component {
             'nextStep': ++this.props.stepNumber,
             'details': null
         }));
+
+        MetabaseAnalytics.trackEvent('Setup', 'Database Step');
     }
 
     renderEngineSelect() {

frontend/app/setup/components/PreferencesStep.react.js

 import React, { Component, PropTypes } from "react";
 
+import MetabaseAnalytics from "metabase/lib/analytics";
 import Toggle from "metabase/components/Toggle.react";
 
 import StepTitle from './StepTitle.react';
@@ -20,6 +21,8 @@ export default class PreferencesStep extends Component {
 
         // okay, this is the big one.  we actually submit everything to the api now and complete the process.
         this.props.dispatch(submitSetup());
+
+        MetabaseAnalytics.trackEvent('Setup', 'Preferences Step');
     }
 
     render() {

frontend/app/setup/components/Setup.react.js

 import React, { Component, PropTypes } from "react";
 
 import LogoIcon from 'metabase/components/LogoIcon.react';
+import MetabaseAnalytics from "metabase/lib/analytics";
 import MetabaseSettings from "metabase/lib/settings";
 
 import UserStep from './UserStep.react';
@@ -19,6 +20,11 @@ export default class Setup extends Component {
 
     completeWelcome() {
         this.props.dispatch(setActiveStep(USER_STEP_NUMBER));
+        MetabaseAnalytics.trackEvent('Setup', 'Welcome');
+    }
+
+    completeSetup() {
+        MetabaseAnalytics.trackEvent('Setup', 'Complete');
     }
 
     renderFooter() {
@@ -69,7 +75,7 @@ export default class Setup extends Component {
                                 <section className="SetupStep rounded SetupStep--active flex flex-column layout-centered p4">
                                     <h1 style={{fontSize: "xx-large"}} className="text-normal pt2">You're all set up!</h1>
                                     <div className="pt4 pb2">
-                                        <a className="Button Button--primary" href="/">Take me to Metabase</a>
+                                        <a className="Button Button--primary" href="/" onClick={this.completeSetup.bind(this)}>Take me to Metabase</a>
                                     </div>
                                 </section>
                             : null }

frontend/app/setup/components/UserStep.react.js

@@ -5,6 +5,7 @@ import cx from "classnames";
 import FormField from "metabase/components/form/FormField.react";
 import FormLabel from "metabase/components/form/FormLabel.react";
 import FormMessage from "metabase/components/form/FormMessage.react";
+import MetabaseAnalytics from "metabase/lib/analytics";
 import MetabaseSettings from "metabase/lib/settings";
 import MetabaseUtils from "metabase/lib/utils";
 
@@ -99,6 +100,8 @@ export default class UserStep extends Component {
                 'site_name': React.findDOMNode(this.refs.siteName).value
             }
         }));
+
+        MetabaseAnalytics.trackEvent('Setup', 'User Details Step');
     }
 
     render() {

resources/frontend_client/index_template.html

@@ -37,9 +37,13 @@
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
     })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
-    // start off with tracking disabled (the angular app will re-enable this once we know the app runtime settings)
-    window['ga-disable-UA-60817802-1'] = true;
-
-    ga('create', 'UA-60817802-1', 'auto');
+    // if we are not doing tracking then go ahead and disable GA now so we never even track the initial pageview
+    const tracking = window.MetabaseBootstrap.anon_tracking_enabled;
+    const ga_code = window.MetabaseBootstrap.ga_code;
+    if (!tracking) {
+        window['ga-disable-'+ga_code] = true;
+    }
+
+    ga('create', ga_code, 'auto');
     </script>
 </html>