[docs] fix: analytics events (#809)

kadena-community · Aug 22, 2023 · 9f43e24 · 9f43e24 · vercel · Aug 22, 2023
1 parent 468be4a
commit 9f43e24
Show file tree

Hide file tree

Showing 11 changed files with 27 additions and 55 deletions.
diff --git a/packages/apps/docs/src/components/BottomPageSection/BottomPageSection.tsx b/packages/apps/docs/src/components/BottomPageSection/BottomPageSection.tsx
@@ -27,13 +27,14 @@ export const BottomPageSection: FC<IProps> = ({
 
   const onClickAction = (page: 'prev' | 'next', href?: string): void => {
     if (!href) return;
+
     analyticsEvent(
       page === 'next'
         ? EVENT_NAMES['click:next_page']
         : EVENT_NAMES['click:previous_page'],
       {
-        label: `to: ${href}`,
-        url: window.location.href,
+        to: href,
+        from: window.location.pathname,
       },
     );
   };

diff --git a/packages/apps/docs/src/components/BottomPageSection/components/useSubscribe.ts b/packages/apps/docs/src/components/BottomPageSection/components/useSubscribe.ts
@@ -1,4 +1,5 @@
 import { isEmailValid } from '@/utils';
+import { analyticsEvent, EVENT_NAMES } from '@/utils/analytics';
 import { ChangeEvent, MouseEvent, useState } from 'react';
 
 interface IReturn {
@@ -23,6 +24,8 @@ export const useSubscribe = (): IReturn => {
   ): Promise<void> => {
     event.preventDefault();
 
+    analyticsEvent(EVENT_NAMES['click:subscribe']);
+
     try {
       if (!canSubmit) return;
       const res = await fetch('/api/subscribe', {

diff --git a/packages/apps/docs/src/components/Layout/Full/components/Aside/ListItem.tsx b/packages/apps/docs/src/components/Layout/Full/components/Aside/ListItem.tsx
@@ -30,7 +30,7 @@ export const ListItem: FC<IProps> = ({
 
     analyticsEvent(EVENT_NAMES['click:asidemenu_deeplink'], {
       label: item.title,
-      url: slug,
+      hash: slug,
     });
 
     scrollArea?.querySelector(slug)?.scrollIntoView({

diff --git a/packages/apps/docs/src/components/Layout/components/Footer/Footer.tsx b/packages/apps/docs/src/components/Layout/components/Footer/Footer.tsx
@@ -19,15 +19,18 @@ export const Footer: FC = () => {
           <IconButton
             title="Go to our Github"
             icon={SystemIcon.Github}
-            onClick={() => alert('todo, make an href')}
+            as="a"
+            href="https://github.com/kadena-community"
           />
           <IconButton
             title="Go to our Twitter"
             icon={SystemIcon.Twitter}
-            onClick={() => alert('todo, make an href')}
+            as="a"
+            href="https://twitter.com/kadena_io"
           />
           <IconButton
-            onClick={() => alert('todo, make an href')}
+            as="a"
+            href="https://www.linkedin.com/company/kadena-llc"
             title="Go to our Linkedin"
             icon={SystemIcon.Linkedin}
           />

diff --git a/packages/apps/docs/src/components/Layout/components/Header/Header.tsx b/packages/apps/docs/src/components/Layout/components/Header/Header.tsx
@@ -67,7 +67,8 @@ export const Header: FC<IProps> = ({ menuItems, layout = 'full' }) => {
 
         <HeaderSocialIconGroup>
           <IconButton
-            as="button"
+            as="a"
+            href="https://twitter.com/kadena_io"
             title="Go to our Twitter"
             icon={SystemIcon.Twitter}
             color="inverted"

diff --git a/packages/apps/docs/src/components/Layout/components/Header/ThemeToggle.tsx b/packages/apps/docs/src/components/Layout/components/Header/ThemeToggle.tsx
@@ -16,7 +16,7 @@ export const ThemeToggle: FC = () => {
     const newTheme = theme === 'dark' ? 'light' : 'dark';
     setTheme(newTheme);
     analyticsEvent(EVENT_NAMES['click:change_theme'], {
-      label: `toggle theme to ${newTheme}`,
+      theme: newTheme,
     });
   };
 

diff --git a/packages/apps/docs/src/components/Layout/components/SideMenu/SideMenu.tsx b/packages/apps/docs/src/components/Layout/components/SideMenu/SideMenu.tsx
@@ -38,9 +38,8 @@ export const SideMenu: FC<IProps> = ({ closeMenu, menuItems }) => {
     e.preventDefault();
     const value = e.currentTarget.value;
     if (e.key === 'Enter') {
-      analyticsEvent(EVENT_NAMES['send:mobile_search'], {
-        label: value,
-        url: window.location.href,
+      analyticsEvent(EVENT_NAMES['click:mobile_search'], {
+        query: value,
       });
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       router.push(`/search?q=${value}`);

diff --git a/packages/apps/docs/src/components/Search/Search.tsx b/packages/apps/docs/src/components/Search/Search.tsx
@@ -28,7 +28,12 @@ export const Search: FC<IProps> = ({ query, hasScroll, limitResults }) => {
   } = useSemanticSearch(limitResults);
 
   useEffect(() => {
-    if (query !== undefined && query.trim() !== '') {
+    if (
+      query !== undefined &&
+      query.trim() !== '' &&
+      tabName !== undefined &&
+      tabName.trim() !== ''
+    ) {
       if (tabName === 'qa') {
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         handleSearchSubmit(query);

diff --git a/packages/apps/docs/src/pages/_app.tsx b/packages/apps/docs/src/pages/_app.tsx
@@ -13,11 +13,10 @@ import { markDownComponents } from '@/components/Markdown';
 import { MenuProvider, ThemeProvider } from '@/hooks';
 import { IPageMeta, IPageProps } from '@/types/Layout';
 import { getLayout } from '@/utils';
-import onExternalButtonClick from '@/utils/onExternalButtonClick';
 import { MDXProvider } from '@mdx-js/react';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
-import React, { FC, useEffect } from 'react';
+import React, { FC } from 'react';
 
 const GlobalStyles = globalCss({
   ...baseGlobalStyles,
@@ -52,24 +51,6 @@ export const MyApp = ({
 
   const Layout = getLayout(props.frontmatter.layout);
 
-  const handleBeforeUnload = (event: BeforeUnloadEvent): void => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const { href } = (event as any).originalTarget.activeElement;
-    onExternalButtonClick(href);
-  };
-
-  useEffect(() => {
-    window.addEventListener('beforeunload', handleBeforeUnload, {
-      capture: true,
-    });
-
-    return () => {
-      window.removeEventListener('beforeunload', handleBeforeUnload, {
-        capture: true,
-      });
-    };
-  }, []);
-
   return (
     <>
       <Head>

diff --git a/packages/apps/docs/src/utils/analytics.ts b/packages/apps/docs/src/utils/analytics.ts
@@ -3,16 +3,14 @@ export const EVENT_NAMES = {
   'click:asidemenu_deeplink': 'click:asidemenu_deeplink',
   'click:change_theme': 'click:change_theme',
   'click:open_searchmodal': 'click:open_searchmodal',
-  'send:mobile_search': 'send:mobile_search',
+  'click:mobile_search': 'click:mobile_search',
   'click:mobile_menu_open': 'click:mobile_menu_open',
-  'click:open_twitter': 'click:open_twitter',
-  'click:open_github': 'click:open_github',
-  'click:open_linkedin': 'click:open_linkedin',
   'click:edit_page': 'click:edit_page',
   'click:previous_page': 'click:previous_page',
   'click:next_page': 'click:next_page',
   'click:newsletter': 'click:newsletter',
   'click:search': 'click:search',
+  'click:subscribe': 'click:subscribe',
 } as const;
 
 export const COOKIE_CONSENTNAME = 'cookie_consent';

diff --git a/packages/apps/docs/src/utils/onExternalButtonClick.ts b/packages/apps/docs/src/utils/onExternalButtonClick.ts