feat(website): add Google Analytics (#390)

KonradSzwarc · web-flow · commit 734bce44ec01 · 2021-10-14T22:41:15.000+02:00
diff --git a/packages/website/src/pages/_app.tsx b/packages/website/src/pages/_app.tsx
@@ -3,6 +3,7 @@ import 'swiper/css';
 import type { CSSProperties } from 'react';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
+import Script from 'next/script';
 
 import { ThemeProvider } from '@coderscamp/ui/theme';
 
@@ -16,13 +17,33 @@ const globalStyles: Record<string, CSSProperties> = {
   '.swiper-slide': { height: 'unset' },
 };
 
+const googleAnalyticsId = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS;
+
+const GoogleAnalytics = ({ id }: { id: string }) => (
+  <>
+    <Script strategy="lazyOnload" src={`https://www.googletagmanager.com/gtag/js?id=${id}`} />
+
+    <Script strategy="lazyOnload">
+      {`
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+gtag('config', '${id}', {
+  page_path: window.location.pathname,
+});
+`}
+    </Script>
+  </>
+);
+
 const userPrefersDark =
   typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const MyApp = ({ Component, pageProps }: AppProps) => {
   return (
     <>
+      {googleAnalyticsId && <GoogleAnalytics id={googleAnalyticsId} />}
       <Head>
         <title>CodersCamp - największy otwarty kurs programowania webowego w Polsce</title>
         <meta
