Recently I finished a brand new Next.js 13 website using the latest App Router solution (I know that is not production ready but I love to learn ne...
For further actions, you may consider blocking this person and/or reporting abuse
I continue to get an error at window.dataLayer.push (cannot read properties of undefined). For some reason, with this setup, dataLayer is not a property of window by the time the useEffect runs. You run into this problem?
ah! only getting the error in development because of
process.env.NEXT_PUBLIC_VERCEL_ENV !== 'production'not set so returnsnull, but useEffect still runs and tries to firepageview(pathname)any way, besides checking for window.dataLayer in lib/gtm, to get around that?
you can remove the checking on Analytics component and add the checking on pageView() method instead. so it not break the rule of hook.
export const GTM_ID = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID;
export const pageview = (url: string) => {
if (process.env.NEXT_PUBLIC_VERCEL_ENV !== "production") {
return;
}
// @ts-ignore
window.dataLayer.push({
event: "pageview",
page: url,
});
};
Hi, returning
nullis full legit because you don't break theuseEffecthook. I prefer to don't add the GTM script during the development and thanks to your suggestion I added mygtmlib version that check thedataLayervariable that is missing in the original version. Thanks 👍🏻That's great 👍
Thanks for your interest; I added the
gtmlib too on the post because in the original version is missing a check to thedataLayervariable, needed during the development 🙏🏻you are such a life saver man, thank you.
I appreciate it
FTR, using this lib/gtm.js meant I received an error in VS Code /
analytics.tsx:"lib/gtm"' has no exported member named 'gtmId'. Did you mean 'GTM_ID'?; replacinggtmIdwithGTM_IDresolved that error inanalytics.tsxand GTM now loads nicely. Cheers.Hi, thanks I updated the post using the original
GTM_IDvariable.Thanks for the article. Very clear and well-written.
You've referenced
lib/gtminAnalytics.tsx. How do you deal withpageviewin that file? Would be great to get some insight into that part of your solution.Cheers!
Hi, thank you!
You can find it on the current with-google-tag-manager example 😉
I just added it to the post too; it's in TypeScript and with a missing check for the
dataLayarvariable.This was super helpful! Just want to add some help for the next explorer. The offical GTM JS location has changed. So in Analytics.tsx you'll want to update to:
https://www.googletagmanager.com/gtag/js?I'm getting
VM22299:2 Uncaught TypeError: Cannot read properties of null (reading 'parentNode')error with this approach, have any of you encountered that?Hi, I added my version of
gtmlib file; try to use it instead of the original one because I added a missing check for thedataLayervariable. Let me know if it helps you!Thanks but I'm not even using this file, the error I get is throw during script initialisation. The issue is probably there -
f.parentNode.insertBefore(j,f), it seems like thefvariable isnull(var f=d.getElementsByTagName(s)[0]- looks like it's a firstscripttag). Interestingly, the GTM works even with that error. Maybe it's being called more than once and the error occurs only for the first time?I think there is a problem here when you wrap the Analytics component inside Suspense, the noscript tag will never be executed because when javascript is disabled, the Analytic component also does not execute
Thanks so much for the article!
Wrapping
<Analytics />with the<Suspense />boundary got SSR working for my site.By any chance, do you know what the reason for this is?
Really awesome Marcelo! Thanks for sharing this!
What is this pageview function?
Hi, it's the function exported by the original lib/gtm.js to set a view with GTM.
I added the code for this library too using TypeScript and adding some check more then in the original one.
This does not work and is not picked up with GTM Tag assistant as the code needs to be in the head of the site, has anyone found a solution yet?
Hi, I don't know why this isn't working for you but the GTM Tag is placed correctly on the head of the page and also the Tag Assistant recognize it; this is because using the Script tag by Next.js put the script in the right place.
Hi, I have the same problem. After debugging I found out that it has to do with "use client". Without "use client" google tag manager has no problem finding the tag, unfortunately this is not the case when "use client" is added to make the useEffect work. Does anyone have a solution for this?
This is working very well so far. Thank you!
But why isn't there a package in NextJS/Vercel?
Having a problem where the pageview method is fired twice on each reload of the page. Anyone else experiencing the same? Might be something with my setup though 🤔
Ah.. Seems like that was caused by React Strict mode on localhost. This suggestion fixed the issue locally:
Thanks for a great post!
We've just published a package that does exactly that with a few lines of code, check it out here: github.com/XD2Sketch/next-google-t...
Hi @kgoedecke - i'm having issues on my next.js project...getting the following error message:
ReferenceError: $ is not defined
Followed by Uncaught TypeError: Cannot read properties of undefined (reading 'childNodes')
Any ideas on how to resolve this when using your library?