How to install Google Analytics in your Next.js application

hey welcome to this video in this one I will show you how you can install your Google analytics in your nextjs application and to do this we have to follow a couple steps so first of all we have to install our Google tag manager after we will insert our um measurement ID from Google analytics and then after we will test the whole thing and see if everything works nicely and um in the background here you can see my next nextjs application um I'm in the development mode right now so you can see Local Host but it doesn't really matter because um if you build your application then U the scripts also work and um everything is really just the same okay so I have this simple um application in the background and um now we want to track page views with Google analytics and um as I said the first step is to install your Google tag manager so you will go to Google tag manager if you don't have an account you can create one using your Google Google account and then you will see this screen and I will go ahead and create a new account this is my test nextjs account then you will select your location and give your container and name so we have an account and within one Google tech manager account you can have multiple containers and uh when you create a new account it will um give you a container setup right away so you can create your first container so in here I will give it a name so this is a text nextjs container and I'll will select the web platform and create the container then accept the terms and conditions and then you'll see the yeah your oh it was invalid input okay let's try again okay it doesn't want me to create a new account so I'll just do that again and then um I'll just uh skip to the screen okay it's loading and here we are so this is the script then we have to add to our page so the tag the Google tag manager loads in our application so this is the first thing I will do now so copy this and then I'll show you my nextjs app so I'm in the layout within the app folder layout. TSX so this is a typescript app and I have have already this Google tag manager component because I have already done some things in this repo but don't worry we will do this again and set it up um from the start from scratch so I will comment this out and remember I have just copied the script so I will paste it in here and as you can see okay there's some errors in here we cannot paste the HTML within the jsx just like that and leave it um we have to do a couple things to it so first of all I will um take out the comments and then um we have to convert this lowercase script to a uppercase script which is provided by nexts so if I do it like this you can see um I have imported it before so I will show you again so if if you uh write script with an Capital with a capital letter it will um provide you the nextjs script and you can import it like that next you just select all the content in between the two script tags and um here oops I will use the dangerously set in a HTML a property or what's it called like attribute I think and in there I can place a an object with the HTML property and this will get the string as a value and then I just paste the yeah the the the whole script function whatever in there and also I will I like I have to give it an ID I'll give it the ID GTM and then also make sure to add this attribute the strategy after interactive um yeah to make work so this is a setup yeah and now let's just try if this works so I will go back to my um xjs app and what you can do to test it is to download this Google tech assistant Legacy um you can download it from your Google Chrome web store and then you can find it in here like somewhere in this list of your extensions and then enable it reload the page and then if I have done everything correctly this will load the container so let's just um read this s2p are the three characters in the end and if we check it this is the same container as here so let's just go back here's the container and this is the way how you can check if this actually works also another way is to go to preview and you insert your URL of your um running application hang know it's here okay so you connect and if you can see the GTM with the characters behind then you also know this works if there's no container uh um detected then this will not show and it will say like no con like no Google tag found or something something like that okay to add to Google analytics I go to tags here and click on um new and for Google analytics the easiest way would be to add this Google tag you can also um yeah find it here go to Google analytics Google tag and in the like the tag ID is the one that you find in your Google analytics account so you go to Google analytics then you select your account that you want to um use for tracking um conversions on your website and website events and then go to your settings and then to data streams it's in German so don't be surprised it looks a bit different but it's built exactly the same and then um you can add a new stream here if there aren't any and then you find this measurement ID here it's like the G Dash and then some characters you copy it then you go back to your um Google tag manager container then you paste in the TCH ID as a trigger I select all pages just see uh Google analytics tag um I think I took to long so it wants me to refresh the page so let me just pause for for a second and then I will um yeah skip to the screen where it does work so let's just try again okay now it did work I have to change back the name Google analytics tag and now it works and then go to preview once again open the page and now let's see so the Google analytics tag fired so this did work just see here if there are some events detected uh I think it should show here if there are some events detected there's one actually so as you can see here there's something detected must be me cuz I was here it's just a test page so it must be me and yeah that's how you test it and then you can deploy it so you go can close the debugging and go back to your container then you click on submit you can say addit Google analytics like this and you publish it so always remember to publish your changes otherwise you will be wondering like why doesn't it work yeah this like often times that is the reason and yeah that's how you install Google Google Analytics I hope it helped you if you have any questions put them in the comments or write me on Instagram or Linkin and also if you need professional help um for your nextjs application or um about Google teag manager and the whole tracking um yeah I'm ready to help you just um send me a message uh contact me and yeah I wish you a great day thanks and bye

Channel: Aviana Development

Views: 1,066

Keywords:

Id: cs49PZoTCxU

Length: 10min 55sec (655 seconds)

Published: Wed Apr 10 2024