Merge pull request #178 from Web-Dev-Path/feature/ga-4-integration

Integrate Google Analytics 4

Author: LuSilvaDeveloper

.env-template

@@ -7,3 +7,4 @@ NEXT_PUBLIC_MAILCHIMP_URL={Add the url link}
 NEXT_PUBLIC_RECAPTCHA_SITE_KEY={Add the key}
 RECAPTCHA_SECRET_KEY={Add the key}
 SENDGRID_API_KEY={Add the key}
+NEXT_PUBLIC_GA_MEASUREMENT_ID={Add the key}

.gitignore

@@ -4,6 +4,10 @@ node_modules
 .env
 .DS_Store
 yarn-error.log
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
 
 # PWA files
 **/public/sw.js

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

CHANGELOG.md

@@ -108,4 +108,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - 
 
 ### Fixed
-- Remove `babel-plugin-styled-components` to use nextjs built in compiler
+- Remove `babel-plugin-styled-components` to use nextjs built in compiler
+
+### Added
+
+- Added Google Analytics 4 Integration

README.md

@@ -28,6 +28,7 @@ This is how to get started locally:
 
 - [Git clone this repository](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository)
 - Ask on Slack for the `.env` file credentials with MailChimp and reCaptcha keys and add it to your local copy.
+- Keep the `.env-template` file and create a `.env` file with the credentials
 - Run `yarn install`
 - Run `yarn run dev` (for Windows)
 - Run `yarn run dev-mac` (for macOS)

package.json

@@ -22,6 +22,7 @@
     "@sendgrid/mail": "^7.7.0",
     "html-entities": "^2.3.2",
     "next": "^13.1.6",
+    "next-ga": "^2.3.4",
     "next-pwa": "^5.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -36,7 +37,8 @@
     "husky": "^8.0.0",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
-    "prettylint": "^1.0.0"
+    "prettylint": "^1.0.0",
+    "webpack": "^5.88.1"
   },
   "resolutions": {
     "styled-components": "^5"

pages/_app.js

@@ -1,5 +1,9 @@
 import Layout from '@/components/layout/Layout';
 import '@/styles/globals.scss';
+import withGA from 'next-ga';
+import Router from 'next/router';
+
+const GA_KEY = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;
 
 function MyApp({ Component, pageProps }) {
   return (
@@ -21,4 +25,4 @@ function MyApp({ Component, pageProps }) {
 //   return { ...appProps }
 // }
 
-export default MyApp;
+export default withGA(GA_KEY, Router)(MyApp);