chore: add ga events

web/src/App.tsx

@@ -33,25 +33,6 @@ export default function App() {
   );
 }
 
-function Search() {
-  const params = useParams<{query: string}>();
-  const currentQuery = sanitize(params.query);
-
-  return (
-    <>
-      <Helmet>
-        <title>Search for &quot;{currentQuery}&quot; — namae</title>
-      </Helmet>
-      <Header>
-        <Form initialValue={currentQuery} />
-      </Header>
-      <Content>
-        <Cards query={currentQuery} />
-      </Content>
-    </>
-  );
-}
-
 function Home() {
   const {t} = useTranslation();
 
@@ -70,6 +51,25 @@ function Home() {
   );
 }
 
+function Search() {
+  const {query} = useParams<{query: string}>();
+  const currentQuery = sanitize(query);
+
+  return (
+    <>
+      <Helmet>
+        <title>Search for &quot;{currentQuery}&quot; — namae</title>
+      </Helmet>
+      <Header>
+        <Form initialValue={currentQuery} />
+      </Header>
+      <Content>
+        <Cards query={currentQuery} />
+      </Content>
+    </>
+  );
+}
+
 const GlobalStyle = createGlobalStyle`
 * {
   box-sizing: border-box;

web/src/components/Form.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import {useTranslation} from 'react-i18next';
 import {Link, useHistory} from 'react-router-dom';
 import {sanitize} from '../util/text';
-import {sendQueryStatistics} from '../util/analytics';
+import {sendQueryEvent} from '../util/analytics';
 import {useDeferredState} from '../util/hooks';
 import {mobile} from '../util/css';
 import Suggestion from './Suggestion';
@@ -44,7 +44,7 @@ const Form: React.FC<{
       if (!query || query === '') {
         return;
       }
-      sendQueryStatistics(query.length);
+      sendQueryEvent(query);
       history.push(`/s/${query}`);
     }
 

web/src/components/Suggestion.tsx

@@ -9,6 +9,10 @@ import {capitalize, stem, germanify, njoin, lower, upper} from '../util/text';
 import {sampleFromArray, fillArray} from '../util/array';
 import {mobile} from '../util/css';
 import {sanitize} from '../util/text';
+import {
+  sendShuffleSuggestionEvent,
+  sendAcceptSuggestionEvent,
+} from '../util/analytics';
 
 type Modifier = (word: string) => string;
 
@@ -22,6 +26,7 @@ const modifiers: Modifier[] = [
   (word): string => njoin('Co', lower(word), {elision: false}),
   (word): string => njoin('Deep', capitalize(word), {elision: false}),
   (word): string => njoin('Easy', capitalize(word), {elision: false}),
+  (word): string => njoin('En', lower(word), {elision: false}),
   (word): string => njoin('Fast', lower(word), {elision: false}),
   (word): string => njoin('Fire', lower(word), {elision: false}),
   (word): string => njoin('Fusion', capitalize(word), {elision: false}),
@@ -98,6 +103,7 @@ const modifiers: Modifier[] = [
   (word): string => njoin(capitalize(word), 'Club', {elision: false}),
   (word): string => njoin(capitalize(word), 'DB', {elision: false}),
   (word): string => njoin(capitalize(word), 'Express', {elision: false}),
+  (word): string => njoin(capitalize(word), 'en'),
   (word): string => njoin(capitalize(word), 'feed', {elision: false}),
   (word): string => njoin(capitalize(word), 'Finder', {elision: false}),
   (word): string => njoin(capitalize(word), 'flow', {elision: false}),
@@ -186,9 +192,15 @@ const Suggestion: React.FC<{
   }
 
   function applyQuery(name: string): void {
+    sendAcceptSuggestionEvent();
     onSubmit(name);
   }
 
+  function onShuffleButtonClicked() {
+    sendShuffleSuggestionEvent();
+    shuffle();
+  }
+
   useEffect(() => {
     let isEffective = true;
     const fn = async (): Promise<void> => {
@@ -218,7 +230,7 @@ const Suggestion: React.FC<{
             </Item>
           ))}
       </Items>
-      <Button onClick={shuffle}>
+      <Button onClick={onShuffleButtonClicked}>
         <TiArrowSync />
       </Button>
     </Container>

web/src/components/Welcome.tsx

@@ -24,6 +24,7 @@ import {DiRust, DiHeroku} from 'react-icons/di';
 import {SpectrumIcon, NowIcon, NetlifyIcon, OcamlIcon} from './Icons';
 import {shuffleArray} from '../util/array';
 import {mobile} from '../util/css';
+import {sendExampleQueryEvent} from '../util/analytics';
 
 const QUERY_WORDS = [
   'Name',
@@ -54,7 +55,11 @@ const Welcome: React.FC = () => {
           <List>
             {queries.map((query) => (
               <ListButton key={query}>
-                <Link to={`/s/${query}`}>{query}</Link>
+                <Link
+                  to={`/s/${query}`}
+                  onClick={() => sendExampleQueryEvent(query)}>
+                  {query}
+                </Link>
               </ListButton>
             ))}
           </List>

web/src/components/cards/core.tsx

@@ -7,7 +7,7 @@ import BarLoader from 'react-spinners/BarLoader';
 import {GoInfo} from 'react-icons/go';
 import {IoIosFlash} from 'react-icons/io';
 import {useTranslation} from 'react-i18next';
-import {sendError} from '../../util/analytics';
+import {sendError, sendExpandEvent} from '../../util/analytics';
 
 import {mobile} from '../../util/css';
 import {ExternalLink} from '../Links';
@@ -38,6 +38,7 @@ export const Repeater: React.FC<{
   const {t} = useTranslation();
 
   function onClick() {
+    sendExpandEvent();
     setRevealAlternatives(true);
   }
 

web/src/util/analytics.ts

@@ -10,16 +10,47 @@ export function initGA(): void {
   }
 }
 
-export function sendQueryStatistics(queryLength: number): void {
+export function track({
+  category,
+  action,
+  label = undefined,
+  value = undefined,
+}: {
+  category: string;
+  action: string;
+  label?: string;
+  value?: number;
+}) {
   if (isProduction) {
     ReactGA.event({
-      category: 'Search',
+      category,
-      action: 'New search invoked',
+      action,
-      value: queryLength,
+      label,
+      value,
     });
   }
 }
 
+export function sendQueryEvent(query: string): void {
+  track({category: 'Search', action: 'search', label: query});
+}
+
+export function sendExampleQueryEvent(query: string): void {
+  track({category: 'Search', action: 'tryExampleQuery', label: query});
+}
+
+export function sendExpandEvent(): void {
+  track({category: 'Result', action: 'expand'});
+}
+
+export function sendAcceptSuggestionEvent(): void {
+  track({category: 'Suggestion', action: 'accept'});
+}
+
+export function sendShuffleSuggestionEvent(): void {
+  track({category: 'Suggestion', action: 'shuffle'});
+}
+
 export function initSentry(): void {
   if (isProduction) {
     Sentry.init({