Add Google Analytics (#28)

src/components/analytics.js

@@ -0,0 +1,16 @@
+const ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? ''
+
+const __html = `
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+
+gtag('config', ${JSON.stringify(ID)});
+`
+
+export default function Analytics() {
+  return !ID ? null : <>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-YKZJQBPHL6"></script>
+    <script dangerouslySetInnerHTML={{ __html }}></script>
+  </>
+}

src/pages/_app.js

@@ -3,6 +3,7 @@ import { GlobalStyles } from 'twin.macro'
 import Title from '@/components/title'
 import Head from 'next/head'
 import Layout from '@/components/layout'
+import Analytics from '@/components/analytics'
 
 function MyApp({ Component, pageProps }) {
   return (
@@ -16,6 +17,8 @@ function MyApp({ Component, pageProps }) {
         <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=swap" rel="stylesheet" />
       </Head>
 
+      <Analytics />
+
       <GlobalStyles />
 
       <Layout>

yarn.lock

@@ -2918,9 +2918,9 @@ camelcase@^6.2.0:
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
 caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001179, caniuse-lite@^1.0.30001181, caniuse-lite@^1.0.30001196:
-  version "1.0.30001204"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001204.tgz#256c85709a348ec4d175e847a3b515c66e79f2aa"
-  integrity sha512-JUdjWpcxfJ9IPamy2f5JaRDCaqJOxDzOSKtbdx4rH9VivMd1vIzoPumsJa9LoMIi4Fx2BV2KZOxWhNkBjaYivQ==
+  version "1.0.30001482"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001482.tgz"
+  integrity sha512-F1ZInsg53cegyjroxLNW9DmrEQ1SuGRTO1QlpA0o2/6OpQ0gFeDRoq1yFmnr8Sakn9qwwt9DmbxHB6w167OSuQ==
 
 cardinal@^2.1.1:
   version "2.1.1"