feat(instant): Close and View Transaction analytics events

packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts

@@ -10,6 +10,7 @@ import { BuyOrderStateButtons } from '../components/buy_order_state_buttons';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { AccountState, AffiliateInfo, OrderProcessState, ZeroExInstantError } from '../types';
+import { analytics } from '../util/analytics';
 import { errorFlasher } from '../util/error_flasher';
 import { etherscanUtil } from '../util/etherscan';
 
@@ -59,6 +60,8 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButt
                     assetBuyer.networkId,
                 );
                 if (etherscanUrl) {
+                    analytics.trackTransactionViewed(state.buyOrderState.processState);
+
                     window.open(etherscanUrl, '_blank');
                     return;
                 }

packages/instant/src/index.umd.ts

@@ -4,6 +4,7 @@ import * as ReactDOM from 'react-dom';
 
 import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR, INJECTED_DIV_CLASS, INJECTED_DIV_ID } from './constants';
 import { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './index';
+import { analytics } from './util/analytics';
 import { assert } from './util/assert';
 import { util } from './util/util';
 
@@ -57,6 +58,7 @@ const renderInstant = (config: ZeroExInstantConfig, selector: string) => {
     injectedDiv.setAttribute('class', INJECTED_DIV_CLASS);
     appendTo.appendChild(injectedDiv);
     const closeInstant = () => {
+        analytics.trackInstantClosed();
         if (!_.isUndefined(config.onClose)) {
             config.onClose();
         }

packages/instant/src/util/analytics.ts

@@ -1,7 +1,7 @@
 import { BuyQuote } from '@0x/asset-buyer';
 import * as _ from 'lodash';
 
-import { AffiliateInfo, Asset, Network, OrderSource, ProviderState } from '../types';
+import { AffiliateInfo, Asset, Network, OrderProcessState, OrderSource, ProviderState } from '../types';
 
 import { EventProperties, heapUtil } from './heap';
 
@@ -18,6 +18,7 @@ export const evaluateIfEnabled = (fnCall: () => void) => {
 
 enum EventNames {
     INSTANT_OPENED = 'Instant - Opened',
+    INSTANT_CLOSED = 'Instant - Closed',
     ACCOUNT_LOCKED = 'Account - Locked',
     ACCOUNT_READY = 'Account - Ready',
     ACCOUNT_UNLOCK_REQUESTED = 'Account - Unlock Requested',
@@ -37,6 +38,7 @@ enum EventNames {
     TOKEN_SELECTOR_CLOSED = 'Token Selector - Closed',
     TOKEN_SELECTOR_CHOSE = 'Token Selector - Chose',
     TOKEN_SELECTOR_SEARCHED = 'Token Selector - Searched',
+    TRANSACTION_VIEWED = 'Transaction - Viewed',
 }
 
 const track = (eventName: EventNames, eventProperties: EventProperties = {}): void => {
@@ -133,6 +135,7 @@ export const analytics = {
         return eventOptions;
     },
     trackInstantOpened: trackingEventFnWithoutPayload(EventNames.INSTANT_OPENED),
+    trackInstantClosed: trackingEventFnWithoutPayload(EventNames.INSTANT_CLOSED),
     trackAccountLocked: trackingEventFnWithoutPayload(EventNames.ACCOUNT_LOCKED),
     trackAccountReady: (address: string) => trackingEventFnWithPayload(EventNames.ACCOUNT_READY)({ address }),
     trackAccountUnlockRequested: trackingEventFnWithoutPayload(EventNames.ACCOUNT_UNLOCK_REQUESTED),
@@ -177,4 +180,6 @@ export const analytics = {
         trackingEventFnWithPayload(EventNames.TOKEN_SELECTOR_CHOSE)(payload),
     trackTokenSelectorSearched: (searchText: string) =>
         trackingEventFnWithPayload(EventNames.TOKEN_SELECTOR_SEARCHED)({ searchText }),
+    trackTransactionViewed: (orderProcesState: OrderProcessState) =>
+        trackingEventFnWithPayload(EventNames.TRANSACTION_VIEWED)({ orderState: orderProcesState }),
 };