feat(widget-configurator): google analytics events (#3335)

* feat(widget-configurator): google analytics events * chore: log * chore: remove logs * chore: update events
cowprotocol · Nov 7, 2023 · 9b1074e · 9b1074e
1 parent 60a16ec
commit 9b1074e
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 12 deletions.
diff --git a/apps/widget-configurator/.env b/apps/widget-configurator/.env
@@ -0,0 +1,2 @@
+# Analytics
+#REACT_APP_GOOGLE_ANALYTICS_ID=
diff --git a/apps/widget-configurator/.env.production b/apps/widget-configurator/.env.production
@@ -0,0 +1,6 @@
+#######################################
+# Development
+#######################################
+
+# Enables mock mode (default = false)
+REACT_APP_MOCK=false
diff --git a/apps/widget-configurator/src/app/analytics.ts b/apps/widget-configurator/src/app/analytics.ts
@@ -0,0 +1,22 @@
+import { sendEvent, Category } from '@cowprotocol/analytics'
+
+export function connectWalletToConfigurator() {
+  sendEvent({
+    category: Category.WIDGET_CONFIGURATOR,
+    action: 'Connect wallet',
+  })
+}
+
+export function viewEmbedCode() {
+  sendEvent({
+    category: Category.WIDGET_CONFIGURATOR,
+    action: 'View code',
+  })
+}
+
+export function copyEmbedCode() {
+  sendEvent({
+    category: Category.WIDGET_CONFIGURATOR,
+    action: 'Copy code',
+  })
+}
diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx
@@ -24,6 +24,7 @@ import { ConfiguratorState } from './types'
 
 import { ColorModeContext } from '../../theme/ColorModeContext'
 import { web3Modal } from '../../wagmiConfig'
+import { connectWalletToConfigurator } from '../analytics'
 import { EmbedDialog } from '../embedDialog'
 
 const DEFAULT_STATE = {
@@ -57,7 +58,7 @@ export function Configurator({ title }: { title: string }) {
   const [buyToken] = buyTokenState
   const [buyTokenAmount] = buyTokenAmountState
 
-  const { isDisconnected } = useAccount()
+  const { isDisconnected, isConnected } = useAccount()
   const network = useNetwork()
 
   const walletChainId = network.chain?.id
@@ -85,6 +86,13 @@ export function Configurator({ title }: { title: string }) {
     web3Modal.setThemeMode(mode)
   }, [mode])
 
+  // Fire an event to GA when user connect a wallet
+  useEffect(() => {
+    if (isConnected) {
+      connectWalletToConfigurator()
+    }
+  }, [isConnected])
+
   return (
     <Box sx={WrapperStyled}>
       {!isDrawerOpen && (

diff --git a/apps/widget-configurator/src/app/embedDialog/index.tsx b/apps/widget-configurator/src/app/embedDialog/index.tsx
@@ -18,6 +18,8 @@ import { reactExample } from './utils/reactExample'
 import { vanilaNpmExample } from './utils/vanilaNpmExample'
 import { vanillaNoDepsExample } from './utils/vanillaNoDepsExample'
 
+import { copyEmbedCode, viewEmbedCode } from '../analytics'
+
 function a11yProps(index: number) {
   return {
     id: `simple-tab-${index}`,
@@ -38,6 +40,7 @@ export function EmbedDialog({ params }: EmbedDialogProps) {
   const handleClickOpen = (scrollType: DialogProps['scroll']) => () => {
     setOpen(true)
     setScroll(scrollType)
+    viewEmbedCode()
   }
 
   const handleClose = () => {
@@ -65,6 +68,7 @@ export function EmbedDialog({ params }: EmbedDialogProps) {
 
   const handleCopy = () => {
     navigator.clipboard.writeText(code)
+    copyEmbedCode()
   }
 
   return (

diff --git a/apps/widget-configurator/vite.config.ts b/apps/widget-configurator/vite.config.ts
@@ -1,9 +1,12 @@
 /// <reference types="vitest" />
 import react from '@vitejs/plugin-react-swc'
 import { defineConfig } from 'vite'
+import macrosPlugin from 'vite-plugin-babel-macros'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import viteTsConfigPaths from 'vite-tsconfig-paths'
 
+import { getReactProcessEnv } from '../../tools/getReactProcessEnv'
+
 const plugins = [
   nodePolyfills({
     include: ['stream'],
@@ -14,24 +17,31 @@ const plugins = [
     },
     protocolImports: true,
   }),
+  macrosPlugin(),
   react(),
   viteTsConfigPaths({
     root: '../../',
   }),
 ]
 
-export default defineConfig({
-  cacheDir: '../../node_modules/.vite/widget-configurator',
+export default defineConfig(({ mode }) => {
+  return {
+    define: {
+      ...getReactProcessEnv(mode),
+    },
 
-  server: {
-    port: 4200,
-    host: 'localhost',
-  },
+    cacheDir: '../../node_modules/.vite/widget-configurator',
 
-  preview: {
-    port: 4300,
-    host: 'localhost',
-  },
+    server: {
+      port: 4200,
+      host: 'localhost',
+    },
+
+    preview: {
+      port: 4300,
+      host: 'localhost',
+    },
 
-  plugins,
+    plugins,
+  }
 })
diff --git a/libs/analytics/src/types.ts b/libs/analytics/src/types.ts
@@ -18,6 +18,7 @@ export enum Category {
   SERVICE_WORKER = 'Service worker',
   TWAP = 'TWAP',
   COW_FORTUNE = 'CoWFortune',
+  WIDGET_CONFIGURATOR = 'Widget configurator',
 }
 
 export interface EventParams {