feat(website): add Google Analytics

KonradSzwarc · KonradSzwarc · commit 06875e9a21de · 2021-10-14T21:49:07.000+02:00
diff --git a/packages/website/src/pages/_app.tsx b/packages/website/src/pages/_app.tsx
@@ -3,26 +3,48 @@ 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';
 
 import { Footer } from '@/components/Footer';
 import { Navbar } from '@/components/Navbar';
 import { RecruitmentModalProvider } from '@/components/RecruitmentModal';
+import { IS_PRODUCTION } from '@/constants';
 
 const globalStyles: Record<string, CSSProperties> = {
   'html, body': { backgroundColor: 'white' },
   '.swiper-wrapper': { alignItems: 'stretch' },
   '.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
