feat(instant): Event tracking for token selector

2 files changed, 18 insertions, 6 deletions

diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index f30bda6ed..b72493ce6 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -12,7 +12,7 @@ import { SelectedAssetInstantHeading } from '../containers/selected_asset_instan
 import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
 import { OrderProcessState, SlideAnimationState } from '../types';
-import { analytics } from '../util/analytics';
+import { analytics, TokenSelectorClosedVia } from '../util/analytics';
 
 import { CSSReset } from './css_reset';
 import { SlidingPanel } from './sliding_panel';
@@ -30,6 +30,13 @@ export class ZeroExInstantContainer extends React.Component<{}, ZeroExInstantCon
     public state = {
         tokenSelectionPanelAnimationState: 'none' as SlideAnimationState,
     };
+    private _handlePanelCloseClickedX: () => void;
+    private _handlePanelCloseAfterChose: () => void;
+    public constructor(props: {}) {
+        super(props);
+        this._handlePanelCloseClickedX = this._handlePanelClose.bind(this, TokenSelectorClosedVia.ClickedX);
+        this._handlePanelCloseAfterChose = this._handlePanelClose.bind(this, TokenSelectorClosedVia.TokenChose);
+    }
     public render(): React.ReactNode {
         return (
             <React.Fragment>
@@ -61,9 +68,9 @@ export class ZeroExInstantContainer extends React.Component<{}, ZeroExInstantCon
                         </Flex>
                         <SlidingPanel
                             animationState={this.state.tokenSelectionPanelAnimationState}
-                            onClose={this._handlePanelClose}
+                            onClose={this._handlePanelCloseClickedX}
                         >
-                            <AvailableERC20TokenSelector onTokenSelect={this._handlePanelClose} />
+                            <AvailableERC20TokenSelector onTokenSelect={this._handlePanelCloseAfterChose} />
                         </SlidingPanel>
                         <CurrentStandardSlidingPanel />
                     </Container>
@@ -88,8 +95,8 @@ export class ZeroExInstantContainer extends React.Component<{}, ZeroExInstantCon
             tokenSelectionPanelAnimationState: 'slidIn',
         });
     };
-    private readonly _handlePanelClose = (): void => {
-        analytics.trackTokenSelectorClosed();
+    private readonly _handlePanelClose = (closedVia: TokenSelectorClosedVia): void => {
+        analytics.trackTokenSelectorClosed(closedVia);
         this.setState({
             tokenSelectionPanelAnimationState: 'slidOut',
         });
diff --git a/packages/instant/src/util/analytics.ts b/packages/instant/src/util/analytics.ts
index cd1074cba..8f8cec284 100644
--- a/packages/instant/src/util/analytics.ts
+++ b/packages/instant/src/util/analytics.ts
@@ -52,7 +52,10 @@ export interface AnalyticsEventOptions {
     gitSha?: string;
     npmVersion?: string;
 }
-
+export enum TokenSelectorClosedVia {
+    ClickedX = 'Clicked X',
+    TokenChose = 'Token Chose',
+}
 export const analytics = {
     addUserProperties: (properties: AnalyticsUserOptions): void => {
         evaluateIfEnabled(() => {
@@ -73,6 +76,8 @@ export const analytics = {
         trackingEventFnWithPayload(EventNames.ACCOUNT_ADDRESS_CHANGED)({ address }),
     trackTokenSelectorOpened: trackingEventFnWithoutPayload(EventNames.TOKEN_SELECTOR_OPENED),
     trackTokenSelectorClosed: trackingEventFnWithoutPayload(EventNames.TOKEN_SELECTOR_CLOSED),
+    trackTokenSelectorClosed: (closedVia: TokenSelectorClosedVia) =>
+        trackingEventFnWithPayload(EventNames.TOKEN_SELECTOR_CLOSED)({ closedVia }),
     trackTokenSelectorChose: (payload: { assetName: string; assetData: string }) =>
         trackingEventFnWithPayload(EventNames.TOKEN_SELECTOR_CHOSE)(payload),
     trackTokenSelectorSearched: (searchText: string) =>