chore(explorer): add google analytics for multiple events (#2434)

kadena-community · Jul 23, 2024 · 52c211c · 52c211c
1 parent d1ebdcf
commit 52c211c
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 6 deletions.
diff --git a/.changeset/shiny-sheep-destroy.md b/.changeset/shiny-sheep-destroy.md
@@ -0,0 +1,5 @@
+---
+'@kadena/explorer': patch
+---
+
+add google analytics events for multiple actions
diff --git a/packages/apps/explorer/src/components/BlockTable/BlockCell/BlockCell.tsx b/packages/apps/explorer/src/components/BlockTable/BlockCell/BlockCell.tsx
@@ -1,5 +1,6 @@
 import { ValueLoader } from '@/components/LoadingSkeleton/ValueLoader/ValueLoader';
 import type { IBlockData } from '@/services/block';
+import { EVENT_NAMES, analyticsEvent } from '@/utils/analytics';
 import { Stack, Text } from '@kadena/kode-ui';
 import classNames from 'classnames';
 import type { FC } from 'react';
@@ -32,6 +33,12 @@ export const BlockCell: FC<IProps> = ({
 
   const handleOpenHeight = useCallback(() => {
     if (isLoading) return;
+
+    analyticsEvent(EVENT_NAMES['click:open_blockheightpopup'], {
+      chainId: `${height.chainId}`,
+      height: `${height.height}`,
+    });
+
     if (handleOpenHeightBlock) {
       handleOpenHeightBlock(chainId, height);
     }

diff --git a/packages/apps/explorer/src/components/Footer/Footer.tsx b/packages/apps/explorer/src/components/Footer/Footer.tsx
@@ -1,4 +1,5 @@
 import { Link } from '@/components/Routing/Link';
+import { EVENT_NAMES, analyticsEvent } from '@/utils/analytics';
 import { menuConfig } from '@/utils/menuConfig';
 import {
   MonoLogoGithub,
@@ -27,6 +28,12 @@ export const Footer: FC = () => {
   const handleToggleContent = () => {
     setIsOpen((v) => !v);
   };
+
+  const handleAnalyticsForSocial = (social: string) => {
+    analyticsEvent(EVENT_NAMES['click:nav_sociallink'], {
+      social,
+    });
+  };
   return (
     <Stack
       as="footer"
@@ -63,6 +70,7 @@ export const Footer: FC = () => {
             <Heading as="h6">Socials</Heading>
             <Stack gap="sm">
               <a
+                onClick={() => handleAnalyticsForSocial('twitter')}
                 className={socialLinkClass}
                 href="https://x.com/kadena_io"
                 target="_blank"
@@ -72,6 +80,7 @@ export const Footer: FC = () => {
               </a>
 
               <a
+                onClick={() => handleAnalyticsForSocial('linkedin')}
                 className={socialLinkClass}
                 href="https://www.linkedin.com/company/kadena-llc/mycompany/"
                 target="_blank"
@@ -80,6 +89,7 @@ export const Footer: FC = () => {
                 <MonoLogoLinkedin />
               </a>
               <a
+                onClick={() => handleAnalyticsForSocial('github')}
                 className={socialLinkClass}
                 href="https://github.com/kadena-community"
                 target="_blank"

diff --git a/packages/apps/explorer/src/components/Footer/FooterColumn.tsx b/packages/apps/explorer/src/components/Footer/FooterColumn.tsx
@@ -1,3 +1,4 @@
+import { EVENT_NAMES, analyticsEvent } from '@/utils/analytics';
 import { Heading, Stack } from '@kadena/kode-ui';
 import classNames from 'classnames';
 import type { FC } from 'react';
@@ -11,6 +12,10 @@ interface IProps {
 }
 
 export const FooterColumn: FC<IProps> = ({ data, isOpen }) => {
+  const handleAnalyticsForClick = (item: { url: string; label: string }) => {
+    analyticsEvent(EVENT_NAMES['click:nav_footerlink'], item);
+  };
+
   return (
     <Stack
       className={classNames(footerColumnClass, {
@@ -23,7 +28,11 @@ export const FooterColumn: FC<IProps> = ({ data, isOpen }) => {
     >
       <Heading as="h6">{data.label}</Heading>
       {data.children.map((item) => (
-        <FooterLink key={item.url} href={item.url}>
+        <FooterLink
+          onClick={() => handleAnalyticsForClick(item)}
+          key={item.url}
+          href={item.url}
+        >
           {item.label}
         </FooterLink>
       ))}

diff --git a/packages/apps/explorer/src/components/Footer/FooterLink.tsx b/packages/apps/explorer/src/components/Footer/FooterLink.tsx
@@ -5,11 +5,12 @@ import { footerLinkClass } from './style.css';
 
 interface IProps extends PropsWithChildren {
   href: string;
+  onClick: () => void;
 }
 
-export const FooterLink: FC<IProps> = ({ href, children }) => {
+export const FooterLink: FC<IProps> = ({ onClick, href, children }) => {
   return (
-    <a className={footerLinkClass} href={href} target="_bank">
+    <a onClick={onClick} className={footerLinkClass} href={href} target="_bank">
       <Text>{children}</Text>
     </a>
   );

diff --git a/packages/apps/explorer/src/components/GraphqlQueryDialog/GraphqlQueryDialog.tsx b/packages/apps/explorer/src/components/GraphqlQueryDialog/GraphqlQueryDialog.tsx
@@ -1,5 +1,6 @@
 import { useNetwork } from '@/context/networksContext';
 import { useQueryContext } from '@/context/queryContext';
+import { EVENT_NAMES, analyticsEvent } from '@/utils/analytics';
 import { MonoHub } from '@kadena/kode-icons/system';
 import {
   Box,
@@ -21,17 +22,21 @@ import { code } from './styles.css';
 export const GraphQLQueryDialog = (): JSX.Element => {
   const { queries } = useQueryContext();
   const { activeNetwork } = useNetwork();
-
   const [isOpen, setIsOpen] = useState(false);
 
+  const handlePress = () => {
+    setIsOpen(true);
+    analyticsEvent(EVENT_NAMES['click:open_graphDialog'], {});
+  };
+
   return (
     <>
       <Button
         className={buttonSizeClass}
         startVisual={<MonoHub />}
         title="Show the GraphQL query used."
         variant="transparent"
-        onPress={() => setIsOpen(true)}
+        onPress={handlePress}
       ></Button>
       <Dialog
         isOpen={isOpen}

diff --git a/packages/apps/explorer/src/components/SelectNetwork/SelectNetwork.tsx b/packages/apps/explorer/src/components/SelectNetwork/SelectNetwork.tsx
@@ -1,4 +1,5 @@
 import { useNetwork } from '@/context/networksContext';
+import { EVENT_NAMES, analyticsEvent } from '@/utils/analytics';
 import { MonoSettings } from '@kadena/kode-icons/system';
 import { Button, Select, SelectItem, Stack } from '@kadena/kode-ui';
 import type { FC } from 'react';
@@ -14,6 +15,11 @@ export const SelectNetwork: FC = () => {
     setActiveNetwork(value);
   };
 
+  const handlePress = () => {
+    setIsOpen(true);
+    analyticsEvent(EVENT_NAMES['click:open_configDialog'], {});
+  };
+
   if (!networks) return null;
 
   return (
@@ -42,7 +48,7 @@ export const SelectNetwork: FC = () => {
           </Select>
         </Media>
         <Button
-          onPress={() => setIsOpen(true)}
+          onPress={handlePress}
           variant="transparent"
           endVisual={<MonoSettings />}
         />

diff --git a/packages/apps/explorer/src/components/ThemeToggle/ThemeToggle.tsx b/packages/apps/explorer/src/components/ThemeToggle/ThemeToggle.tsx
@@ -1,3 +1,4 @@
+import { EVENT_NAMES, analyticsEvent } from '@/utils/analytics';
 import { MonoContrast } from '@kadena/kode-icons';
 import { Button, Themes, useTheme } from '@kadena/kode-ui';
 import classNames from 'classnames';
@@ -21,6 +22,11 @@ export const ThemeToggle: FC = () => {
 
   const toggleTheme = useCallback((): void => {
     const newTheme = theme === Themes.dark ? Themes.light : Themes.dark;
+
+    analyticsEvent(EVENT_NAMES['click:switch_theme'], {
+      theme: newTheme,
+    });
+
     setTheme(newTheme);
   }, [setTheme, theme]);
 

diff --git a/packages/apps/explorer/src/utils/analytics.ts b/packages/apps/explorer/src/utils/analytics.ts
@@ -5,6 +5,12 @@ export const EVENT_NAMES = {
   'click:add_network': 'click:add_network',
   'click:remove_network': 'click:remove_network',
   'click:change_network': 'click:change_network',
+  'click:switch_theme': 'click:switch_theme',
+  'click:open_graphDialog': 'click:open_graphDialog',
+  'click:open_configDialog': 'click:open_configDialog',
+  'click:nav_sociallink': 'click:nav_sociallink',
+  'click:nav_footerlink': 'click:nav_footerlink',
+  'click:open_blockheightpopup': 'click:open_blockheightpopup',
   'event:stopserver': 'event:stopserver',
 } as const;