chore: add analytics to install modal

package.json

@@ -84,6 +84,7 @@
     "patch-package": "^6.4.7",
     "prettier": "^2.3.2",
     "rimraf": "^3.0.2",
+    "rollup-plugin-node-polyfills": "^0.2.1",
     "serve": "^14.2.1",
     "ts-jest": "^29.0.3",
     "typescript": "^4.3.5"

packages/sdk-communication-layer/src/types/TrackingEvent.ts

@@ -14,4 +14,7 @@ export enum TrackingEvents {
   SDK_RPC_REQUEST_DONE = 'sdk_rpc_request_done',
   SDK_EXTENSION_UTILIZED = 'sdk_extension_utilized',
   SDK_USE_INAPP_BROWSER = 'sdk_use_inapp_browser',
+  SDK_MODAL_VIEWED = 'sdk_modal_viewed',
+  SDK_MODAL_BUTTON_CLICKED = 'sdk_modal_button_clicked',
+  SDK_MODAL_TOGGLE_CHANGED = 'sdk_modal_toggle_changed',
 }

packages/sdk-install-modal-web/package.json

@@ -86,6 +86,7 @@
     }
   },
   "dependencies": {
+    "@metamask/sdk-communication-layer": "workspace:*",
     "@paulmillr/qr": "^0.2.1"
   }
 }

packages/sdk-install-modal-web/src/components.d.ts

