From 769548ccc9d1e1e1056ad7f31d52b7c17cbac9e7 Mon Sep 17 00:00:00 2001 From: Yasuaki Uechi Date: Thu, 5 Mar 2020 22:09:12 +0900 Subject: [PATCH] chore: add ga events --- web/src/App.tsx | 38 +++++++++++++++--------------- web/src/components/Form.tsx | 4 ++-- web/src/components/Suggestion.tsx | 14 ++++++++++- web/src/components/Welcome.tsx | 7 +++++- web/src/components/cards/core.tsx | 3 ++- web/src/util/analytics.ts | 39 +++++++++++++++++++++++++++---- 6 files changed, 77 insertions(+), 28 deletions(-) diff --git a/web/src/App.tsx b/web/src/App.tsx index d7631a7..cd99980 100644 --- a/web/src/App.tsx +++ b/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 ( - <> - - Search for "{currentQuery}" — namae - -
-
-
- - - - - ); -} - function Home() { const {t} = useTranslation(); @@ -70,6 +51,25 @@ function Home() { ); } +function Search() { + const {query} = useParams<{query: string}>(); + const currentQuery = sanitize(query); + + return ( + <> + + Search for "{currentQuery}" — namae + +
+ +
+ + + + + ); +} + const GlobalStyle = createGlobalStyle` * { box-sizing: border-box; diff --git a/web/src/components/Form.tsx b/web/src/components/Form.tsx index 46e7faa..07df023 100644 --- a/web/src/components/Form.tsx +++ b/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}`); } diff --git a/web/src/components/Suggestion.tsx b/web/src/components/Suggestion.tsx index 4a6ae09..2676629 100644 --- a/web/src/components/Suggestion.tsx +++ b/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 => { @@ -218,7 +230,7 @@ const Suggestion: React.FC<{ ))} - diff --git a/web/src/components/Welcome.tsx b/web/src/components/Welcome.tsx index 42fd0da..62b3864 100644 --- a/web/src/components/Welcome.tsx +++ b/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 = () => { {queries.map((query) => ( - {query} + sendExampleQueryEvent(query)}> + {query} + ))} diff --git a/web/src/components/cards/core.tsx b/web/src/components/cards/core.tsx index 5bd1fb6..b274b14 100644 --- a/web/src/components/cards/core.tsx +++ b/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); } diff --git a/web/src/util/analytics.ts b/web/src/util/analytics.ts index 00ec9c9..c671588 100644 --- a/web/src/util/analytics.ts +++ b/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', - action: 'New search invoked', - value: queryLength, + category, + action, + 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({