window.gtag is not defined for Next.js-hydration event

[Littletonconnor]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: linux
      Arch: x64
      Version: Ubuntu 20.04.0 LTS Fri Sep 09 2022 11:36:36 GMT-0700 (Pacific Daylight Time)
    Binaries:
      Node: 16.14.2
      npm: 7.17.0
      Yarn: 1.22.10
      pnpm: 7.9.5
    Relevant packages:
      next: 12.3.1-canary.0
      eslint-config-next: N/A
      react: 17.0.1
      react-dom: 17.0.1

Which example does this report relate to?

with-google-analytics

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

calling reportWebVitals when having google analytics setup using with-google-analytics results in Next.js-hydration event getting triggered BEFORE gtag is initialized.

This could be problematic in production if someone is just assuming gtag is always defined when reporting on web vitals.

Expected Behavior

When having google analytics setup using the with-google-analytics example, I would expect gtag to be defined for all events before triggering reportWebVitals.

To Reproduce

Here is a link to reproduce: https://stackblitz.com/edit/nextjs-rnaue8?file=pages%2F_app.js,.env.local.example,lib%2Fgtag.js,pages%2Findex.js

[grayaustinc]

Typically you would want to add a Data Layer.
With this, any commands will be processed after gtag is loaded.

[dave-hay]

Hey @Littletonconnor I can work on this one.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.