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 { - public render() { - const { languageSelection } = this.props; - return ( -
- {Object.entries(languages).map(lang => ( - - ))} -
- ); - } - - 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 { + public render() { + const { languageSelection } = this.props; + return ( +
+ {Object.entries(languages).map(lang => ( + + ))} +
+ ); + } + + 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 index aa06984c0d1..7c74843baf8 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, 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 {
- setAccessMessage('')}> + { + setAccessMessage(''); + this.trackHomeIconClick(); + }} + > Our logo
@@ -183,6 +200,18 @@ class DesktopHeader extends Component { 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 index b3dcc0d5cd3..e12377ac5ae 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, 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 {
- setAccessMessage('')}> + { + setAccessMessage(''); + this.trackHomeIconClick(); + }} + > Our logo
@@ -155,6 +162,7 @@ class MobileHeader extends Component {