[BUG] Improve Google Analytics & GTM Initialization in Head
- Dominant language
- TypeScript
- Stars
- 716
- Forks
- 1.2k
- Avg merge
- 1d 12h
- Merged PRs (30d)
- 35
Description
### Describe the bug.
### Why do we need this improvement?
Currently, Google Analytics (ReactGA) and Google Tag Manager (GTM) are initialized during the render phase of HeadComponent. Since this component can re-render multiple times, this results in:
- Multiple initializations of GA and GTM
- Duplicate pageview events
- Inflated and inaccurate analytics data
- Side effects occurring during render, which goes against React and Next.js best practices
In addition, Next.js Strict Mode and re-renders during navigation can further amplify this issue.
### How could it be implemented / designed?
The fix can be implemented by restructuring the analytics logic as follows:
1. Move GA & GTM initialization into a useEffect
- Run once on mount using an empty dependency array
- Use a useRef guard to prevent double initialization
2.Track pageviews in a separate useEffect
- Trigger only when the route/path changes
- Avoid firing pageviews on every render
3. Keep hostname checks intact
- Ensure analytics only runs on asyncapi.com
### Expected behavior
- Prevent duplicate initialization of Google Analytics and GTM
- Ensure accurate pageview tracking, only firing when the route actually changes
- Align with React & Next.js best practices by moving side effects into useEffect
- Improve analytics data quality by avoiding over-counting
- Make the component safer and more predictable during re-renders
### Screenshots
NILL
### How to Reproduce
The fix can be implemented by restructuring the analytics logic as follows:
1. Move GA & GTM initialization into a useEffect
- Run once on mount using an empty dependency array
- Use a useRef guard to prevent double initialization
2.Track pageviews in a separate useEffect
- Trigger only when the route/path changes
- Avoid firing pageviews on every render
3. Keep hostname checks intact
- Ensure analytics only runs on asyncapi.com
### 🖥️ Device Information [optional]
_No response_
### 👀 Have you checked for similar open issues?
- [x] I checked and didn't find similar issue
### 🏢 Have you read the Contributing Guidelines?
- [x] I have read the [Contributing Guidelines](https://github.com/asyncapi/.github/blob/master/CONTRIBUTING.md)
### Are you willing to work on this issue ?
Yes I am willing to submit a PR!
Contributor guide
Research direction
Locate HeadComponent and inspect where Google Analytics and Google Tag Manager are initialized and where route changes are available. Separate initialization from pageview tracking while preserving the asyncapi.com hostname check. Done means initialization occurs once, pageviews fire only on route changes, and re-renders or Strict Mode do not duplicate analytics events.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- analytics, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 64/100