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)

Most upvoted comments

@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 on Jan 5, 2024

@housseindjirdeh @drykberg Ah yep that works for me. Thanks for the help!

taujeng on Jan 7, 2024

This is in the canary release for @next/third-parties

srhise on Dec 21, 2023

@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 or npm install @next/third-parties --legacy-peer-deps.

housseindjirdeh on Oct 30, 2023

@nickmccurdy Think this is stable in 14.1.0 for both Next and next third parties.

niels-bosman on Jan 19, 2024

Oops just saw your comment @nickmccurdy about leaving this open until it’s in stable. Sorry!

housseindjirdeh on Dec 26, 2023

@srhise I can confirm this is working as of 14.0.5-canary.7, thanks.

import { GoogleAnalytics } from "@next/third-parties/google";

export default function RootLayout({
	children,
}: {
	children: React.ReactNode;
}) {
	return (
		<html>
			<body>{children}</body>
			<GoogleAnalytics gaId="UA-*" />
		</html>
	);
}

I’ll leave this open until it’s in a stable release for tracking purposes.

nickmccurdy on Dec 22, 2023

@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 😃