Last week we released a brand new website (https://uwork.no) for our amazing client (uWork AS) and had to get Google Tag Manager (GTM) up and runni...
For further actions, you may consider blocking this person and/or reporting abuse
Is there some significance to the name of the
page
parameter you're including in the event object? I don't see that parameter documented anywhere and you don't specifically reference it when creating your trigger.I tested without including the
page
parameter and it works the same. It seems likepage
isn't necessary.Well the property it self is not required but I think its important to include it. The reason for it is to know what pages the user visits. Without it you are just (unless GTM can figure out this automatically) you only get the counts.
More info regarding the page you can find here:
developers.google.com/analytics/de...
Oh, nice find. I couldn't find documentation on that parameter; I assumed it wasn't an actual GTM param. Yeah, if you leave it empty GTM figures it out. I was thinking that might be a better option, since it reduces the chance that you set it incorrectly.
Hi. Great tip!
But I see a problem on my end using this method. The GTM script renders multiple times (for each Page Change). Does not matter if I use the Custom Event trigger or the History Change trigger.
Anybody else seeing this?
Sorry for late reply, no, haven't encounter this issue. Check if the component is rerendering and therefor firing multiple GTM page view events!
Every time I have delved into this issue, it turned out that pageProps fires after the router events, so this implementation (even though its recommended by Next.js examples) only does one job: tracking a page view.
If you want to start pushing data into the dataLayer via pageProps it is limited.
I wrote about this here: morganfeeney.com/how-to/integrate-..., you're welcome.
Awesome article, very helpful to learn how to properly setup GTM with nextjs.
My only recommendation would be to setup the new Google Analytics G4 instead of Google Analytics Universal, support.google.com/analytics/answe...
I have to take a closer look at it! But quite satisfied with the GA Universal. I use custom events to handle all cases! I even implemented virtuell page view (handling submit forms on react/next.js)
I did this awhile back and forgot to make the event "non-interactive" and our bounce rate dropped a TON.
Oops 😅
our service, too 😢
Oopsi indeed!
Hi I have done everything in this post but there is a problem.
When a user logs-in on my website it gets redirected to another page (using router.replace()). The problem is that the pageview event is triggering two times when a user logs-in and thus registering two pageviews instead of one.
I attach a photo of my google tag manager
Hope anybody can help me as I do not want to have "fake" pageviews on my analytics
Havent had this scenario, so not sure what you can do here! If you have found a solution please do share it with us.
All the best.
How should the
_document
component look like as aFunctionComponent
?Also is there any difference in injecting the tags in
_document
orNextHead
?I've tried this and it seems to work in
next/head
. I have a Layout component which has aHead
, and this is used in every page. Placing thescript
in there should also work.But I guess placing it in
_document
is best since this ensures the script is always on all pages.Yeah I did the same but forgot to add the general
Page
component to every page so I was missing the script in some of my pages.I have been having this same issue for a while now, thanks a lot for this
You are welcome!
Hi Flamur, thanks for your blog. I'm currently building a next.js application and would like to load GTM only AFTER the entire page is loaded. The goal behind this is to improve the website performance. Have you figured out a way how I can run third-party JS code only after my application has loaded?
Thanks for this!!!!!
You are welcome :)
Thank you so much, man. You've saved my time.
Is it still necessary to do this whole process? I read in some article that GA4 is smarter and doesn't need all this configuration in SPA