From f90ff2160a6224faa67750be75da12977c665904 Mon Sep 17 00:00:00 2001
From: Amadej <amadej.pevec@gmail.com>
Date: Tue, 12 Feb 2019 12:26:33 +0100
Subject: [PATCH 1/5] Analytics - track Help, News, Home clicks

---
 .../NewHeader/components/DesktopHeader.tsx    | 35 +++++++++++++++++--
 .../NewHeader/components/MobileHeader.tsx     | 23 +++++++++++-
 2 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/common/components/Header/NewHeader/components/DesktopHeader.tsx b/common/components/Header/NewHeader/components/DesktopHeader.tsx
index aa06984c0d1..bd459880924 100644
--- 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 } 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.track('Legacy_Help & Support clicked');
+  };
+
+  private trackLatestNewsClick = (): void => {
+    AnalyticsService.instance.track('Legacy_Latest News clicked');
+  };
+
+  private trackHomeIconClick = (): void => {
+    AnalyticsService.instance.track('Legacy_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
index b3dcc0d5cd3..dadd208aea4 100644
--- 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 } 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.track('Legacy_Help & Support clicked');
+  };
+
+  private trackLatestNewsClick = (): void => {
+    AnalyticsService.instance.track('Legacy_Latest News clicked');
+  };
+
+  private trackHomeIconClick = (): void => {
+    AnalyticsService.instance.track('Legacy_Home Icon clicked');
+  };
 }
 
 const mapStateToProps = (state: AppState, { networkParam }: any) => ({

From c2a603cd5f20e8f284477d69be7f23831379c6dd Mon Sep 17 00:00:00 2001
From: Amadej <amadej.pevec@gmail.com>
Date: Wed, 13 Feb 2019 12:55:24 +0100
Subject: [PATCH 2/5] Update track calls

---
 .../Header/NewHeader/components/DesktopHeader.tsx         | 8 ++++----
 .../Header/NewHeader/components/MobileHeader.tsx          | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/common/components/Header/NewHeader/components/DesktopHeader.tsx b/common/components/Header/NewHeader/components/DesktopHeader.tsx
index bd459880924..7c74843baf8 100644
--- a/common/components/Header/NewHeader/components/DesktopHeader.tsx
+++ b/common/components/Header/NewHeader/components/DesktopHeader.tsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-import { AnalyticsService } from 'v2/services';
+import { AnalyticsService, ANALYTICS_CATEGORIES } from 'v2/services';
 import { languages } from 'config';
 import { translateRaw } from 'translations';
 import { AppState } from 'features/reducers';
@@ -202,15 +202,15 @@ class DesktopHeader extends Component<Props> {
   };
 
   private trackHelpSupportClick = (): void => {
-    AnalyticsService.instance.track('Legacy_Help & Support clicked');
+    AnalyticsService.instance.trackLegacy(ANALYTICS_CATEGORIES.HEADER, 'Help & Support clicked');
   };
 
   private trackLatestNewsClick = (): void => {
-    AnalyticsService.instance.track('Legacy_Latest News clicked');
+    AnalyticsService.instance.trackLegacy(ANALYTICS_CATEGORIES.HEADER, 'Latest News clicked');
   };
 
   private trackHomeIconClick = (): void => {
-    AnalyticsService.instance.track('Legacy_Home Icon clicked');
+    AnalyticsService.instance.trackLegacy(ANALYTICS_CATEGORIES.HEADER, 'Home Icon clicked');
   };
 }
 
diff --git a/common/components/Header/NewHeader/components/MobileHeader.tsx b/common/components/Header/NewHeader/components/MobileHeader.tsx
index dadd208aea4..e12377ac5ae 100644
--- a/common/components/Header/NewHeader/components/MobileHeader.tsx
+++ b/common/components/Header/NewHeader/components/MobileHeader.tsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Transition } from 'react-spring';
 
-import { AnalyticsService } from 'v2/services';
+import { AnalyticsService, ANALYTICS_CATEGORIES } from 'v2/services';
 import { languages } from 'config';
 import { translateRaw } from 'translations';
 import { AppState } from 'features/reducers';
