feat: add ga

Author: izayl

.env.local.example

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
-NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
+NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
+NEXT_PUBLIC_GA_ID=

common/ga.ts

@@ -0,0 +1,18 @@
+// @ts-nocheck
+export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = url => {
+  window.gtag('config', GA_TRACKING_ID, {
+    page_path: url,
+  })
+}
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = ({ action, category, label, value }) => {
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  })
+}

pages/_app.tsx

@@ -1,6 +1,8 @@
 import { CssBaseline, GeistProvider } from '@geist-ui/react'
 import { AppProps } from 'next/app'
+import Script from 'next/script'
 import Head from 'next/head'
+import * as gtag from '../common/ga'
 import { LocaleProvider, useLocale } from '../common/hooks/useLocale'
 
 const App: React.FC<AppProps> = ({ Component, pageProps }) => {
@@ -15,20 +17,33 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
             name="viewport"
             content="width=device-width, initial-scale=1, user-scalable=no"
           />
-          <meta
-            name="description"
-            content={t('AppDesc')}
-          />
+          <meta name="description" content={t('AppDesc')} />
           <meta
             name="keywords"
             content="ETH,EVM,EVM Compatible Network,Network,Blockchain,chain"
           />
           <meta property="og:title" content="EVM Box" />
-          <meta
-            property="og:description"
-            content={t('AppDesc')}
-          />
+          <meta property="og:description" content={t('AppDesc')} />
         </Head>
+        {/* Global Site Tag (gtag.js) - Google Analytics */}
+        <Script
+          strategy="afterInteractive"
+          src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
+        />
+        <Script
+          id="gtag-init"
+          strategy="afterInteractive"
+          dangerouslySetInnerHTML={{
+            __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${gtag.GA_TRACKING_ID}', {
+              page_path: window.location.pathname,
+            });
+          `,
+          }}
+        />
         <Component {...pageProps} />
       </GeistProvider>
     </LocaleProvider>