How to Add Google Tag Manager in NextJs 14

In this video, we'll use the new `@next/third-parties` package to add Google Tag manager, Google Analytics, and embed KZbin video in our NextJs 14 app.
👉🏼 The Ultimate NextJs 14 Course
→ www.hamedbahra...
👉🏼 Project source code
→ github.com/Ham...
👉🏼 Work with me
→ www.hamedbahra...

[@trusht]

I'm learning about the latest Next.js features firsthand through your videos, which has been immensely helpful. Your dedication to sharing this knowledge is greatly appreciated.

[@hamedbahram]

My pleasure! It's great to hear that.

[@uncoolcoder]

Hamed.. just want to check, can you read my mind 😀... your video releases match with what I am thinking off . :)

[@hamedbahram]

Haha 😅 I am...

[@uncoolcoder]

@@hamedbahram Thank you for your contents...

[@hamedbahram]

@@uncoolcoder My pleasure!

[@Foused87]

Please make a tutorial on how to set up a project with i18n + next-auth (jwt) and SEO (for example opengraph). Recently I did this kind of project for my client based on your tutorials and it was tricky to combine all these things together.

[@hamedbahram]

Have you watched this video? → kzbin.info/www/bejne/mHfVY6dsbaZ0eLM

[@Foused87]

@@hamedbahram yeah it's reeeealy helpful

[@Foused87]

@@hamedbahram however there are still some tricky parts when you want to combine it all together

[@Foused87]

I think you would get a lot of views on the all-in-one tutorial

[@Foused87]

Please make a tutorial on how to generate pdfs in next 14 js on server-side. It's really tricky.

[@hamedbahram]

🤔 Interesting. Thanks for the suggestions, I'll work on it.

[@ricardovannoort]

Nice new feature in NextJS. Did you experiment with the data layer in order to deny storage and grant it when cookies are accepted? NextJS refers to Google for this and Google has documented it poorly.

[@hamedbahram]

Good question! I've yet to look into cookie consent implementation using the GTM.

[@avivshvitzky2459]

This video is kinda misleading. You didn't show how to actually add GA14, you just showed a custom event you made for a click, and only said in general that you can somehow connect your tag manager to GA14, but didnt show how to do it

[@hamedbahram]

Sorry you think that way! However, connecting GA4 to Google tag manager is not a NextJs specific implementation, and I'm sure there are a ton of videos out there that'll show you how to do that better than I would. The point of this video is to learn about the `@next/third-parties` package that makes it easy to install GTM or GA4 in NextJs.

[@arturogonzalez7744]

Thanks Hamed for your excellent content, it's really helpful

[@hamedbahram]

My pleasure. Glad to hear that!

[@codenameunknown3791]

Excelent content Hamed. Keep it up!

[@hamedbahram]

Appreciated!

[@en_kratia]

Very useful video, thank you. For some reason GoogleTagManager placed in Layout is breaking HMR for some (random?) pages/components. I spend several hours to find out this. When it placed in Page - no problem. Thank you one more time, Excellent video.

[@hamedbahram]

My pleasure! haven't had that problem, not sure why that is.

[@starlord7526]

please we need a video relating to Supabase, creating multiple tables, establishing relation between them and all

[@hamedbahram]

For sure! I'll have that in mind for future videos.

[@jijojosein]

@@hamedbahram yes, this please.

[@kris.pbg.]

Hey Hamed, love the content! I'm curious about if this falls into the category of blocked cookies for future Chrome versions?

[@hamedbahram]

Please expand on that... what do you mean by blocked cookies?

[@kris.pbg.]

"If your site uses third-party cookies, it's time to take action. To facilitate testing, Chrome has restricted third-party cookies by default for 1% of users. Subject to addressing any remaining competition concerns of the UK's Competition and Markets Authority, Chrome will ramp up third-party cookie restrictions to 100% of users from Q3 2024." That's from developers.google@@hamedbahram

[@kris.pbg.]

@@hamedbahram "If your site uses third-party cookies, it's time to take action. To facilitate testing, Chrome has restricted third-party cookies by default for 1% of users. Subject to addressing any remaining competition concerns of the UK's Competition and Markets Authority, Chrome will ramp up third-party cookie restrictions to 100% of users from Q3 2024." That's an extract from Google's developers page in the cookie countdown section.

[@hamedbahram]

@@kris.pbg. I see 🤔thanks for sharing this.

[@ladyeli555]

This is extremely helpful! Thank you!

[@hamedbahram]

Glad it was helpful!

[@babayaga6172]

Great Work ❤ Can U please make a video how to secure apis in nextjs like prevent from scrapping And also what about to handle light and dark mode without flicker

[@hamedbahram]

Thanks! You can protect your APIs with authentication → look at my auth videos I've covered light/dark theme in previous videos here → kzbin.info/www/bejne/iIWke2Cbo8uoo9U

[@user-lt6ej6tq6v]

Excelente video! Estaba teniendo problemas para configurar google tag manager y con tu tutorial lo logre! muchas gracias