@@ -214,15 +214,15 @@ class MobileHeader extends Component<Props> {
   };
 
   private trackHelpSupportClick = (): void => {
-    AnalyticsService.instance.track('Legacy_Help & Support clicked');
+    AnalyticsService.instance.trackLegacy(ANALYTICS_CATEGORIES.HEADER, 'Help & Support clicked');
   };
 
   private trackLatestNewsClick = (): void => {
-    AnalyticsService.instance.track('Legacy_Latest News clicked');
+    AnalyticsService.instance.trackLegacy(ANALYTICS_CATEGORIES.HEADER, 'Latest News clicked');
   };
 
   private trackHomeIconClick = (): void => {
-    AnalyticsService.instance.track('Legacy_Home Icon clicked');
+    AnalyticsService.instance.trackLegacy(ANALYTICS_CATEGORIES.HEADER, 'Home Icon clicked');
   };
 }
 

From dced6a6977dd53809447bddb2c6ec0377e2b45be Mon Sep 17 00:00:00 2001
From: Amadej <amadej.pevec@gmail.com>
Date: Wed, 13 Feb 2019 12:56:40 +0100
Subject: [PATCH 3/5] Analytics - track language change

---
 .../components/ElectronNav/LanguageSelect.tsx | 118 +++---
 common/components/Header/index.tsx            | 368 +++++++++---------
 .../Sidebar/components/SelectLanguage.tsx     |   4 +
 3 files changed, 250 insertions(+), 240 deletions(-)

