1
0
mirror of https://github.com/uetchy/namae.git synced 2025-03-17 04:30:31 +09:00

chore: add ga events

This commit is contained in:
uetchy 2020-03-05 22:09:12 +09:00
parent 0fa08f57f3
commit 769548ccc9
6 changed files with 77 additions and 28 deletions

View File

@ -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;

View File

@ -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}`);
}

View File

@ -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>

View File

@ -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>

View File

@ -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);
}

View File

@ -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({