We need to integrate Google Analytics 4 (GA4) with our Next.js application to track and analyze user interactions within our web app. Currently, we lack an efficient way to monitor user activity and get useful insights about user behavior on our platform.
Technical details
The integration may require the use of a library, such as next-ga (https://snyk.io/advisor/npm-package/next-ga), a lightweight and straightforward Google Analytics wrapper for Next.js. We will also be storing the Google Analytics Measurement ID in an environment variable to avoid hardcoding this sensitive information into our application.
Approach suggestions
In your local repository copy, run git pull from main and create a new branch feature/ga-4-integration to get started
After getting the GA4 Measurement ID with @mariana-caldas , store it in our .env file with the variable name
NEXT_PUBLIC_GA_MEASUREMENT_ID
Install the next-ga package. Remember we use yarn as our package manager, so it would be yarn add next-ga
Use the withGA function in the _app.js file to initialize GA on page load and track page views.
Deadline
Please keep in mind that once you assign this task to yourself, you'll need to complete it in 10 days.
Acceptance criteria
Test the section and components in many screen sizes, you can use the Inspect tool for that.
Please test if the new changes added to the components do not affect the other instances.
Test the feature in many browsers, such as Chrome, Firefox, Edge, and Safari (MAC).
If there are any build problems when submitting your PR, run yarn build locally to solve the issues and commit the changes.
What do we need to build or fix?
We need to integrate Google Analytics 4 (GA4) with our Next.js application to track and analyze user interactions within our web app. Currently, we lack an efficient way to monitor user activity and get useful insights about user behavior on our platform.
Technical details
The integration may require the use of a library, such as
next-ga(https://snyk.io/advisor/npm-package/next-ga), a lightweight and straightforward Google Analytics wrapper for Next.js. We will also be storing the Google Analytics Measurement ID in an environment variable to avoid hardcoding this sensitive information into our application.Approach suggestions
git pullfrommainand create a new branchfeature/ga-4-integrationto get started.envfile with the variable nameNEXT_PUBLIC_GA_MEASUREMENT_IDnext-gapackage. Remember we useyarnas our package manager, so it would beyarn add next-gawithGAfunction in the_app.jsfile to initialize GA on page load and track page views.Deadline
Please keep in mind that once you assign this task to yourself, you'll need to complete it in 10 days.
Acceptance criteria
yarn buildlocally to solve the issues and commit the changes.