Merge pull request #2 from amacar/add-analytics-and-events

Add analytics and events
MyCryptoHQ · Feb 19, 2019 · 8f8508f · 8f8508f
2 parents 36f3bf6 + 5cb9fb7
commit 8f8508f
Show file tree

Hide file tree

Showing 9 changed files with 353 additions and 251 deletions.
diff --git a/common/components/ElectronNav/LanguageSelect.tsx b/common/components/ElectronNav/LanguageSelect.tsx
@@ -1,58 +1,60 @@
-import React from 'react';
-import classnames from 'classnames';
-import { connect } from 'react-redux';
-
-import { languages } from 'config';
-import { AppState } from 'features/reducers';
-import { configMetaActions, configMetaSelectors } from 'features/config';
-import './LanguageSelect.scss';
-
-interface OwnProps {
-  closePanel(): void;
-}
-
-interface StateProps {
-  languageSelection: string;
-}
-
-interface DispatchProps {
-  changeLanguage: configMetaActions.TChangeLanguage;
-}
-
-type Props = OwnProps & StateProps & DispatchProps;
-
-class LanguageSelect extends React.Component<Props> {
-  public render() {
-    const { languageSelection } = this.props;
-    return (
-      <div className="LanguageSelect">
-        {Object.entries(languages).map(lang => (
-          <button
-            key={lang[0]}
-            className={classnames({
-              'LanguageSelect-language': true,
-              'is-selected': languageSelection === lang[0]
-            })}
-            onClick={() => this.handleLanguageSelect(lang[0])}
-          >
-            {lang[1]}
-          </button>
-        ))}
-      </div>
-    );
-  }
-
-  private handleLanguageSelect = (lang: string) => {
-    this.props.changeLanguage(lang);
-    this.props.closePanel();
-  };
-}
-
-export default connect(
-  (state: AppState): StateProps => ({
-    languageSelection: configMetaSelectors.getLanguageSelection(state)
-  }),
-  {
-    changeLanguage: configMetaActions.changeLanguage
-  }
-)(LanguageSelect);
+import React from 'react';
+import classnames from 'classnames';
+import { connect } from 'react-redux';
+
+import { AnalyticsService, ANALYTICS_CATEGORIES } from 'v2/services';
+import { languages } from 'config';
+import { AppState } from 'features/reducers';
+import { configMetaActions, configMetaSelectors } from 'features/config';
+import './LanguageSelect.scss';
+
+interface OwnProps {
+  closePanel(): void;
+}
+
+interface StateProps {
+  languageSelection: string;
+}
+
+interface DispatchProps {
+  changeLanguage: configMetaActions.TChangeLanguage;
+}
+
+type Props = OwnProps & StateProps & DispatchProps;
+
+class LanguageSelect extends React.Component<Props> {
+  public render() {
+    const { languageSelection } = this.props;
+    return (
+      <div className="LanguageSelect">
+        {Object.entries(languages).map(lang => (
+          <button
+            key={lang[0]}
+            className={classnames({
+              'LanguageSelect-language': true,
+              'is-selected': languageSelection === lang[0]
+            })}
+            onClick={() => this.handleLanguageSelect(lang[0])}
+          >
+            {lang[1]}
+          </button>
+        ))}
+      </div>
+    );
+  }
+
+  private handleLanguageSelect = (lang: string) => {
+    this.props.changeLanguage(lang);
+    this.props.closePanel();
+    AnalyticsService.instance.track(ANALYTICS_CATEGORIES.SIDEBAR, 'Language changed', { lang });
+  };
+}
+
+export default connect(
+  (state: AppState): StateProps => ({
+    languageSelection: configMetaSelectors.getLanguageSelection(state)
+  }),
+  {
+    changeLanguage: configMetaActions.changeLanguage
+  }
+)(LanguageSelect);
diff --git a/common/components/Header/NewHeader/components/DesktopHeader.tsx b/common/components/Header/NewHeader/components/DesktopHeader.tsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
+import { AnalyticsService, ANALYTICS_CATEGORIES } from 'v2/services';
 import { languages } from 'config';
 import { translateRaw } from 'translations';
 import { AppState } from 'features/reducers';