[@hamedbahram]

De nada. Me alegra que haya ayudado!

[@deceiverrr_]

It tells me Google Tag not found no matter what I do at deployed version as well as local version, ay help?

[@hamedbahram]

I'm not sure why that is.

[@alishayegh7047]

great as always, keep going bro💪💪💪

[@hamedbahram]

Thank you 🙌

[@dreamsachiever212]

always great as usual! thanks

[@hamedbahram]

Thank you! I appreciate that.

[@KhalidKhan-wo7xg]

Informative video 👍

[@hamedbahram]

Thanks 🙂

[@mdshafiulislam1813]

helpful :). Can you give me any suggestion. when i want to set multiple page track as page it not work properly. Thanks

[@hamedbahram]

You have to enable the "Enhanced Measurement" for client-side navigation, read more here → nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries#tracking-pageviews

[@dotpxg]

Thanks for sharing. Have you found any solutions for the Content Security Policy error caused by the inline GTM? Please please help.

[@hamedbahram]

Not really! What do you mean by inline GTM?

[@dotpxg]

The Content Security Policy (CSP) error occurs due to using inline Google Tag Manager (GTM). I was asking if you could help with any solutions. I have been using middleware for CSP as per next.js14 docs. GTM is being included directly within the body of the HTML, which is causing it to be treated as an inline script and triggering the CSP error. Please help, if you could

[@hamedbahram]

@@dotpxg I see 🤔I haven't encountered this before and I'm not sure how to solve this.

[@marieltorres2873]

Hi Hamed, thanks for your video, I have a question. Once I add the GTM tag and I also want to add Analytics, do I need to add the other tag below as well, or is GTM enough?

[@hamedbahram]

Once you add the GTM you can add all other tags to your GTM. It works as a container for all your tags like analytics, meta pixel, etc. You have to do it through tagmanager.google.com

[@marieltorres2873]

@@hamedbahram Thanks for the quick response, Hamed! So, I understand that the marketing team is already handling that part, haha 😅. Thanks!

[@hamedbahram]

@@marieltorres2873 Pleasure, Mariel!

[@hulashmahto99]

I am finding this tutorial and find this video ❤❤❤

[@hamedbahram]

Hope you like it!

[@hollycow8171]

5:58 can we convert that button client component as saperate. also can you show us how to push Data layer method.

[@hamedbahram]

what do you mean by separating the button client component?

[@you3667]

Thanks always!

[@hamedbahram]

My pleasure!

[@sabarish4201]

i want monitor my pages activated or not in my product for example /product page how many times rendered any suggestions???

[@hamedbahram]

Yes watch this video → kzbin.info/www/bejne/gIG7Z2OnltecoJY

[@thedanmwangi]

Hello, great video! Does the GoogleTagManager from Next.js work with Tag Containers provisioned server side?

[@hamedbahram]

I don't think so, but its worth trying. Let me know if you found the answer to this.

[@alfonsomartinangeles6176]

Does this component handle the condition to run only in production? or should I put a condition manually to run on prod only? Thank you!

[@hamedbahram]

You have to do that manually by excluding the traffic from your dev domains or local host in your Google analytics.

[@alimodz6253]

Hi thanks for the video, I have a question because I am a bit confused in the next js docs. Is the "sendGTMEvent" method the same as "sendGAEvent"? I was already tracking page views before using the script tags in next js, now I am trying to add GA4 events. So do I use the sendGTMEvent to send GA4 events or do I only import sendGAEvent for that?

[@hamedbahram]

It depends which one you were using before, if you were using GTM before, you can use GTM events, if you were using GA4 before directly, use the GA4 events. Tag manager is just a central container to hold all different sorts of tags, like the GA4, Meta pixel, etc.

[@roshannayak5982]

I am first , Love yr content Sir , also love yr prismic (app router ) video 😎

[@hamedbahram]

Great 👍 I appreciate that.

[@geraAlcantara]

When will be a video for an cookies consent banner ?

[@hamedbahram]

I came across this tool which you can use for managing user consent → www.cookiebot.com/

[@geraAlcantara]

​@@hamedbahram Thank you, I saw that one before, however I think that solution will impact the LCP, I was hoping to see your approach to use a cookies consent banner along with next/third-parties/google and GoogleAnalytics or GoogleTagManager Components, and see how it was set for conditionally use it on the root layout base on the consent

[@hebe_lia]

I am having issues connecting GTM with google analytics :(

[@hamedbahram]

It should be straight forward. What's the problem?

[@YongkiAgustin]

thanks, its work

[@hamedbahram]

Welcome 👍

[@julianmedina9370]

should gtmId be defined as an env variable?

[@hamedbahram]

Yes it could.

[@douwepausma]

For security reasons it's not necessary as it will be rendered in the DOM anyways. But if you're deploying with something like Vercel I can definitely recommend it, because you can change it easily later on without having to make code changes.

[@mehdijafarzade2381]

💯💯💯💯

[@hamedbahram]

🫡