PLT-5071: Client side component of Telemetry. (#5516)

webapp/components/tutorial/tutorial_tip.jsx

@@ -4,6 +4,7 @@
 import UserStore from 'stores/user_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
+import {trackEvent} from 'actions/diagnostics_actions.jsx';
 
 import Constants from 'utils/constants.jsx';
 
@@ -25,6 +26,7 @@ export default class TutorialTip extends React.Component {
 
         this.handleNext = this.handleNext.bind(this);
         this.toggle = this.toggle.bind(this);
+        this.skipTutorial = this.skipTutorial.bind(this);
 
         this.state = {currentScreen: 0, show: false};
     }
@@ -48,6 +50,22 @@ export default class TutorialTip extends React.Component {
             return;
         }
 
+        if (this.props.diagnosticsTag) {
+            let tag = this.props.diagnosticsTag;
+
+            if (this.props.screens.length > 1) {
+                tag += '_' + (this.state.currentScreen + 1).toString();
+            }
+
+            if (this.state.currentScreen === this.props.screens.length - 1) {
+                tag += '_okay';
+            } else {
+                tag += '_next';
+            }
+
+            trackEvent('tutorial', tag);
+        }
+
         this.closeRightSidebar();
         this.toggle();
     }
@@ -62,6 +80,15 @@ export default class TutorialTip extends React.Component {
     skipTutorial(e) {
         e.preventDefault();
 
+        if (this.props.diagnosticsTag) {
+            let tag = this.props.diagnosticsTag;
+            if (this.props.screens.length > 1) {
+                tag += '_' + this.state.currentScreen;
+            }
+            tag += '_skip';
+            trackEvent('tutorial', tag);
+        }
+
         AsyncClient.savePreference(
             Preferences.TUTORIAL_STEP,
             UserStore.getCurrentId(),
@@ -174,7 +201,8 @@ TutorialTip.defaultProps = {
 TutorialTip.propTypes = {
     screens: React.PropTypes.array.isRequired,
     placement: React.PropTypes.string.isRequired,
-    overlayClass: React.PropTypes.string
+    overlayClass: React.PropTypes.string,
+    diagnosticsTag: React.PropTypes.string
 };
 
 export function createMenuTip(toggleFunc, onBottom) {
@@ -207,6 +235,7 @@ export function createMenuTip(toggleFunc, onBottom) {
                 placement={placement}
                 screens={screens}
                 overlayClass={'tip-overlay--header--' + arrow}
+                diagnosticsTag='tutorial_tip_3_main_menu'
             />
         </div>
     );