diff --git a/package-lock.json b/package-lock.json index 02879799..a508104d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,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", @@ -7927,6 +7928,12 @@ } } }, + "node_modules/react-ga4": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz", + "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==", + "license": "MIT" + }, "node_modules/react-icons": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", diff --git a/package.json b/package.json index 0e6bd8b5..451a8d1e 100644 --- a/package.json +++ b/package.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", diff --git a/src/components/layout.js b/src/components/layout.js index 57c858c9..b3199f29 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -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 = (