with-google-analytics double tracks page views

[cly]

Bug report

Describe the bug

with-google-analytics example double counts page_views. The code

const router = useRouter()
  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag.pageview(url)
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

is not necessary.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to with-google-analytics example and run it.
2. Enable Chrome Extension: GA Debugger
3. Look at Google Analytics events.
4. See
   

Expected behavior

Page views are tracked once.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: [e.g. macOS, Windows]
• Browser (if applies) [e.g. chrome, safari]
• Version of Next.js: [e.g. 10.0.1]
• Version of Node.js: [e.g. 12.0.0]
• Deployment: [e.g. next start, next export, Vercel, other platform]

Additional context

Add any other context about the problem here.

[valse]

Hi, take a look to the example using react-ga .

The Chrome extension add a query string that is the cause of the issue: check for it on the App component mount.

[frankjwu]

I'm having this same issue -- @cly did you find a solution for this?

@valse I'm having the issue occur even without the query string.

[cly]

I just removed unnecessary useEffect.

[frankjwu]

Ah yep, that worked -- thanks @cly

[justincohan]

Some extra info for anyone running into this issue. It looks like with the newer GA- tracking ids the useEffect router handling isn't needed. But for the older UA- tracking id's it is.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.