chore: analytics updates

src/App.vue

@@ -7,13 +7,13 @@
       :link-component="RouterLink"
       :user-consent="userConsent"
       @update:consent="onUserConsentChange"
-      :amplitude="{ track }"
+      :amplitude="amplitudeMock"
     />
     <MEWSubscribe
       :useI18n="useI18n"
       v-model="openSubscirbe"
       :curr-project="PROJECTS.BLOG"
-      :amplitude="{ track }"
+      :amplitude="amplitudeMock"
       project-id="test"
       class="m-5"
     />
@@ -143,19 +143,27 @@
       :curr-project="PROJECTS.BLOG"
       packageVersion="3.4.5"
       :link-component="RouterLink"
-      :amplitude="{ track: () => {} }"
+      :amplitude="amplitudeMock"
       :user-consent="userConsent"
       @update:consent="onUserConsentChange"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { Ref, ref } from "vue";
 import { MewHeader, MewFooter, MEWSubscribe } from "./libs/main";
 import { RouterLink } from "vue-router";
 import { PROJECTS } from "@/helpers/links";
-import { MassagesShema } from "./locales/index";
+import { AmplitudeLike, UseI18n } from "./libs/types";
+
+const amplitudeMock: AmplitudeLike = {
+  track() {
+    return {
+      promise: Promise.resolve({}),
+    };
+  },
+};
 
 const userConsent = ref(false);
 const onUserConsentChange = (newval: boolean) => {
@@ -165,13 +173,8 @@ const track = () => {
   console.log("Tracking");
 };
 
-type useI18nParams = {
-  locale: string | undefined;
-  messages: MassagesShema;
-};
-
 const openSubscirbe = ref(true);
-const useI18n = (param: useI18nParams) => {
+const useI18n: UseI18n = (param) => {
   const _locale = param.locale || "zh";
   const t = (key: string) => {
     if (key.includes(".")) {
@@ -182,6 +185,6 @@ const useI18n = (param: useI18nParams) => {
 
     return param.messages[_locale][key] || key;
   };
-  return { t, locale: { value: _locale } };
+  return { t, locale: { value: _locale } as Ref<string> };
 };
 </script>

src/analytics/amplitude.ts

@@ -0,0 +1,68 @@
+import { AmplitudeLike } from "@/libs/types";
+import {
+  AnalyticsFooterLinkClickedPartialPayload,
+  AnalyticsFooterLinkName,
+  AnalyticsHeaderLinkName,
+  AnalyticsSubscriptionEventName,
+  AnalyticsSubscriptionPartialPayload,
+} from "./events";
+
+export const AmplitudeEvent = {
+  FOOTER_LINK_CLICKED: 'FOOTER_LINK_CLICKED',
+  HEADER_LINK_CLICKED: 'HEADER_LINK_CLICKED',
+  SUBSCRIPTION: 'SUBSCRIPTION',
+}
+
+async function trackEvent(
+  amplitude: AmplitudeLike,
+  eventType: string,
+  eventProperties: Record<string, unknown>,
+): Promise<void> {
+  try {
+    const { promise } = amplitude.track(eventType, eventProperties)
+    await promise
+  } catch (err) {
+    // Silently drop the error
+    // Maybe consider logging it or something
+  }
+}
+
+export async function trackHeaderLinkClickedEvent(
+  amplitude: AmplitudeLike,
+  linkName: AnalyticsHeaderLinkName,
+  /** May include more properties than specified in `payload's` type */
+  payload: AnalyticsFooterLinkClickedPartialPayload,
+): Promise<void> {
+  await trackEvent(amplitude, AmplitudeEvent.HEADER_LINK_CLICKED, {
+    linkName,
+    ...payload,
+  })
+}
+
+export async function trackFooterLinkClickedEvent(
+  amplitude: AmplitudeLike,
+  linkName: AnalyticsFooterLinkName,
+  /** May include more properties than specified in the `payload's` type */
+  payload: AnalyticsFooterLinkClickedPartialPayload,
+): Promise<void> {
+  await trackEvent(amplitude, AmplitudeEvent.FOOTER_LINK_CLICKED, {
+    linkName,
+    ...payload,
+  })
+}
+
+
+export async function trackSubscriptionEvent(
+  amplitude: AmplitudeLike,
+  event: AnalyticsSubscriptionEventName,
+  /**
+   * May include more properties than specified in the `payload's` type
+   * Payload is pretty dynamic, changes a lot with `event`
+   */
+  payload: AnalyticsSubscriptionPartialPayload,
+): Promise<void> {
+  await trackEvent(amplitude, AmplitudeEvent.SUBSCRIPTION, {
+    event,
+    ...payload
+  })
+}

src/analytics/events.ts

@@ -0,0 +1,85 @@
+
+export const AnalyticsHeaderLinkName = {
+  LOGO: 'LOGO',
+  SWAP_TOKENS: 'SWAP_TOKENS',
+  BUY_CRYPTO: 'BUY_CRYPTO',
+  NFT: 'NFT',
+  DAPPS: 'DAPPS',
+  MEWTOPIA: 'MEWTOPIA',
+  HELP_CENTER: 'HELP_CENTER',
+  CUSTOMER_SUPPORT: 'CUSTOMER_SUPPORT',
+  PRODUCT: 'PRODUCT',
+  HOME: 'HOME',
+
+  STAKING: 'STAKING',
+  FAQ: 'FAQ',
+  ACCESS_WALLET: 'ACCESS_WALLET',
+
+  // extra
+  CLOSE_MOBILE_MENU: 'CLOSE_MOBILE_MENU',
+} as const
+export type AnalyticsHeaderLinkName = typeof AnalyticsHeaderLinkName[keyof typeof AnalyticsHeaderLinkName]
+
+/** Always-present part of the analytics event payload when a header link is clicked */
+export type AnalyticsHeaderLinkClickedPayload = {
+  // "product" and "network" should be added by consumer in an enrichment
+  // or by wrapping the "track" function
+  language: string,
+  sourceURL: string,
+  destinationURL: string,
+}
+
+export const AnalyticsFooterLinkName = {
+  ABOUT_US: 'ABOUT_US',
+  CAREERS: 'CAREERS',
+  HOW_IT_WORKS: 'HOW_IT_WORKS',
+  TEAM: 'TEAM',
+  ADVERTISE_WITH_US: 'ADVERTISE_WITH_US',
+  PRIVACY: 'PRIVACY',
+  TERMS: 'TERMS',
+  BUG_BOUNTY: 'BUG_BOUNTY',
+  MEW_MOBILE_APP: 'MEW_MOBILE_APP',
+  ENKRYPT: 'ENKRYPT',
+  PORTFOLIO: 'PORTFOLIO',
+  ETHVM: 'ETHVM',
+  MEWTOPIA: 'MEWTOPIA',
+  PRESS_KIT: 'PRESS_KIT',
+  HELP_CENTER: 'HELP_CENTER',
+  CUSTOMER_SUPPORT: 'CUSTOMER_SUPPORT',
+  SECURITY_POLICY: 'SECURITY_POLICY',
+  VERIFY_MESSAGE: 'VERIFY_MESSAGE',
+  CONVERT_UNITS: 'CONVERT_UNITS',
+  SEND_OFFLINE_HELPER: 'SEND_OFFLINE_HELPER',
+  ETH_DONATION: 'ETH_DONATION',
+  BTC_DONATION: 'BTC_DONATION',
+  COINGECKO: 'COINGECKO',
+  FAQ: 'FAQ',
+  JOIN_COMMUNITY: 'JOIN_COMMUNITY',
+  OPEN_MOBILE_MENU: 'OPEN_MOBILE_MENU',
+} as const
+export type AnalyticsFooterLinkName = typeof AnalyticsFooterLinkName[keyof typeof AnalyticsFooterLinkName]
+
+/** Always-present part of the analytics event payload when a footer link is clicked */
+export type AnalyticsFooterLinkClickedPartialPayload = {
+  // "product" and "network" should be added by consumer in an enrichment
+  // or by wrapping the "track" function
+  language: string,
+  sourceURL: string,
+  destinationURL: string,
+}
+
+export const AnalyticsSubscriptionEventName = {
+  CLOSE_POPUP: "CLOSE_POPUP",
+  OPEN_POPUP: "OPEN_POPUP",
+  CLICK_BUY_CRYPTO_BTN: "CLICK_BUY_CRYPTO_BTN",
+  CLICK_SIGNUP_BTN: "CLICK_SIGNUP_BTN",
+  CLICK_FINISH: "CLICK_FINISH",
+  CREATE_WALLET1: 'CREATE_WALLET1',
+} as const
+export type AnalyticsSubscriptionEventName = typeof AnalyticsSubscriptionEventName[keyof typeof AnalyticsSubscriptionEventName]
+
+/** Always-present part of the analytics subscription event payload */
+export type AnalyticsSubscriptionPartialPayload = {
+  route: string,
+  language: string,
+}