asyncapi / asyncapi/website

[BUG] Improve Google Analytics & GTM Initialization in Head

Open
#5,016 6 comments 0 reactions 0 assignees View on GitHub
bug stale
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.