chore: omit ga

src/components/Footer.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { OutboundLink } from 'react-ga';
 import { useTranslation } from 'react-i18next';
 import { FaGithub, FaProductHunt, FaTwitter } from 'react-icons/fa';
 import { GoHeart } from 'react-icons/go';
@@ -57,34 +56,34 @@ const Community = () => {
       <Title>{t('community')}</Title>
       <ul>
         <li>
-          <OutboundLink
-            to="https://github.com/uetchy/namae"
-            eventLabel="GitHub Repo"
+          <a
+            href="https://github.com/uetchy/namae"
             aria-label="Go to GitHub repository"
             target="_blank"
+            rel="noreferrer"
           >
             GitHub
-          </OutboundLink>
+          </a>
         </li>
         <li>
-          <OutboundLink
-            to="https://github.com/uetchy/namae/issues"
-            eventLabel="GitHub Issues"
+          <a
+            href="https://github.com/uetchy/namae/issues"
             aria-label="Go to GitHub Issues"
             target="_blank"
+            rel="noreferrer"
           >
             {t('issues')}
-          </OutboundLink>
+          </a>
         </li>
         <li>
-          <OutboundLink
-            to="https://dev.to/uetchy/give-your-app-slick-name-with-namae-dev-5c4h"
-            eventLabel="Blog article"
+          <a
+            href="https://dev.to/uetchy/give-your-app-slick-name-with-namae-dev-5c4h"
             aria-label="Go to blog"
             target="_blank"
+            rel="noreferrer"
           >
             {t('blog')}
-          </OutboundLink>
+          </a>
         </li>
       </ul>
       <Box>
@@ -110,54 +109,54 @@ const About = () => {
           ☕️
         </span>{' '}
         by{' '}
-        <OutboundLink
-          to="https://twitter.com/uechz"
-          eventLabel="Author Page"
+        <a
+          href="https://twitter.com/uechz"
           aria-label="Author page"
           target="_blank"
+          rel="noreferrer"
         >
           <Bold>Yasuaki Uechi</Bold>
-        </OutboundLink>
+        </a>
       </p>
       <ShareBox>
         <Links>
-          <OutboundLink
-            to={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
+          <a
+            href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
               `namae — ${t('title')}`
             )}&url=${encodeURIComponent('https://namae.dev')}`}
-            eventLabel="Tweet"
             aria-label="Tweet this page"
             target="_blank"
+            rel="noreferrer"
           >
             <FaTwitter />
-          </OutboundLink>
-          <OutboundLink
-            to="https://www.producthunt.com/posts/namae"
-            eventLabel="ProductHunt"
+          </a>
+          <a
+            href="https://www.producthunt.com/posts/namae"
             aria-label="Go to ProductHunt page"
             target="_blank"
+            rel="noreferrer"
           >
             <FaProductHunt />
-          </OutboundLink>
-          <OutboundLink
-            to="https://github.com/uetchy/namae"
-            eventLabel="GitHub Repo"
+          </a>
+          <a
+            href="https://github.com/uetchy/namae"
             aria-label="Go to GitHub repository"
             target="_blank"
+            rel="noreferrer"
           >
             <FaGithub />
-          </OutboundLink>
-          <OutboundLink
-            to="https://github.com/sponsors/uetchy"
-            eventLabel="GitHub Sponsors"
+          </a>
+          <a
+            href="https://github.com/sponsors/uetchy"
             aria-label="Go to GitHub Sponsors"
             target="_blank"
+            rel="noreferrer"
           >
             <SponsorBadge>
               <GoHeart size="1.3em" />
               <span>Sponsor</span>
             </SponsorBadge>
-          </OutboundLink>
+          </a>
         </Links>
       </ShareBox>
 

src/components/cards/core.tsx

@@ -1,7 +1,6 @@
 import useFetch from 'fetch-suspense';
 import Tooltip from 'rc-tooltip';
 import React, { Suspense, useEffect, useState } from 'react';
-import { OutboundLink } from 'react-ga';
 import { useTranslation } from 'react-i18next';
 import { GoInfo } from 'react-icons/go';
 import { IoIosFlash } from 'react-icons/io';
@@ -216,13 +215,9 @@ export const Result: React.FC<{
           <ResultIcon>{icon}</ResultIcon>
           <ResultName>
             {link ? (
-              <OutboundLink
-                to={link}
-                eventLabel={link.split('/')[2]}
-                target="_blank"
-              >
+              <a href={link} target="_blank" rel="noreferrer">
                 {content}
-              </OutboundLink>
+              </a>
             ) : (
               content
             )}

src/index.tsx

@@ -9,7 +9,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 import { store, wrapHistoryWithStoreHandler } from './store';
-import { initSentry, wrapHistoryWithGA } from './util/analytics';
+import { initSentry } from './util/analytics';
 import { compose } from './util/array';
 import { initCrisp } from './util/crisp';
 import './util/i18n';
@@ -18,11 +18,7 @@ import { FullScreenSuspense } from './util/suspense';
 initSentry();
 initCrisp();
 
-const history = compose(
-  createBrowserHistory(),
-  wrapHistoryWithStoreHandler,
-  wrapHistoryWithGA
-);
+const history = compose(createBrowserHistory(), wrapHistoryWithStoreHandler);
 
 ReactDOM.render(
   <StoreProvider store={store}>

src/util/analytics.ts

@@ -1,59 +1,46 @@
-import ReactGA from 'react-ga';
 import * as Sentry from '@sentry/browser';
-import { History } from 'history';
 
 const isProduction = process.env.NODE_ENV !== 'development';
 
-export function wrapHistoryWithGA(history: History) {
-  if (isProduction) {
-    ReactGA.initialize('UA-28919359-15');
-    ReactGA.pageview(window.location.pathname + window.location.search);
-    history.listen((location) => {
-      ReactGA.pageview(location.pathname + location.search);
-    });
-  }
-  return history;
+declare namespace umami {
+  var trackEvent: (
+    value: string,
+    type: string,
+    url?: string,
+    websiteId?: string
+  ) => void;
 }
 
 export function trackEvent({
-  category,
-  action,
-  label = undefined,
-  value = undefined,
+  value,
+  type = 'custom',
 }: {
-  category: string;
-  action: string;
-  label?: string;
-  value?: number;
+  value: string;
+  type?: string;
 }) {
   if (isProduction) {
-    ReactGA.event({
-      category,
-      action,
-      label,
-      value,
-    });
+    umami.trackEvent(value, type);
   }
 }
 
 export function sendQueryEvent(query: string): void {
-  trackEvent({ category: 'Search', action: 'Invoke New Search', label: query });
+  trackEvent({ value: 'Invoke new search', type: 'search' });
 }
 
 export function sendGettingStartedEvent(): void {
-  trackEvent({ category: 'Search', action: 'Getting Started' });
+  trackEvent({ value: 'Click getting started button', type: 'search' });
 }
 
 export function sendExpandEvent(): void {
-  trackEvent({ category: 'Result', action: 'Expand Card' });
+  trackEvent({ value: 'Expand card', type: 'search' });
 }
 
 export function sendAcceptSuggestionEvent(): void {
-  trackEvent({ category: 'Suggestion', action: 'Accept' });
+  trackEvent({ value: 'Accept suggestion', type: 'suggest' });
 }
 
 export function sendShuffleSuggestionEvent(): void {
-  trackEvent({ category: 'Suggestion', action: 'Shuffle' });
+  trackEvent({ value: 'Shuffle suggestion', type: 'suggest' });
 }
 
 export function initSentry(): void {