Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
GA4 loads, but we're not seeing data flowing. There appears to be a problem with the way we're loading the script. While I was investigating a fix, I noticed there's a
@next/third-parties/google
module that we can just drop-in, it's documented here:https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries#google-analytics
I left the
useGa
hook largely alone, but I did drop a note in there that we could replace a lot of thewindow.gtag
setup with thesendGAEvent
included in the@next/third-parties/google
module. The one thing I had to do was move the check fordoNotTrack
to the hook, since the script is loaded in a server component now (inlayout.tsx
as recommended by the docs).With this in place, I now see data flowing in the network tab in browser devtools.