The Easiest Way To Add Analytics to a NuxtJS Project

hey what's going on guys in this video i want to show you how you can add analytics to any nuxjs project incredibly easily in just one step so stay with me here uh this is a little website that i set up a while ago for content creation i run a content agency called one second copy and for a while i was wondering hey how do i add super easy analytics to this i want to be able to see who's coming where they're coming from i don't want to like you know be super weirdly invasive or creepy but i want to know a little bit more about my users so that i can curtail my content to them and then along came the big problem how do i do analytics with next a big issue with analytics with next i think is that there are like five million modules one of them is a google analytics module which is actually pretty good but i found that it was pretty buggy and it didn't really work for me uh 100 the first couple times that i used it there were also a couple of other analytics services all and i was a big pain in the ass so here's how to make any analytics system uh that is based off tags work with next. js super easily all you got to do is go over to your next website here then in this case this is my next website it's currently running that dev server which is why you see it pop up over here and then you need to go to your root folder so in this case this is my root folder and you need to create a file called app. html this is essentially going to be a template file that you can insert any code into your html template and it'll automatically populate now it's very important here that your file looks something like this in my case we have a doctype html with these two kind of you know squiggly brackets html attributes and then another head with head attributes where you put the head files and then another head closing tag a body tag where you put app this is where the main app is going to live and then a closing html tag i'm going to include this in the description so you guys can literally just copy and paste this but make sure that the file is called app. html and then all you do after that is you grab your code whatever you're using for your analytics in my case i'm using these guys called panel bear and panel bear request that you put in the header all i do is i just copy and paste their code into this app. html and save it's that easy you can imagine how any other analytics platform like uh google analytics or maybe i think firebase yeah no there are a couple of other analytics platforms that are very tag based super easy kind of copy and paste this is the exact same thing you do with them just instead of just putting it in the head for example you might want to put half of it in the body the other half in the head whatever the documentation specifically refers you to but in a nutshell that is how you do it if you want to see it live on your website all i need to do is go into that head and then look for panel bear analytics and you can see that exact same code snippet was copied and pasted as well as another little script tag here it is honestly that easy just takes maybe 30 seconds or so you update it you push it to your repo and your analytics will be live panel bear is already reporting uh visit to my website as we speak so i hope that was helpful for you guys if you guys like this kind of content and this new kind of style of production that i'm doing i just got a new setup let me know more than happy to keep this stuff up i earn i earnestly hope to be publishing at least a few videos a week on various next. js and xjs topics without further ado i will catch you guys later make sure to like and subscribe