next.js: Google Analytics missing from `@next/third-parties`
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 21.6.0: Fri Sep 15 16:17:23 PDT 2023; root:xnu-8020.240.18.703.5~1/RELEASE_X86_64
Binaries:
Node: 21.1.0
npm: 10.2.1
Yarn: 1.22.19
pnpm: 8.9.2
Relevant Packages:
next: 14.0.0
eslint-config-next: 14.0.0
react: 18.2.0
react-dom: 18.2.0
typescript: 5.1.3
Next.js Config:
output: N/A
Which example does this report relate to?
https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries
What browser are you using? (if relevant)
Chrome 118.0.5993.117
How are you deploying your application? (if relevant)
No response
Describe the Bug
The GoogleAnalytics
component originally proposed in #51194 is missing, and the GoogleTagManager
component that replaced it cannot be used with Google Analytics because it depends on the Google tag library (not to be confused with the Google Tag Manager library).
After skimming #48256, it seems like the maintainers and contributors intended for the new @next/third-parties
package to include an integration for each of the three Google services in third-party-capital
. However, its implementation of Google Analytics was never used, and instead an unrelated GoogleTagManager
component was implemented from scratch.
Expected Behavior
There is a GoogleAnalytics
component using Google tag with either third-party-capital
or next/script
.
To Reproduce
With missing GoogleAnalytics
component
import { GoogleAnalytics } from '@next/third-party'
- Attempt to use
<GoogleAnalytics />
.
With existing GoogleTagManager
component
- Create a Google Analytics account.
- Create a Google Analytics 4 or Google Analytics 360 (Google Analytics 4 or Universal Analytics) property.
- Copy your Measurement (Google Analytics 4) or Tracking (Universal Analytics) ID.
import { GoogleTagManager } from '@next/third-party'
- Attempt to use with your pasted Measurement or Tracking ID.
- Run
next dev
. - Install Google Chrome and Tag Assistant Companion.
- Open Tag Assistant.
- Add the domain of your local Next server (should be http://localhost:3000).
- Observe that tags are missing in Tag Assistant and optionally that events are missing in Google Analytics debug view.
About this issue
- Original URL
- State: closed
- Created 8 months ago
- Reactions: 13
- Comments: 25 (5 by maintainers)
@drykberg is right, please try updating
@next/third-parties
to latest canary (I should have clarified, my bad!). Older versions of the package itself are missing the Google Analytics export@housseindjirdeh @drykberg Ah yep that works for me. Thanks for the help!
This is in the canary release for
@next/third-parties
@m-farah @next/third-parties can be used in both Next 13 and 14! There’s a peerDep issue that has been resolved since: #57515. For the meantime, you can either install the upgrade to the latest
next
canary ornpm install @next/third-parties --legacy-peer-deps
.@nickmccurdy Think this is stable in 14.1.0 for both Next and next third parties.
Oops just saw your comment @nickmccurdy about leaving this open until it’s in stable. Sorry!
@srhise I can confirm this is working as of
14.0.5-canary.7
, thanks.I’ll leave this open until it’s in a stable release for tracking purposes.
@nickmccurdy You’re totally right. We decided to first launch GTM and we’re currently working on a separate
<GoogleAnalytics>
component. We’ll link the PR with this issue once its up 😃