feat: integrate google analytics and remove getInitialProps in _app.tsx

package.json

@@ -21,6 +21,7 @@
     "@rjsf/core": "^2.4.1",
     "@stripe/react-stripe-js": "^1.2.2",
     "@stripe/stripe-js": "^1.11.0",
+    "@types/react-ga": "^2.3.0",
     "apollo-boost": "^0.4.9",
     "apollo-link-ws": "^1.0.20",
     "formik": "^2.2.6",

pages/_app.tsx

@@ -12,8 +12,9 @@ import { createApolloClient } from "../lib";
 // add global css
 import "../styles/globals.css";
 import { useRouter } from "next/router";
+import { initializeGA, logPageView } from "../utils/analytics";
 
-ReactGA.initialize("G-7R11G6KBCH");
+initializeGA("G-7R11G6KBCH");
 
 const theme = extendTheme(nossas);
 
@@ -22,7 +23,7 @@ function App({ Component, pageProps }) {
   const router = useRouter();
 
   useEffect(() => {
-    ReactGA.pageview(router.pathname);
+    logPageView(router.pathname);
   }, [router.pathname]);
 
   return (
@@ -34,8 +35,4 @@ function App({ Component, pageProps }) {
   );
 }
 
-App.getInitialProps = async (appContext) => ({
-  ...(await NextApp.getInitialProps(appContext)),
-});
-
 export default appWithTranslation(App);

utils/analytics.ts

@@ -0,0 +1,10 @@
+import ReactGA from "react-ga";
+
+export const initializeGA = (trackingID: string) => {
+  ReactGA.initialize(trackingID);
+};
+
+export const logPageView = (pathname: string) => {
+  ReactGA.set({ page: pathname });
+  ReactGA.pageview(pathname);
+};