crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(instant): Event tracking for token selector

Browse Source
This commit is contained in:
Steve Klebanoff
2018-11-26 15:04:02 -08:00
parent 9206f2d288
commit ae570dba05
2 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/instant/src/components/zero_ex_instant_container.tsx
View File

@@ -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',
});

7
packages/instant/src/util/analytics.ts
View File

@@ -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) =>