feat(analytics): adding masa analytics and bridge events

composables/zksync/useWithdrawalFinalization.ts

@@ -147,6 +147,12 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
         },
       });
 
+      trackEvent("withdrawal-finalized", {
+        token: transactionInfo.value!.token.symbol,
+        amount: transactionInfo.value!.token.amount,
+        to: transactionInfo.value!.to.address,
+      });
+
       status.value = "done";
       return receipt;
     } catch (err) {

nuxt.config.ts

@@ -44,6 +44,11 @@ export default defineNuxtConfig({
           src: "https://cdn.rudderlabs.com/v1.1/rudder-analytics.min.js",
           defer: true,
         },
+        {
+          hid: "MASA-JS",
+          src: "https://cdn.jsdelivr.net/npm/@masa-finance/analytics-sdk@latest/dist/browser/masa-analytics.min.js",
+          defer: true,
+        },
       ],
     },
   },
@@ -79,8 +84,16 @@ export default defineNuxtConfig({
     public: {
       ankrToken: process.env.ANKR_TOKEN,
       screeningApiUrl: process.env.SCREENING_API_URL,
-      dataplaneUrl: process.env.DATAPLANE_URL,
-      rudderKey: process.env.RUDDER_KEY,
+      analytics: {
+        rudder: {
+          key: process.env.RUDDER_KEY,
+          dataplaneUrl: process.env.DATAPLANE_URL,
+        },
+        masa: {
+          clientId: process.env.MASA_KEY,
+          appId: process.env.MASA_APP_ID,
+        },
+      },
     },
   },
   vite: {

store/onboard.ts

@@ -79,6 +79,7 @@ export const useOnboardStore = defineStore("onboard", () => {
         await identifyWalletName();
         account.value = updatedAccount;
         connectorName.value = updatedAccount.connector?.name;
+        identifyWallet(updatedAccount.address, walletName.value);
       } catch (err) {
         disconnect();
         const error = formatError(err as Error);

types/index.d.ts

@@ -146,5 +146,16 @@ declare global {
       track: (eventName: string, params?: unknown) => void;
       initialized: boolean;
     };
+    MA?: {
+      MasaAnalytics: {
+        new ({ clientId });
+      };
+    };
+    masaAnalytics?: {
+      trackCustomEvent: ({ eventName, additionalEventData }) => void;
+      firePageViewEvent: ({ page, additionalEventData }) => void;
+      fireConnectWalletEvent: ({ user_address, wallet_type, additionalEventData }) => void;
+      initialized: boolean;
+    };
   }
 }

utils/analytics.ts

@@ -1,46 +1,80 @@
+import type { Hash } from "@/types";
+
 let analyticsLoaded = false;
 
-const isReady = (): Promise<void> => {
-  return new Promise((resolve, reject) => {
-    if (!window.rudderanalytics) {
-      reject(new Error("Rudder not loaded"));
-    }
-    window.rudderanalytics?.ready(() => {
-      resolve();
-    });
+async function loadRudder() {
+  if (!window.rudderanalytics) {
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    throw new Error("Rudder not loaded");
+  }
+  const runtimeConfig = useRuntimeConfig();
+  window.rudderanalytics.load(
+    runtimeConfig.public.analytics.rudder.key,
+    runtimeConfig.public.analytics.rudder.dataplaneUrl
+  );
+}
+
+async function loadMasa() {
+  if (!window.MA) {
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    throw new Error("Masa not loaded");
+  }
+  const runtimeConfig = useRuntimeConfig();
+  window.masaAnalytics = new window.MA.MasaAnalytics({
+    clientId: runtimeConfig.public.analytics.masa.clientId,
   });
-};
+}
 
 export async function initAnalytics(): Promise<boolean> {
+  if (analyticsLoaded) return true;
+
   const runtimeConfig = useRuntimeConfig();
-  if (!runtimeConfig.public.rudderKey || !runtimeConfig.public.dataplaneUrl) {
+  const useRudder = Boolean(
+    runtimeConfig.public.analytics.rudder.key && runtimeConfig.public.analytics.rudder.dataplaneUrl
+  );
+  const useMasa = Boolean(runtimeConfig.public.analytics.masa.clientId && runtimeConfig.public.analytics.masa.appId);
+  if ((!useRudder && !useMasa) || analyticsLoaded) {
     return false;
   }
 
-  if (analyticsLoaded) {
-    await isReady();
-    return true;
-  }
-  await retry(async () => {
-    if (!window.rudderanalytics) {
-      await new Promise((resolve) => setTimeout(resolve, 250));
-      throw new Error("Rudder not loaded");
-    }
-  });
-  window.rudderanalytics?.load(runtimeConfig.public.rudderKey, runtimeConfig.public.dataplaneUrl);
+  const services = [];
+  if (useRudder) services.push(loadRudder());
+  if (useMasa) services.push(loadMasa());
+
+  await Promise.all(services);
   analyticsLoaded = true;
-  await isReady();
   return true;
 }
 
 export async function trackPage(): Promise<void> {
   if (await initAnalytics()) {
+    const runtimeConfig = useRuntimeConfig();
     window.rudderanalytics?.page();
+    window.masaAnalytics?.firePageViewEvent({
+      page: window.location.href,
+      additionalEventData: { appId: runtimeConfig.public.analytics.masa.appId },
+    });
   }
 }
 
-export async function trackEvent(eventName: string, params?: unknown): Promise<void> {
+export async function trackEvent(eventName: string, params?: object): Promise<void> {
   if (await initAnalytics()) {
+    const runtimeConfig = useRuntimeConfig();
     window.rudderanalytics?.track(eventName, params);
+    window.masaAnalytics?.trackCustomEvent({
+      eventName,
+      additionalEventData: { appId: runtimeConfig.public.analytics.masa.appId, ...params },
+    });
+  }
+}
+
+export async function identifyWallet(userAddress: Hash | undefined, walletType?: string): Promise<void> {
+  if (await initAnalytics()) {
+    const runtimeConfig = useRuntimeConfig();
+    window.masaAnalytics?.fireConnectWalletEvent({
+      user_address: userAddress,
+      wallet_type: walletType,
+      additionalEventData: { appId: runtimeConfig.public.analytics.masa.appId },
+    });
   }
 }

views/transactions/Deposit.vue

@@ -719,6 +719,11 @@ const makeTransaction = async () => {
     waitForCompletion(transactionInfo.value)
       .then((completedTransaction) => {
         transactionInfo.value = completedTransaction;
+        trackEvent("deposit", {
+          token: transaction.value!.token.symbol,
+          amount: transaction.value!.token.amount,
+          to: transaction.value!.to.address,
+        });
         setTimeout(() => {
           transfersHistoryStore.reloadRecentTransfers().catch(() => undefined);
           eraWalletStore.requestBalance({ force: true }).catch(() => undefined);

views/transactions/Transfer.vue

@@ -650,6 +650,11 @@ const makeTransaction = async () => {
     waitForCompletion(transactionInfo.value)
       .then((completedTransaction) => {
         transactionInfo.value = completedTransaction;
+        trackEvent(transaction.value!.type, {
+          token: transaction.value!.token.symbol,
+          amount: transaction.value!.token.amount,
+          to: transaction.value!.to.address,
+        });
         setTimeout(() => {
           transfersHistoryStore.reloadRecentTransfers().catch(() => undefined);
           walletStore.requestBalance({ force: true }).catch(() => undefined);