Install Google Analytics in NextJS (App router)

hello everybody uh today I will demonstrate how we can integrate Google analytics with a nextjs website so today I'll show it with a nextjs project built with app router now uh the first thing to do is you have to go here analytics.google.com so if you haven't done done this before you just go to this link analytics.google.com and then create a new account and uh after that so let me first show you what is the expected output for this video so this is the analytics dashboard for my personal portfolio website so from here I can see that right now eight users are active nine users and I can see where they are coming from I can see their location which Pages they're visiting right what are the events things like that so uh let's see how we can do it so to do that as I already have an account I need to go go to this part of the website so I go to admin if you're creating a new account on analytics.google.com you will be asked to create a new account but I already have an account so what I'll do is I'll create a property so if you are doing this for someone else you have to create an account if you doing it for the same project then you will create a property so that's the distinction between account and property for example if you have a project but you have a web version and mobile version and you have to track them differently separately then you will create two properties for that so just for demonstration purpose let me create a new property uh the property is test property right these are the default things set it up according to your needs uh select the business uh select the industry next business objective whatever whatever then create uh once you create you select your platform so as we are be doing this for next just website so this is web platform so I'll select web then it will ask me for the website URL uh for now I don't have any URL but let's say it's test.ai so uh this is the test. a it can be whatever you like for now but eventually when you are deploying it to a particular domain or deploying the analytics for a particular domain you have to give it here for example my domain is Muhammad f.de so whenever I'm creating analytics for that I have to give this one Muhammad f. something like that uh the website name right I just create a stream so stream is basically a data source and right after that it will tell me that I haven't integrated it yet properly obviously I haven't integrated it with the website yet so let me first show you what the website looks like so this is is the next CH project uh this is running here on local L 3000 and how do you see if this is this has any Google analytics or not you can just search for gtag it will give you gtag is not defined something like that so this is just a simple way to verify if the analytics is installed or not so let's see what we can do in our analytics page it is giving us the installation instructions so we want to install it manually uh if you're using something else for example you have CMS and direct Integrations but we are using nextjs we'll install it manually you copy this code you go to your editor uh inside your nextjs project find out the root level layout so that will be under app folder and if you are using Pages router that will be theore DOA TSX file or theore doore document. TSX file so for the this project it will be under the app layout. TSS here we have HTML we don't have body yet so let's add the head here and paste the code uh but it will not work because for next Chas we don't use this script instead we install or um we bring in the next script uh import the next script and replace this script tags with next just specific script tag so this script tag allows us to do some further optimizations but we'll not talk about that but you'll see that the code is not working as expected uh because this is something that we added directly which is not supposed to work what we have to do create a curly brace and add some code here uh so we have to bring this inside a string I have added string uh template here just put the code inside this block now your code code is formatted but the code is still complaining us because we have to do one more thing which is we have to add a ID here so let's say it is Google uh analytics so just copy paste just to recap copy the code from here paste here install script replace the script give it ID and bring the code inside this string lits that should be it and if our website is running properly let me give it a refresh let's see and now we can see that we have something here which means our analytics is uh should be successful right so let's go to our uh website and see if we have anything or not let's go to the analytic dashboard here we should have our new property prop y coming up so now we have the second property test property open it up and it says that no data received from your website that's understandable it can take up to 48 hours but it has never been 48 hours for me usually it's less than uh one or 2 minutes so we'll give it a little time and uh let's see your data collection is active so now we can see that we have a user here who is coming from Bangladesh that's obviously me so that's how you can integrate Google analytics to your next JS app router project uh thank you so much uh let me know uh if you have any questions or confusions have a nice day bye

Channel: Mohammad Faisal

Views: 2,200

Keywords:

Id: Z3p6qeU76V0

Length: 6min 49sec (409 seconds)

Published: Tue Feb 06 2024