How to Add Google Tag Manager in NextJs 14

in this video we're going to learn about the next third parties package and use it to add Google analytics or Google tag manager to our next js14 app so let's Dive Right In so inside the nextjs documentation if you search for third party libraries you're going to come to this page and uh which introduces this next third party Library which is an internal Library developed by the nextjs team and third parties like Google that provides a collection of component and utilities to improve performance and developer experience loading popular thirdparty libraries in your nextjs app now you can go ahead and install it using the next third parties at latest uh you have to also update your next version to the latest version so this is a still experimental and it is recommended that you use the latest versions of nextjs and also this next third party package for it to work properly now as of right now the only third party packages or libraries that's supported is just Google related third parties things like Google tag manager Google analytics YouTube embit and Google Maps but I believe in future they're going to add more thirdparty packages that would require similar pattern of you loading a script and that you can benefit from performance optimization or the better developer experience that you would have using this third party now if you're going to use the Google tag manager in this instance to be able to track page views for example or send events to Google analytics so we're going to create a container in Google tag manager if you're not familiar with gole Google tag manager it's just basically a tool for you to manage all sorts of different tags it can be Google analytics it can be Facebook pixel but it's just one Central container that you just deploy to your app using this Google tag manager component that you would just need to pass in your tag manager ID or your container ID we're going to look at this in a second together and then inside of this container you can have your Google analytics you can have your Facebook or any other tag for that matter so let's go ahead and install this uh inside of our app so I started from a brand new nextjs app by using the next starter template we created a couple of videos ago if you haven't seen that video I walked through my nextjs setup I'm going to include a uh Link in the cart and in the description you can basically use that template to create a new repository and then clone your own repository to start from a similar starting point that uses tnd typescript and some pretty plugins to just sort your tnd classes now to use Google tag manager or this specific component from the next third party package all we need to do is to import the Google tag manager component from next third parties for/ gooogle and include it inside of our root layout if we want this to run on all of pages and if you want this to only run or track a specific page you can just include it in that specific page so let's go to our root layout here and here I'm going to just grab that and I'm going to import this Google tag manager component from the third party Google let me just close this off so all I had done is to bring in this Google tag manager and I've included my my Google tag manager container ID I'm going to go to the Google Google tag manager site in a second to show what we're doing there but I'm just importing this from Google up top and then including this which is going to by default just uh import or load the necessary scripts into our application so we can start sending events and tracking page views inside of our Google tag manager now if you're not familiar with what Google tag manager is basically a tool that allows you to manage all sorts of different tags it doesn't necessarily need to be Google Tags it can be Facebook pixels LinkedIn tags or your Google analytics tags but it's just a container that you install on your site first and then you would just deploy all the tags to your Google tag manager and because the script is already loaded on your page you don't need to uh separately install any of those scripts for example if you now want to add let's say Google analytics to your next JS app uh you don't have to install any further scripts here you just need to connect your Google tag manager to your Google analytics so it starts sending or tracking those events or sending those events to your Google analytics okay so um you can also use this um to send events we're going to also do this in a second so I can use this send uh GTM event function for example here they have added it to a button on click we're going to do this and track it inside of our Google tag manager in a second so let's actually go to our Google tag manager I have created a new account once you go to tag manager. goole.com you can create a new account you can point it to your uh web app this is a deployed version of the same app we are working on I'm not going to go through actually adding the Google analytics tag or connecting the tag manager here but what I've done so far is that I've created a page view tag that triggers on all of the pages so we can actually see this in action so going back to our application let me just go ahead and add these components over here to my page so inside of my page down here I'm just going to paste some code so what we're doing here is I'm rendering a section let's just bring in this send GTM event now if you're using an onclick event handler so we need to be on a client component so let me just turn this into a client component so we have loaded the script inside of our root layout this is going to load the necessary tag manager scripts so this is ready to fire event now from inside here I'm adding a button this send event button that's going to send a GTM event now to test this out I'm going to actually go to uh my container here on the preview this is going to allow you to open the tag assistant tool you need to plug in your url so this is so let me just copy this part close this bring it here so we're going to just point this to our deployed version and we're going to click connect this is going to connect the two together now on the deployed version I've actually also implemented the YouTube embed so ignore that for a second we're going to deploy that or add that uh together here as well but now that we have opened this if you go back to our tag assistant you can see that it has tracked this uh page view if you can see it here and if I go ahead and use this button that calls this send GTM event function if I click on this and go back inside of my tag assistant I should be able to see this button click let me just make this a bit bigger this button click is now adding this um the event to my data layer you can see the value of XYZ the same thing that we have added here if you have work the data layer in Google tag manager this is basically doing that so as easy as including this component and using this functionality there's more options you can pass into um the component for example the data layer name other attributes that you can pass in and as I mentioned you could use this Google tag manager to add Google analytics or deploy Google analytics to your site um or you can just go ahead and use the Google analytics component alone on its own this was added in next 14.1 we covered this briefly when we reviewed uh the release notes from version 14.1 so if you're not using Google tag manager you don't need to you can just go ahead and uh directly use the Google analytics component and pass in your uh measurement ID that you get inside of your Google analytics okay now we can again use the send GA event function to send analy analytics events the same way that we use the data layer inside Google tag manager and the rest is very similar to the tag manager actually now Google Maps is another component that you can use to pass in your API key and all other necessary options that you would have passed to your Google Maps script you can just pass it to this component and render it out I had to create an API key for this so I I'm not going to implement this but it's just as easy as pasting in your API key and any query that you would pass to your map here to render a map on your app uh very similar but we're going to implement the YouTube and beted just as an example let me just bring in this section as well so down here I'm going to add another section that uses the YouTube embed now this is going to be loading your videos a bit faster because it's using the light YouTube embed package and you can just pass in a video ID and some parameters that you would have passed to your uh video component uh to this and then go ahead and and actually render your videos in your nextjs apps so going back to Local Host this is not the deployed version as you can see the video is already here this is the latest video that we had about optimistic UI and how you can use the use optimistic hook if you haven't watched it definitely go ahead and watch it so we have this video playing here the controls are zero that's why if you don't see any controls here so this is how you can add any third-party script from Google for now and hopefully for more thirdparty packages or scripts in future to your nextjs app in a more performant and developer friendly way if you have any questions like always hit me up in the comments and I'll see you in the next one bye-bye

Channel: Hamed Bahram

Views: 5,877

Keywords:

Id: QbUfVzc23iw

Length: 10min 13sec (613 seconds)

Published: Tue Feb 13 2024