feat(instant): Install Wallet analytics

4 files changed, 43 insertions, 3 deletions

diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx
index 88c26f59c..481d82da0 100644
--- a/packages/instant/src/components/install_wallet_panel_content.tsx
+++ b/packages/instant/src/components/install_wallet_panel_content.tsx
@@ -8,7 +8,9 @@ import {
 } from '../constants';
 import { ColorOption } from '../style/theme';
 import { Browser } from '../types';
+import { analytics } from '../util/analytics';
 import { envUtil } from '../util/env';
+import { util } from '../util/util';
 
 import { MetaMaskLogo } from './meta_mask_logo';
 import { StandardPanelContent, StandardPanelContentProps } from './standard_panel_content';
@@ -45,6 +47,10 @@ export class InstallWalletPanelContent extends React.Component<InstallWalletPane
             default:
                 break;
         }
+        const onActionClick = () => {
+            analytics.trackInstallWalletModalClickedGet();
+            util.createOpenUrlInNewWindow(actionUrl)();
+        };
         return {
             image: <MetaMaskLogo width={85} height={80} />,
             title: 'Install MetaMask',
@@ -52,10 +58,11 @@ export class InstallWalletPanelContent extends React.Component<InstallWalletPane
             moreInfoSettings: {
                 href: META_MASK_SITE_URL,
                 text: 'What is MetaMask?',
+                onClick: analytics.trackInstallWalletModalClickedExplanation,
             },
             action: (
                 <Button
-                    href={actionUrl}
+                    onClick={onActionClick}
                     width="100%"
                     fontColor={ColorOption.white}
                     backgroundColor={ColorOption.darkOrange}
diff --git a/packages/instant/src/components/standard_panel_content.tsx b/packages/instant/src/components/standard_panel_content.tsx
index 582b3318e..79b7bff24 100644
--- a/packages/instant/src/components/standard_panel_content.tsx
+++ b/packages/instant/src/components/standard_panel_content.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
+import { util } from '../util/util';
 
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
@@ -9,6 +10,7 @@ import { Text } from './ui/text';
 export interface MoreInfoSettings {
     text: string;
     href: string;
+    onClick?: () => void;
 }
 
 export interface StandardPanelContentProps {
@@ -21,6 +23,15 @@ export interface StandardPanelContentProps {
 
 const SPACING_BETWEEN_PX = '20px';
 
+const onMoreInfoClick = (href: string, onClick?: () => void) => {
+    return () => {
+        if (onClick) {
+            onClick();
+        }
+        util.createOpenUrlInNewWindow(href)();
+    };
+};
+
 export const StandardPanelContent: React.StatelessComponent<StandardPanelContentProps> = ({
     image,
     title,
@@ -50,7 +61,7 @@ export const StandardPanelContent: React.StatelessComponent<StandardPanelContent
                         fontSize="13px"
                         textDecorationLine="underline"
                         fontColor={ColorOption.lightGrey}
-                        href={moreInfoSettings.href}
+                        onClick={onMoreInfoClick(moreInfoSettings.href, moreInfoSettings.onClick)}
                     >
                         {moreInfoSettings.text}
                     </Text>
diff --git a/packages/instant/src/redux/analytics_middleware.ts b/packages/instant/src/redux/analytics_middleware.ts
index 8aa76eb77..3dc5fe924 100644
--- a/packages/instant/src/redux/analytics_middleware.ts
+++ b/packages/instant/src/redux/analytics_middleware.ts
@@ -3,7 +3,7 @@ import * as _ from 'lodash';
 import { Middleware } from 'redux';
 
 import { ETH_DECIMALS } from '../constants';
-import { Account, AccountState } from '../types';
+import { Account, AccountState, StandardSlidingPanelContent } from '../types';
 import { analytics } from '../util/analytics';
 
 import { Action, ActionTypes } from './actions';
@@ -77,6 +77,18 @@ export const analyticsMiddleware: Middleware = store => next => middlewareAction
                 });
             }
             break;
+        case ActionTypes.OPEN_STANDARD_SLIDING_PANEL:
+            const openSlidingContent = curState.standardSlidingPanelSettings.content;
+            if (openSlidingContent === StandardSlidingPanelContent.InstallWallet) {
+                analytics.trackInstallWalletModalOpened();
+            }
+            break;
+        case ActionTypes.CLOSE_STANDARD_SLIDING_PANEL:
+            const closeSlidingContent = curState.standardSlidingPanelSettings.content;
+            if (closeSlidingContent === StandardSlidingPanelContent.InstallWallet) {
+                analytics.trackInstallWalletModalClosed();
+            }
+            break;
     }
 
     return nextAction;
diff --git a/packages/instant/src/util/analytics.ts b/packages/instant/src/util/analytics.ts
index e35a9e13f..f1ce15805 100644
--- a/packages/instant/src/util/analytics.ts
+++ b/packages/instant/src/util/analytics.ts
@@ -31,6 +31,10 @@ enum EventNames {
     BUY_TX_SUCCEEDED = 'Buy - Tx Succeeded',
     BUY_TX_FAILED = 'Buy - Tx Failed',
     INSTALL_WALLET_CLICKED = 'Install Wallet - Clicked',
+    INSTALL_WALLET_MODAL_OPENED = 'Install Wallet - Modal - Opened',
+    INSTALL_WALLET_MODAL_CLICKED_EXPLANATION = 'Install Wallet - Modal - Clicked Explanation',
+    INSTALL_WALLET_MODAL_CLICKED_GET = 'Install Wallet - Modal - Clicked Get',
+    INSTALL_WALLET_MODAL_CLOSED = 'Install Wallet - Modal - Closed',
     TOKEN_SELECTOR_OPENED = 'Token Selector - Opened',
     TOKEN_SELECTOR_CLOSED = 'Token Selector - Closed',
     TOKEN_SELECTOR_CHOSE = 'Token Selector - Chose',
@@ -167,6 +171,12 @@ export const analytics = {
         }),
     trackInstallWalletClicked: (walletSuggestion: WalletSuggestion) =>
         trackingEventFnWithPayload(EventNames.INSTALL_WALLET_CLICKED)({ walletSuggestion }),
+    trackInstallWalletModalClickedExplanation: trackingEventFnWithoutPayload(
+        EventNames.INSTALL_WALLET_MODAL_CLICKED_EXPLANATION,
+    ),
+    trackInstallWalletModalClickedGet: trackingEventFnWithoutPayload(EventNames.INSTALL_WALLET_MODAL_CLICKED_GET),
+    trackInstallWalletModalOpened: trackingEventFnWithoutPayload(EventNames.INSTALL_WALLET_MODAL_OPENED),
+    trackInstallWalletModalClosed: trackingEventFnWithoutPayload(EventNames.INSTALL_WALLET_MODAL_CLOSED),
     trackTokenSelectorOpened: trackingEventFnWithoutPayload(EventNames.TOKEN_SELECTOR_OPENED),
     trackTokenSelectorClosed: (closedVia: TokenSelectorClosedVia) =>
         trackingEventFnWithPayload(EventNames.TOKEN_SELECTOR_CLOSED)({ closedVia }),