Merge pull request #140 from OceanParcels/analytics

Add Google Analytics for page views

Author: VeckoTheGecko

package-lock.json

@@ -40,6 +40,7 @@
     "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
     "react-dom": "^18.3.1",
+    "react-ga4": "^2.1.0",
     "react-icons": "^5.3.0",
     "react-syntax-highlighter": "^15.5.0",
     "rehype-slug": "^6.0.0",

package.json

@@ -4,6 +4,11 @@ import { Header } from '@/components/header'
 import { Link } from '@/components/mdx'
 import { Box, Flex } from '@chakra-ui/react'
 import Head from 'next/head'
+import ReactGA from 'react-ga4'
+import { useEffect } from 'react'
+
+// Google Analytics
+ReactGA.initialize('G-62W42QPRQC')
 
 export const Layout = ({
   title,
@@ -13,6 +18,11 @@ export const Layout = ({
   url = 'https://oceanparcels.org',
   enableBanner = false,
 }) => {
+  // Track page views
+  useEffect(() => {
+    ReactGA.send({ hitType: 'pageview' })
+  }, [])
+
   const bannerTitle = 'Parcels v4 currently in development'
   const bannerDescription = ''
   const bannerChildren = (