diff --git a/web/src/App.js b/web/src/App.js index 1fa4180..837b87a 100644 --- a/web/src/App.js +++ b/web/src/App.js @@ -16,6 +16,7 @@ import JsOrgCard from './components/cards/JsOrgCard' import PypiCard from './components/cards/PypiCard' import S3Card from './components/cards/S3Card' import CratesioCard from './components/cards/CratesioCard' +import { EventReporter } from './components/Analytics' export default function App() { const [query, setQuery] = useDeferredState(1000) @@ -47,6 +48,7 @@ export default function App() { + ) : null} @@ -80,7 +82,7 @@ const Input = styled.input.attrs({ spellcheck: 'false', })` width: 100%; - margin-top: 20px; + margin-top: 30px; padding: 20px; outline: none; text-align: center; @@ -88,11 +90,7 @@ const Input = styled.input.attrs({ font-family: monospace; border: none; - transition: box-shadow 0.5s ease-out; - - &:hover { - box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); - } + box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); ${mobile} { font-size: 2rem; diff --git a/web/src/components/Analytics.js b/web/src/components/Analytics.js new file mode 100644 index 0000000..e26b4d4 --- /dev/null +++ b/web/src/components/Analytics.js @@ -0,0 +1,13 @@ +import { useEffect } from 'react' +import ReactGA from 'react-ga' + +export function EventReporter({ query }) { + useEffect(() => { + ReactGA.event({ + category: 'Navigation', + action: 'Send a request', + }) + }, [query]) + + return null +} diff --git a/web/src/index.js b/web/src/index.js index 2ec256c..f1bae16 100644 --- a/web/src/index.js +++ b/web/src/index.js @@ -5,9 +5,9 @@ import './index.css' import App from './App' import * as serviceWorker from './serviceWorker' +ReactDOM.render(, document.getElementById('root')) + ReactGA.initialize('UA-28919359-15') ReactGA.pageview(window.location.pathname + window.location.search) -ReactDOM.render(, document.getElementById('root')) - serviceWorker.unregister()