@@ -69,19 +70,35 @@ class DesktopHeader extends Component<Props> {
             <section className="DesktopHeader-top-left">
               <ul className="DesktopHeader-top-links">
                 <li>
-                  <a href="https://support.mycrypto.com/" target="_blank" rel="noopener noreferrer">
+                  <a
+                    onClick={this.trackHelpSupportClick}
+                    href="https://support.mycrypto.com/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
                     {translateRaw('NEW_HEADER_TEXT_1')} <i className="fa fa-caret-right" />
                   </a>
                 </li>
                 <li>
-                  <a href="https://medium.com/@mycrypto" target="_blank" rel="noopener noreferrer">
+                  <a
+                    onClick={this.trackLatestNewsClick}
+                    href="https://medium.com/@mycrypto"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
                     {translateRaw('NEW_HEADER_TEXT_2')} <i className="fa fa-caret-right" />
                   </a>
                 </li>
               </ul>
             </section>
             <section className="DesktopHeader-top-center">
-              <Link to="/" onClick={() => setAccessMessage('')}>
+              <Link
+                to="/"
+                onClick={() => {
+                  setAccessMessage('');
+                  this.trackHomeIconClick();
+                }}
+              >
                 <img src={logo} alt="Our logo" />
               </Link>
             </section>
@@ -183,6 +200,18 @@ class DesktopHeader extends Component<Props> {
       changeNodeRequestedOneTime(networkParam!);
     }
   };
+
+  private trackHelpSupportClick = (): void => {
+    AnalyticsService.instance.trackLegacy(ANALYTICS_CATEGORIES.HEADER, 'Help & Support clicked');
+  };
+
+  private trackLatestNewsClick = (): void => {
+    AnalyticsService.instance.trackLegacy(ANALYTICS_CATEGORIES.HEADER, 'Latest News clicked');
+  };
+
+  private trackHomeIconClick = (): void => {
+    AnalyticsService.instance.trackLegacy(ANALYTICS_CATEGORIES.HEADER, 'Home Icon clicked');
+  };
 }
 
 const mapStateToProps = (state: AppState, { networkParam }: any) => ({

diff --git a/common/components/Header/NewHeader/components/MobileHeader.tsx b/common/components/Header/NewHeader/components/MobileHeader.tsx
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Transition } from 'react-spring';
 
+import { AnalyticsService, ANALYTICS_CATEGORIES } from 'v2/services';
 import { languages } from 'config';
 import { translateRaw } from 'translations';
 import { AppState } from 'features/reducers';
@@ -73,7 +74,13 @@ class MobileHeader extends Component<Props> {
             <i className={menuIcon} />
           </section>
           <section className="MobileHeader-top-logo">
-            <Link to="/" onClick={() => setAccessMessage('')}>
+            <Link
+              to="/"
+              onClick={() => {
+                setAccessMessage('');
+                this.trackHomeIconClick();
+              }}
+            >
               <img src={logo} alt="Our logo" />
             </Link>
           </section>
@@ -155,6 +162,7 @@ class MobileHeader extends Component<Props> {
                 <ul className="MobileHeader-menu-bottom">
                   <li>
                     <a
+                      onClick={this.trackHelpSupportClick}
                       href="https://support.mycrypto.com/"
                       target="_blank"
                       rel="noopener noreferrer"
@@ -164,6 +172,7 @@ class MobileHeader extends Component<Props> {
                   </li>
                   <li>
                     <a
+                      onClick={this.trackLatestNewsClick}
                       href="https://medium.com/@mycrypto"
                       target="_blank"
                       rel="noopener noreferrer"
@@ -203,6 +212,18 @@ class MobileHeader extends Component<Props> {
       changeNodeRequestedOneTime(networkParam!);
     }
   };
+
+  private trackHelpSupportClick = (): void => {
+    AnalyticsService.instance.trackLegacy(ANALYTICS_CATEGORIES.HEADER, 'Help & Support clicked');
+  };
+
+  private trackLatestNewsClick = (): void => {
+    AnalyticsService.instance.trackLegacy(ANALYTICS_CATEGORIES.HEADER, 'Latest News clicked');
+  };
+
+  private trackHomeIconClick = (): void => {
+    AnalyticsService.instance.trackLegacy(ANALYTICS_CATEGORIES.HEADER, 'Home Icon clicked');
+  };
 }
 
 const mapStateToProps = (state: AppState, { networkParam }: any) => ({