diff --git a/package-lock.json b/package-lock.json index 90ed3ea1..9cab7c7c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "react": "^16.14.0", "react-dom": "^16.14.0", "react-ga": "^2.7.0", + "react-ga4": "^2.1.0", "react-icons": "^3.11.0", "react-markdown": "^4.3.1", "react-minimal-pie-chart": "^8.4.0", @@ -18115,6 +18116,11 @@ "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-2.7.0.tgz", "integrity": "sha512-AjC7UOZMvygrWTc2hKxTDvlMXEtbmA0IgJjmkhgmQQ3RkXrWR11xEagLGFGaNyaPnmg24oaIiaNPnEoftUhfXA==" }, + "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==" + }, "node_modules/react-icons": { "version": "3.11.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.11.0.tgz", @@ -37958,6 +37964,11 @@ "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-2.7.0.tgz", "integrity": "sha512-AjC7UOZMvygrWTc2hKxTDvlMXEtbmA0IgJjmkhgmQQ3RkXrWR11xEagLGFGaNyaPnmg24oaIiaNPnEoftUhfXA==" }, + "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==" + }, "react-icons": { "version": "3.11.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.11.0.tgz", diff --git a/package.json b/package.json index 04111e6f..0f3e6a60 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "prop-types": "^15.8.1", "react": "^16.14.0", "react-dom": "^16.14.0", - "react-ga": "^2.7.0", + "react-ga4": "^2.1.0", "react-icons": "^3.11.0", "react-markdown": "^4.3.1", "react-minimal-pie-chart": "^8.4.0", diff --git a/src/components/App.js b/src/components/App.js index 9597ade1..9367c785 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -5,12 +5,11 @@ import './styles.scss'; import Navigation from './Navigation'; import Tabs from './Tabs'; -import { initGA, PageView } from './Shared/Tracking'; +import { initGA } from './Shared/Tracking'; class App extends React.Component { componentDidMount() { - initGA('G-GKMJ4KP806', { debug: false }); - PageView(); + initGA('G-J7FBQPGZTW'); } render() { diff --git a/src/components/Shared/Tracking/index.js b/src/components/Shared/Tracking/index.js index 9d0f0f13..b0d77726 100644 --- a/src/components/Shared/Tracking/index.js +++ b/src/components/Shared/Tracking/index.js @@ -1,19 +1,20 @@ -import ReactGA from 'react-ga'; +import ReactGA from 'react-ga4'; const initGA = (trackingID, options) => { - ReactGA.initialize(trackingID, { ...options }); -}; - -const PageView = () => { - ReactGA.pageview(window.location.pathname + window.location.search); + ReactGA.initialize([ + { + trackingId: trackingID, + gaOptions: { ...options }, + }, + ]); }; const Event = (category, action, label) => { ReactGA.event({ - category, - action, - label, + category: category, + action: action, + label: label, }); }; -export { initGA, PageView, Event }; +export { initGA, Event };