diff --git a/common/components/ElectronNav/LanguageSelect.tsx b/common/components/ElectronNav/LanguageSelect.tsx
index 0d0cd12e622..e5d76c45295 100644
--- 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/index.tsx b/common/components/Header/index.tsx
index 2f6003fc34b..93cb1c0d38e 100644
--- a/common/components/Header/index.tsx
+++ b/common/components/Header/index.tsx
@@ -1,182 +1,186 @@
-import React, { Component } from 'react';
-import { MapStateToProps, connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-import classnames from 'classnames';
-
-import { ANNOUNCEMENT_MESSAGE, ANNOUNCEMENT_TYPE, languages } from 'config';
-import { NetworkConfig } from 'types/network';
-import { getKeyByValue } from 'utils/helpers';
-import logo from 'assets/images/logo-mycrypto.svg';
-import { OldDropDown } from 'components/ui';
-import {
-  configSelectors,
-  configMetaSelectors,
-  configNodesCustomActions,
-  configMetaActions,
-  configNetworksCustomActions,
-  configNodesSelectedActions,
-  configNodesSelectedSelectors,
-  configNodesStaticSelectors,
-  configNodesCustomTypes
-} from 'features/config';
-import { AppState } from 'features/reducers';
-import { transactionFieldsActions } from 'features/transaction';
-import CustomNodeModal from 'components/CustomNodeModal';
-import NetworkDropdown from './components/NetworkDropdown';
-import Navigation from './components/Navigation';
-import OnlineStatus from './components/OnlineStatus';
-import './index.scss';
-
-interface OwnProps {
-  networkParam: string | null;
-}
-
-interface DispatchProps {
-  changeLanguage: configMetaActions.TChangeLanguage;
-  changeNodeRequestedOneTime: configNodesSelectedActions.TChangeNodeRequestedOneTime;
-  setGasPriceField: transactionFieldsActions.TSetGasPriceField;
-  addCustomNode: configNodesCustomActions.TAddCustomNode;
-  removeCustomNode: configNodesCustomActions.TRemoveCustomNode;
-  addCustomNetwork: configNetworksCustomActions.TAddCustomNetwork;
-}
-
-interface StateProps {
-  shouldSetNodeFromQS: boolean;
-  network: NetworkConfig;
-  languageSelection: ReturnType<typeof configMetaSelectors.getLanguageSelection>;
-  isChangingNode: ReturnType<typeof configNodesSelectedSelectors.isNodeChanging>;
-  isOffline: ReturnType<typeof configMetaSelectors.getOffline>;
-}
-
-interface State {
-  isAddingCustomNode: boolean;
-}
-
-type Props = OwnProps & StateProps & DispatchProps;
-
-class Header extends Component<Props, State> {
-  public state = {
-    isAddingCustomNode: false
-  };
-
-  public componentDidMount() {
-    this.attemptSetNodeFromQueryParameter();
-  }
-
-  public render() {
-    const { languageSelection, isChangingNode, isOffline, network } = this.props;
-    const { isAddingCustomNode } = this.state;
-    const selectedLanguage = languageSelection;
-    const LanguageDropDown = OldDropDown as new () => OldDropDown<typeof selectedLanguage>;
-
-    return (
-      <div className="Header">
-        {ANNOUNCEMENT_MESSAGE && (
-          <div className={`Header-announcement is-${ANNOUNCEMENT_TYPE}`}>
-            {ANNOUNCEMENT_MESSAGE}
-          </div>
-        )}
-
-        <section className="Header-branding">
-          <section className="Header-branding-inner container">
-            <Link to="/" className="Header-branding-title" aria-label="Go to homepage">
-              <img
-                className="Header-branding-title-logo"
-                src={logo}
-                height="64px"
-                width="245px"
-                alt="MyCrypto logo"
-              />
-            </Link>
-            <div className="Header-branding-right">
-              <div className="Header-branding-right-online">
-                <OnlineStatus isOffline={isOffline} />
-              </div>
-
-              <div className="Header-branding-right-dropdown">
-                <LanguageDropDown
-                  ariaLabel={`change language. current language ${languages[selectedLanguage]}`}
-                  options={Object.values(languages)}
-                  value={languages[selectedLanguage]}
-                  onChange={this.changeLanguage}
-                  size="smr"
-                  color="white"
-                />
-              </div>
-              <div
-                className={classnames({
-                  'Header-branding-right-dropdown': true,
-                  'is-flashing': isChangingNode
-                })}
-              >
-                <NetworkDropdown openCustomNodeModal={this.openCustomNodeModal} />
-              </div>
-            </div>
-          </section>
-        </section>
-
-        <Navigation
-          color={!network.isCustom && network.color}
-          unsupportedTabs={network.unsupportedTabs}
-        />
-
-        <CustomNodeModal
-          isOpen={isAddingCustomNode}
-          addCustomNode={this.addCustomNode}
-          handleClose={this.closeCustomNodeModal}
-        />
-      </div>
-    );
-  }
-
-  public changeLanguage = (value: string) => {
-    const key = getKeyByValue(languages, value);
-    if (key) {
-      this.props.changeLanguage(key);
-    }
-  };
-
-  private openCustomNodeModal = () => {
-    this.setState({ isAddingCustomNode: true });
-  };
-
-  private closeCustomNodeModal = () => {
-    this.setState({ isAddingCustomNode: false });
-  };
-
-  private addCustomNode = (payload: configNodesCustomTypes.AddCustomNodeAction['payload']) => {
-    this.setState({ isAddingCustomNode: false });
-    this.props.addCustomNode(payload);
-  };
-
-  private attemptSetNodeFromQueryParameter() {
-    const { shouldSetNodeFromQS, networkParam } = this.props;
-    if (shouldSetNodeFromQS) {
-      this.props.changeNodeRequestedOneTime(networkParam!);
-    }
-  }
-}
-
-const mapStateToProps: MapStateToProps<StateProps, OwnProps, AppState> = (
-  state,
-  { networkParam }
-): StateProps => ({
-  shouldSetNodeFromQS: !!(
-    networkParam && configNodesStaticSelectors.isStaticNodeId(state, networkParam)
-  ),
-  isOffline: configMetaSelectors.getOffline(state),
-  isChangingNode: configNodesSelectedSelectors.isNodeChanging(state),
-  languageSelection: configMetaSelectors.getLanguageSelection(state),
-  network: configSelectors.getNetworkConfig(state)
-});
-
-const mapDispatchToProps: DispatchProps = {
-  setGasPriceField: transactionFieldsActions.setGasPriceField,
-  changeLanguage: configMetaActions.changeLanguage,
-  changeNodeRequestedOneTime: configNodesSelectedActions.changeNodeRequestedOneTime,
-  addCustomNode: configNodesCustomActions.addCustomNode,
-  removeCustomNode: configNodesCustomActions.removeCustomNode,
-  addCustomNetwork: configNetworksCustomActions.addCustomNetwork
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Header);
+import React, { Component } from 'react';
+import { MapStateToProps, connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import classnames from 'classnames';
+
+import { AnalyticsService, ANALYTICS_CATEGORIES } from 'v2/services';
+import { ANNOUNCEMENT_MESSAGE, ANNOUNCEMENT_TYPE, languages } from 'config';
+import { NetworkConfig } from 'types/network';
+import { getKeyByValue } from 'utils/helpers';
+import logo from 'assets/images/logo-mycrypto.svg';
+import { OldDropDown } from 'components/ui';
+import {
+  configSelectors,
+  configMetaSelectors,
+  configNodesCustomActions,
+  configMetaActions,
+  configNetworksCustomActions,
+  configNodesSelectedActions,
+  configNodesSelectedSelectors,
+  configNodesStaticSelectors,
+  configNodesCustomTypes
+} from 'features/config';
+import { AppState } from 'features/reducers';
+import { transactionFieldsActions } from 'features/transaction';
+import CustomNodeModal from 'components/CustomNodeModal';
+import NetworkDropdown from './components/NetworkDropdown';
+import Navigation from './components/Navigation';
+import OnlineStatus from './components/OnlineStatus';
+import './index.scss';
+
+interface OwnProps {
+  networkParam: string | null;
+}
+
+interface DispatchProps {
+  changeLanguage: configMetaActions.TChangeLanguage;
+  changeNodeRequestedOneTime: configNodesSelectedActions.TChangeNodeRequestedOneTime;
+  setGasPriceField: transactionFieldsActions.TSetGasPriceField;
+  addCustomNode: configNodesCustomActions.TAddCustomNode;
+  removeCustomNode: configNodesCustomActions.TRemoveCustomNode;
+  addCustomNetwork: configNetworksCustomActions.TAddCustomNetwork;
+}
+
+interface StateProps {
+  shouldSetNodeFromQS: boolean;
+  network: NetworkConfig;
+  languageSelection: ReturnType<typeof configMetaSelectors.getLanguageSelection>;
+  isChangingNode: ReturnType<typeof configNodesSelectedSelectors.isNodeChanging>;
+  isOffline: ReturnType<typeof configMetaSelectors.getOffline>;
+}
+
+interface State {
+  isAddingCustomNode: boolean;
+}
+
+type Props = OwnProps & StateProps & DispatchProps;
+
+class Header extends Component<Props, State> {
+  public state = {
+    isAddingCustomNode: false
+  };
+
+  public componentDidMount() {
+    this.attemptSetNodeFromQueryParameter();
+  }
+
+  public render() {
+    const { languageSelection, isChangingNode, isOffline, network } = this.props;
+    const { isAddingCustomNode } = this.state;
+    const selectedLanguage = languageSelection;
+    const LanguageDropDown = OldDropDown as new () => OldDropDown<typeof selectedLanguage>;
+
+    return (
+      <div className="Header">
+        {ANNOUNCEMENT_MESSAGE && (
+          <div className={`Header-announcement is-${ANNOUNCEMENT_TYPE}`}>
+            {ANNOUNCEMENT_MESSAGE}
+          </div>
+        )}
+
+        <section className="Header-branding">
+          <section className="Header-branding-inner container">
+            <Link to="/" className="Header-branding-title" aria-label="Go to homepage">
+              <img
+                className="Header-branding-title-logo"
+                src={logo}
+                height="64px"
+                width="245px"
+                alt="MyCrypto logo"
+              />
+            </Link>
+            <div className="Header-branding-right">
+              <div className="Header-branding-right-online">
+                <OnlineStatus isOffline={isOffline} />
+              </div>
+
+              <div className="Header-branding-right-dropdown">
+                <LanguageDropDown
+                  ariaLabel={`change language. current language ${languages[selectedLanguage]}`}
+                  options={Object.values(languages)}
+                  value={languages[selectedLanguage]}
+                  onChange={this.changeLanguage}
+                  size="smr"
+                  color="white"
+                />
+              </div>
+              <div
+                className={classnames({
+                  'Header-branding-right-dropdown': true,
+                  'is-flashing': isChangingNode
+                })}
+              >
+                <NetworkDropdown openCustomNodeModal={this.openCustomNodeModal} />
+              </div>
+            </div>
+          </section>
+        </section>
+
+        <Navigation
+          color={!network.isCustom && network.color}
+          unsupportedTabs={network.unsupportedTabs}
+        />
+
+        <CustomNodeModal
+          isOpen={isAddingCustomNode}
+          addCustomNode={this.addCustomNode}
+          handleClose={this.closeCustomNodeModal}
+        />
+      </div>
+    );
+  }
+
+  public changeLanguage = (value: string) => {
+    const key = getKeyByValue(languages, value);
+    if (key) {
+      this.props.changeLanguage(key);
+      AnalyticsService.instance.track(ANALYTICS_CATEGORIES.SIDEBAR, 'Language changed', {
+        lang: key
+      });
+    }
+  };
+
+  private openCustomNodeModal = () => {
+    this.setState({ isAddingCustomNode: true });
+  };
+
+  private closeCustomNodeModal = () => {
+    this.setState({ isAddingCustomNode: false });
+  };
+
+  private addCustomNode = (payload: configNodesCustomTypes.AddCustomNodeAction['payload']) => {
+    this.setState({ isAddingCustomNode: false });
+    this.props.addCustomNode(payload);
+  };
+
+  private attemptSetNodeFromQueryParameter() {
+    const { shouldSetNodeFromQS, networkParam } = this.props;
+    if (shouldSetNodeFromQS) {
+      this.props.changeNodeRequestedOneTime(networkParam!);
+    }
+  }
+}
+
+const mapStateToProps: MapStateToProps<StateProps, OwnProps, AppState> = (
+  state,
+  { networkParam }
+): StateProps => ({
+  shouldSetNodeFromQS: !!(
+    networkParam && configNodesStaticSelectors.isStaticNodeId(state, networkParam)
+  ),
+  isOffline: configMetaSelectors.getOffline(state),
+  isChangingNode: configNodesSelectedSelectors.isNodeChanging(state),
+  languageSelection: configMetaSelectors.getLanguageSelection(state),
+  network: configSelectors.getNetworkConfig(state)
+});
+
+const mapDispatchToProps: DispatchProps = {
+  setGasPriceField: transactionFieldsActions.setGasPriceField,
+  changeLanguage: configMetaActions.changeLanguage,
+  changeNodeRequestedOneTime: configNodesSelectedActions.changeNodeRequestedOneTime,
+  addCustomNode: configNodesCustomActions.addCustomNode,
+  removeCustomNode: configNodesCustomActions.removeCustomNode,
+  addCustomNetwork: configNetworksCustomActions.addCustomNetwork
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Header);
diff --git a/common/containers/Sidebar/components/SelectLanguage.tsx b/common/containers/Sidebar/components/SelectLanguage.tsx
index befce454ad7..02454afabb6 100644
--- a/common/containers/Sidebar/components/SelectLanguage.tsx
+++ b/common/containers/Sidebar/components/SelectLanguage.tsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 
+import { AnalyticsService, ANALYTICS_CATEGORIES } from 'v2/services';
 import { languages } from 'config';
 import { translateRaw } from 'translations';
 import { AppState } from 'features/reducers';
@@ -50,6 +51,9 @@ class LanguageSelect extends Component<Props> {
 
     if (code !== languageSelection) {
       changeLanguage(code);
+      AnalyticsService.instance.track(ANALYTICS_CATEGORIES.SIDEBAR, 'Language changed', {
+        lang: code
+      });
     }
 
     closeSidebar();

From a877a733c65e7064f8933f25e521788cfb1a6f8f Mon Sep 17 00:00:00 2001
From: Amadej <amadej.pevec@gmail.com>
Date: Wed, 13 Feb 2019 13:54:50 +0100
Subject: [PATCH 4/5] Analytics - track initially loaded language

---
 common/features/configureStore.ts         | 4 ++++
 common/v2/services/Analytics/constants.ts | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/common/features/configureStore.ts b/common/features/configureStore.ts
index effb3cb722c..19f39a558be 100644
--- a/common/features/configureStore.ts
+++ b/common/features/configureStore.ts
@@ -5,6 +5,7 @@ import { composeWithDevTools } from 'redux-devtools-extension';
 import { createLogger } from 'redux-logger';
 import throttle from 'lodash/throttle';
 
+import { AnalyticsService, ANALYTICS_CATEGORIES } from 'v2/services';
 import { loadStatePropertyOrEmptyObject, saveState } from 'utils/localStorage';
 import { gasPriceToBase } from 'libs/units';
 import RootReducer, { AppState } from './reducers';
@@ -77,6 +78,9 @@ export default function configureStore() {
   };
 
   store = createStore<AppState>(RootReducer, persistedInitialState as any, middleware);
+  AnalyticsService.instance.track(ANALYTICS_CATEGORIES.ROOT, 'Language initially loaded', {
+    lang: persistedInitialState.config && persistedInitialState.config.meta.languageSelection
+  });
 
   // Add all of the sagas to the middleware
   Object.keys(sagas).forEach((saga: keyof typeof sagas) => {
diff --git a/common/v2/services/Analytics/constants.ts b/common/v2/services/Analytics/constants.ts
index 465fb957940..7d9d897bed1 100644
--- a/common/v2/services/Analytics/constants.ts
+++ b/common/v2/services/Analytics/constants.ts
@@ -11,5 +11,6 @@ export const ANALYTICS_REC = 1;
 export enum ANALYTICS_CATEGORIES {
   HEADER = 'Header',
   FOOTER = 'Footer',
-  SIDEBAR = 'Sidebar'
+  SIDEBAR = 'Sidebar',
+  ROOT = 'Root'
 }

From 5cb9fb78132de70d04ecb7a43fad1d121f462116 Mon Sep 17 00:00:00 2001
From: Amadej <amadej.pevec@gmail.com>
Date: Mon, 18 Feb 2019 13:00:57 +0100
Subject: [PATCH 5/5] Analytics - Add tests

---
 .../v2/services/Analytics/Analytics.spec.ts   | 36 +++++++++++++++++++
 common/v2/services/Analytics/Analytics.ts     | 13 +++----
 2 files changed, 43 insertions(+), 6 deletions(-)
 create mode 100644 common/v2/services/Analytics/Analytics.spec.ts

diff --git a/common/v2/services/Analytics/Analytics.spec.ts b/common/v2/services/Analytics/Analytics.spec.ts
new file mode 100644
index 00000000000..d647d84f892
--- /dev/null
+++ b/common/v2/services/Analytics/Analytics.spec.ts
@@ -0,0 +1,36 @@
+import AnalyticsService from './Analytics';
+
+const category: string = 'Test';
+const eventName: string = 'Test event';
+const testUrl: string = 'test_url';
+
+describe('AnalyticsService', () => {
+  it('should send event to analytics endpoint', async () => {
+    const { status, config: { params } } = await AnalyticsService.instance.track(
+      category,
+      eventName
+    );
+
+    expect(status).toBe(200);
+    expect(params.e_c).toBe(category);
+    expect(params.action_name).toBe(eventName);
+  });
+
+  it('should add Legacy_ prefix to legacy event', async () => {
+    const { status, config: { params } } = await AnalyticsService.instance.trackLegacy(
+      category,
+      eventName
+    );
+
+    expect(status).toBe(200);
+    expect(params.e_c).toBe(category);
+    expect(params.action_name).toBe(`Legacy_${eventName}`);
+  });
+
+  it('should add page url param to page visit event', async () => {
+    const { status, config: { params } } = await AnalyticsService.instance.trackPageVisit(testUrl);
+
+    expect(status).toBe(200);
+    expect(params.url).toBe(testUrl);
+  });
+});
diff --git a/common/v2/services/Analytics/Analytics.ts b/common/v2/services/Analytics/Analytics.ts
index 4c3d42c4840..45e5a70e5ae 100644
--- a/common/v2/services/Analytics/Analytics.ts
+++ b/common/v2/services/Analytics/Analytics.ts
@@ -21,11 +21,11 @@ export default class AnalyticsService {
     }
   }
 
-  public trackLegacy(category: string, eventName: string, eventParams?: object): void {
-    this.track(category, `Legacy_${eventName}`, eventParams);
+  public trackLegacy(category: string, eventName: string, eventParams?: object): Promise<any> {
+    return this.track(category, `Legacy_${eventName}`, eventParams);
   }
 
-  public track(category: string, eventName: string, eventParams?: object): void {
+  public track(category: string, eventName: string, eventParams?: object): Promise<any> {
     const customParams: Params = {
       local: isDevelopment().toString(),
       desktop: isDesktop().toString(),
@@ -43,10 +43,10 @@ export default class AnalyticsService {
       cvar: JSON.stringify(cvar)
     };
 
-    this.service.get('', { params }).catch();
+    return this.service.get('', { params }).catch();
   }
 
-  public trackPageVisit(pageUrl: string): void {
+  public trackPageVisit(pageUrl: string): Promise<any> {
     const customParams: Params = {
       local: isDevelopment().toString(),
       desktop: isDesktop().toString()
@@ -61,7 +61,8 @@ export default class AnalyticsService {
       rec: ANALYTICS_REC,
       cvar: JSON.stringify(cvar)
     };
-    this.service.get('', { params }).catch();
+
+    return this.service.get('', { params }).catch();
   }
 
   private mapParamsToCvars(params: Params): object {