@@ -5,6 +5,8 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { TrackingEvents } from "@metamask/sdk-communication-layer";
+export { TrackingEvents } from "@metamask/sdk-communication-layer";
 export namespace Components {
     interface MmInstallModal {
         /**
@@ -47,6 +49,7 @@ declare global {
     interface HTMLMmInstallModalElementEventMap {
         "close": any;
         "startDesktopOnboarding": any;
+        "trackAnalytics": { event: TrackingEvents, params?: Record<string, unknown> };
     }
     interface HTMLMmInstallModalElement extends Components.MmInstallModal, HTMLStencilElement {
         addEventListener<K extends keyof HTMLMmInstallModalElementEventMap>(type: K, listener: (this: HTMLMmInstallModalElement, ev: MmInstallModalCustomEvent<HTMLMmInstallModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -113,6 +116,7 @@ declare namespace LocalJSX {
         "link"?: string;
         "onClose"?: (event: MmInstallModalCustomEvent<any>) => void;
         "onStartDesktopOnboarding"?: (event: MmInstallModalCustomEvent<any>) => void;
+        "onTrackAnalytics"?: (event: MmInstallModalCustomEvent<{ event: TrackingEvents, params?: Record<string, unknown> }>) => void;
         "preferDesktop"?: boolean;
         "sdkVersion"?: string;
     }

packages/sdk-install-modal-web/src/components/mm-install-modal/mm-install-modal.tsx

@@ -10,6 +10,8 @@ import CloseButton from '../misc/CloseButton';
 import Logo from '../misc/Logo';
 import encodeQR from '@paulmillr/qr';
 import { SimpleI18n } from '../misc/simple-i18n';
+import { TrackingEvents } from '@metamask/sdk-communication-layer';
+
 @Component({
   tag: 'mm-install-modal',
   styleUrl: '../style.css',
@@ -31,6 +33,8 @@ export class InstallModal {
 
   @Event() startDesktopOnboarding: EventEmitter;
 
+  @Event() trackAnalytics: EventEmitter<{ event: TrackingEvents, params?: Record<string, unknown> }>;
+
   @State() tab: number = 1;
 
   @State() isDefaultTab: boolean = true;
@@ -47,6 +51,14 @@ export class InstallModal {
     this.setTab(this.preferDesktop ? 1 : 2);
 
     this.i18nInstance = new SimpleI18n();
+
+    this.trackAnalytics.emit({
+      event: TrackingEvents.SDK_MODAL_VIEWED,
+      params: {
+        extensionInstalled: false,
+        tab: this.tab === 1 ? 'desktop' : 'mobile',
+      },
+    });
   }
 
   async connectedCallback() {
@@ -70,11 +82,27 @@ export class InstallModal {
   }
 
   onStartDesktopOnboardingHandler() {
+    this.trackAnalytics.emit({
+      event: TrackingEvents.SDK_MODAL_BUTTON_CLICKED,
+      params: {
+        button_type: 'install_extension',
+        tab: 'desktop',
+      },
+    });
     this.startDesktopOnboarding.emit();
   }
 
-  setTab(newTab: number) {
-    this.tab = newTab
+  setTab(newTab: number, isUserAction: boolean = false) {
+    if (isUserAction) {
+      this.trackAnalytics.emit({
+        event: TrackingEvents.SDK_MODAL_TOGGLE_CHANGED,
+        params: {
+          toggle: this.tab === 1 ? 'desktop_to_mobile' : 'mobile_to_desktop',
+        },
+      });
+    }
+
+    this.tab = newTab;
     this.isDefaultTab = false;
   }
 
@@ -84,16 +112,13 @@ export class InstallModal {
     }
 
     const t = (key: string) => this.i18nInstance.t(key);
-
-    const currentTab = this.isDefaultTab ? this.preferDesktop ? 1 : 2 : this.tab
+    const currentTab = this.isDefaultTab ? this.preferDesktop ? 1 : 2 : this.tab;
 
     const svgElement = encodeQR(this.link, "svg", {
       ecc: "medium",
       scale: 2
     });
 
-    console.log(`Showing modal with link ${this.link} and SVG QRCode ${svgElement}`)
-
     return (
       <WidgetWrapper className="install-model">
         <div class='backdrop' onClick={this.onClose}></div>
@@ -112,13 +137,13 @@ export class InstallModal {
             <div class='tabcontainer'>
               <div class='flexContainer'>
                 <div
-                  onClick={() => this.setTab(1)}
+                  onClick={() => this.setTab(1, true)}
                   class={`tab flexItem ${currentTab === 1 ? 'tabactive': ''}`}
                 >
                   {t('DESKTOP')}
                 </div>
                 <div
-                  onClick={() => this.setTab(2)}
+                  onClick={() => this.setTab(2, true)}
                   class={`tab flexItem ${currentTab === 2 ? 'tabactive': ''}`}
                 >
                   {t('MOBILE')}

packages/sdk-install-modal-web/src/components/mm-select-modal/mm-select-modal.tsx

@@ -157,7 +157,7 @@ export class SelectModal {
                 {t('SELECT_MODAL.CRYPTO_TAKE_CONTROL_TEXT')}
               </div>
 
-              <button class='button' onClick={this.connectWithExtensionHandler}>
+              <button class='button' onClick={() => this.connectWithExtensionHandler()}>
                 <ConnectIcon />
                 <span class='installExtensionText'>
                   {t('CONNECT_WITH_EXTENSION')}

packages/sdk-install-modal-web/stencil.config.ts

@@ -1,5 +1,6 @@
 import { Config } from '@stencil/core';
 import { visualizer } from 'rollup-plugin-visualizer';
+import nodePolyfills from 'rollup-plugin-node-polyfills';
 
 export const config: Config = {
   namespace: 'sdk-install-modal-web',
@@ -18,6 +19,9 @@ export const config: Config = {
   testing: {
     browserHeadless: "new",
   },
+  plugins: [
+    nodePolyfills(),
+  ],
   rollupPlugins: {
     after: [
       process.env.NODE_ENV === 'development' ? visualizer() : null

packages/sdk/package.json

@@ -134,7 +134,9 @@
       "socket.io-client>engine.io-client>ws>utf-8-validate": false,
       "@metamask/sdk-communication-layer>bufferutil": false,
       "@metamask/sdk-communication-layer>eciesjs>secp256k1": false,
-      "@metamask/sdk-communication-layer>utf-8-validate": false
+      "@metamask/sdk-communication-layer>utf-8-validate": false,
+      "@metamask/sdk-install-modal-web>@metamask/sdk-communication-layer>bufferutil": false,
+      "@metamask/sdk-install-modal-web>@metamask/sdk-communication-layer>utf-8-validate": false
     }
   }
 }

packages/sdk/src/services/RemoteConnection/ModalManager/showInstallModal.test.ts

@@ -52,6 +52,7 @@ describe('showInstallModal', () => {
       terminate: expect.any(Function),
       debug: state.developerMode,
       connectWithExtension: expect.any(Function),
+      onAnalyticsEvent: expect.any(Function),
     });
     expect(mockModalsInstall).toHaveBeenCalledTimes(1);
     expect(mockInstallModalMount).toHaveBeenCalledWith(link);

packages/sdk/src/services/RemoteConnection/ModalManager/showInstallModal.ts

@@ -1,3 +1,4 @@
+import { TrackingEvents } from '@metamask/sdk-communication-layer';
 import { logger } from '../../../utils/logger';
 import {
   RemoteConnectionProps,
@@ -34,6 +35,22 @@
       options.connectWithExtensionProvider?.();
       return false;
     },
+    onAnalyticsEvent: ({
+      event,
+      params,
+    }: {
+      event: TrackingEvents;
+      params?: Record<string, any>;
+    }) => {
+      const extended = {
+        ...params,
+        sdkVersion: options.sdk.getVersion(),
+        dappId: options.dappMetadata?.name,
+        source: options._source,
+        url: options.dappMetadata?.url,
+      };
+      state.analytics?.send({ event, params: extended });
+    },
   });
   state.installModal?.mount?.(link);
 }

packages/sdk/src/services/RemoteConnection/RemoteConnection.ts

@@ -8,6 +8,7 @@ import {
   KeyInfo,
   RemoteCommunication,
   StorageManagerProps,
+  TrackingEvents,
 } from '@metamask/sdk-communication-layer';
 import { MetaMaskInstaller } from '../../Platform/MetaMaskInstaller';
 import { PlatformManager } from '../../Platform/PlatfformManager';
@@ -55,13 +56,20 @@ export interface RemoteConnectionProps {
    */
   modals: {
     onPendingModalDisconnect?: () => void;
-    install?: (params: {
+    install?: (args: {
       link: string;
       debug?: boolean;
       preferDesktop?: boolean;
       installer: MetaMaskInstaller;
       terminate?: () => void;
       connectWithExtension?: () => void;
+      onAnalyticsEvent: ({
+        event,
+        params,
+      }: {
+        event: TrackingEvents;
+        params?: Record<string, unknown>;
+      }) => void;
     }) => {
       unmount?: (shouldTerminate?: boolean) => void;
       mount?: (link: string) => void;

packages/sdk/src/ui/InstallModal/InstallModal-web.ts

@@ -1,3 +1,4 @@
+import { TrackingEvents } from '@metamask/sdk-communication-layer';
 import packageJson from '../../../package.json';
 import { MetaMaskInstaller } from '../../Platform/MetaMaskInstaller';
 import { logger } from '../../utils/logger';
@@ -10,13 +11,21 @@ const sdkWebInstallModal = ({
   terminate,
   connectWithExtension,
   preferDesktop,
+  onAnalyticsEvent,
 }: {
   link: string;
   debug?: boolean;
   preferDesktop?: boolean;
   installer: MetaMaskInstaller;
   terminate?: () => void;
   connectWithExtension?: () => void;
+  onAnalyticsEvent: ({
+    event,
+    params,
+  }: {
+    event: TrackingEvents;
+    params?: Record<string, unknown>;
+  }) => void;
 }) => {
   let modalLoader: ModalLoader | null = null;
   let div: HTMLDivElement | null = null;
@@ -94,6 +103,7 @@ const sdkWebInstallModal = ({
           link,
           metaMaskInstaller: installer,
           onClose: unmount,
+          onAnalyticsEvent,
         })
         .catch((err) => {
           console.error(`[UI: InstallModal-web: sdkWebInstallModal()]`, err);

packages/sdk/src/ui/InstallModal/Modal-web.ts

@@ -1,3 +1,4 @@
+import { TrackingEvents } from '@metamask/sdk-communication-layer';
 import type { Components } from '@metamask/sdk-install-modal-web';
 
 export interface InstallWidgetProps extends Components.MmInstallModal {
@@ -6,6 +7,10 @@
   metaMaskInstaller: {
     startDesktopOnboarding: () => void;
   };
+  onAnalyticsEvent: (event: {
+    event: TrackingEvents;
+    params?: Record<string, unknown>;
+  }) => void;
 }
 
 export interface PendingWidgetProps extends Components.MmPendingModal {
@@ -80,6 +85,9 @@
       'startDesktopOnboarding',
       props.metaMaskInstaller.startDesktopOnboarding,
     );
+
+    modal.addEventListener('trackAnalytics', ((e: CustomEvent) =>
+      props.onAnalyticsEvent?.(e.detail)) as EventListener);
     props.parentElement.appendChild(modal);
   }
 

yarn.lock

@@ -11023,6 +11023,7 @@ __metadata:
   dependencies:
     "@lavamoat/allow-scripts": ^2.3.1
     "@metamask/auto-changelog": 3.1.0
+    "@metamask/sdk-communication-layer": "workspace:*"
     "@paulmillr/qr": ^0.2.1
     "@size-limit/preset-big-lib": ^11.0.2
     "@stencil/core": ^4.22.2
@@ -37702,7 +37703,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.25.0, magic-string@npm:^0.25.1, magic-string@npm:^0.25.7, magic-string@npm:^0.25.9":
+"magic-string@npm:^0.25.0, magic-string@npm:^0.25.1, magic-string@npm:^0.25.3, magic-string@npm:^0.25.7, magic-string@npm:^0.25.9":
   version: 0.25.9
   resolution: "magic-string@npm:0.25.9"
   dependencies:
@@ -38090,6 +38091,7 @@ __metadata:
     patch-package: ^6.4.7
     prettier: ^2.3.2
     rimraf: ^3.0.2
+    rollup-plugin-node-polyfills: ^0.2.1
     serve: ^14.2.1
     ts-jest: ^29.0.3
     ts-node: ^10.9.1
@@ -45545,6 +45547,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rollup-plugin-inject@npm:^3.0.0":
+  version: 3.0.2
+  resolution: "rollup-plugin-inject@npm:3.0.2"
+  dependencies:
+    estree-walker: ^0.6.1
+    magic-string: ^0.25.3
+    rollup-pluginutils: ^2.8.1
+  checksum: a014972c80fe34b8c8154056fa2533a8440066a31de831e3793fc21b15d108d92c22d8f7f472397bd5783d7c5e04d8cbf112fb72c5a26e997726e4eb090edad1
+  languageName: node
+  linkType: hard
+
 "rollup-plugin-jscc@npm:^2.0.0":
   version: 2.0.0
   resolution: "rollup-plugin-jscc@npm:2.0.0"
@@ -45596,6 +45609,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rollup-plugin-node-polyfills@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "rollup-plugin-node-polyfills@npm:0.2.1"
+  dependencies:
+    rollup-plugin-inject: ^3.0.0
+  checksum: e84645212c443aca3cfae2ba69f01c6d8c5c250f0bf651416b69a4572b60aae9da7cdd687de3ab9b903f7a1ab96b06b71f0c4927d1b02a37485360d2b563937b
+  languageName: node
+  linkType: hard
+
 "rollup-plugin-peer-deps-external@npm:^2.2.4":
   version: 2.2.4
   resolution: "rollup-plugin-peer-deps-external@npm:2.2.4"
@@ -45772,7 +45794,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup-pluginutils@npm:^2.0.1, rollup-pluginutils@npm:^2.3.1, rollup-pluginutils@npm:^2.8.2":
+"rollup-pluginutils@npm:^2.0.1, rollup-pluginutils@npm:^2.3.1, rollup-pluginutils@npm:^2.8.1, rollup-pluginutils@npm:^2.8.2":
   version: 2.8.2
   resolution: "rollup-pluginutils@npm:2.8.2"
   dependencies: