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

2 files changed, 56 insertions, 1 deletions

diff --git a/webapp/components/tutorial/tutorial_intro_screens.jsx b/webapp/components/tutorial/tutorial_intro_screens.jsx
index a0b6118d3..c266191b8 100644
--- a/webapp/components/tutorial/tutorial_intro_screens.jsx
+++ b/webapp/components/tutorial/tutorial_intro_screens.jsx
@@ -6,6 +6,7 @@ import TeamStore from 'stores/team_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
+import {trackEvent} from 'actions/diagnostics_actions.jsx';
 
 import {Constants, Preferences} from 'utils/constants.jsx';
 
@@ -31,10 +32,23 @@ export default class TutorialIntroScreens extends React.Component {
         this.handleNext = this.handleNext.bind(this);
         this.createScreen = this.createScreen.bind(this);
         this.createCircles = this.createCircles.bind(this);
+        this.skipTutorial = this.skipTutorial.bind(this);
 
         this.state = {currentScreen: 0};
     }
     handleNext() {
+        switch (this.state.currentScreen) {
+        case 0:
+            trackEvent('tutorial', 'tutorial_screen_1_welcome_to_mattermost_next');
+            break;
+        case 1:
+            trackEvent('tutorial', 'tutorial_screen_2_how_mattermost_works_next');
+            break;
+        case 2:
+            trackEvent('tutorial', 'tutorial_screen_3_youre_all_set_next');
+            break;
+        }
+
         if (this.state.currentScreen < 2) {
             this.setState({currentScreen: this.state.currentScreen + 1});
             return;
@@ -53,6 +67,18 @@ export default class TutorialIntroScreens extends React.Component {
     skipTutorial(e) {
         e.preventDefault();
 
+        switch (this.state.currentScreen) {
+        case 0:
+            trackEvent('tutorial', 'tutorial_screen_1_welcome_to_mattermost_skip');
+            break;
+        case 1:
+            trackEvent('tutorial', 'tutorial_screen_2_how_mattermost_works_skip');
+            break;
+        case 2:
+            trackEvent('tutorial', 'tutorial_screen_3_youre_all_set_skip');
+            break;
+        }
+
         AsyncClient.savePreference(
             Preferences.TUTORIAL_STEP,
             UserStore.getCurrentId(),
diff --git a/webapp/components/tutorial/tutorial_tip.jsx b/webapp/components/tutorial/tutorial_tip.jsx
index 7b613fe51..e78668b10 100644
--- a/webapp/components/tutorial/tutorial_tip.jsx
+++ b/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>
     );