Analytics in Next.js 13 with Plausible

adding some basic analytics to your website or app is a critical way to be able to gauge their performance and even detect some usability issues through the lifespan of your app and if you're an existing Google analytics user you'll likely be facing that migration screen of death where if you haven't quite moved over to ga4 yet you're going to lose out on some Data Tracking whenever this actually shuts down the good news is there's a lot of options for how we can continue tracking those metrics on our site whether it is ga4 or some of the other options like plausible fathom and beam where in particular we're going to look at plausible and see how we can integrate it into an xjs 13 app with the app router [Music] so we're going to dig into a new next.js app where I've gone ahead and already created a new project where the only thing that I really changed is I added a link up here to a new about page which is really just for us to be able to track between the different pages looking inside of the code everything is really out of the box like I said except for that link to the about page and as far as the about page actually goes it's really just adding that H1 there so that we can have a page to work with now as far as plausible goes and along with some of its other competitors is that it's they're privacy focused and that's a really great thing for our users but it's also great for being able to try to be compliant with a lot of the regulations such as gdpr before we even dig in we can even check out a live demo of what this actually looks like where they just have their plausible site as the demo here but we can really start to click around and see what it would actually realistically look like if we have this running on our site now to make it a little bit less pressure they do have a free trial in terms of pricing just to make sure that we're really transparent is the base bottom line plan is going to be nine dollars a month but the nice thing is that includes 50 different websites so if you have a bunch of different websites to maintain you can just have your one account at that base price now once you're signed up and logged in the first thing we're going to want to do is actually add a website so I'm going to go ahead and click add website and I'm just going to create a fake app I'm going to add my space jelly dot Dev website even so this isn't actually going to be my spacejelly.dev snippet but I'm going to click add snippet then where we can see that they do give us a JavaScript snippet in order to add that now because we're working in an x.js app we're going to do this a little bit differently where technically you could probably do this and manage it on your own but there's a little bit easier of a way where plausible doesn't actually have an official integration with nexjs but what they do have is this community created one where if you just Google next.js plausible you'll be able to find a link to this where it's going to be using the next plausible package which is going to allow us to easily integrate it into our app so heading over to next plausible what we're going to do is first install that package so I'm going to copy next plausible I'm going to run npm installed next plausible and if we look at the Snippets here we can see that there's a couple different ways to do this we're currently we're looking at the pages way so if you're still using the Pages directory you can certainly just use this snippet here rather than the snippet we're going to use where we're going to use the app directory where we want to grab this provider and we're going to actually put it in our layout so I'm just going to start copy and pasting this over where I'm going to find that layout file I'm going to drop this in at the top we're going to also want to add this plausible provider inside of the head so I'm going to paste that in inside of that HTML layout and of course the one thing we want to make sure we update here is set it to spacejelly.dev or whatever you are using the domain that you're trying to track now back in the dashboard we want to go ahead and click start collecting data where now it's going to try to listen for that first piece of data so let's try to serve that up I'm going to run npm run Dev to spin up my development server I'm going to open back up that application I'm going to also open up the network tab to see if we can see particularly I'm filtering on plausible right now and we don't see anything going right now and the reason for that is by default this component's not going to track using localhost if we look back inside of the next plausible package and scroll down to some of the options we can see a few options here particularly we're going to look for that track Local Host now another key point of that is also using the enabled prop because by default it's only going to be enabled in production mode as a way to try to avoid having false data sent when you're developing it locally so let's enable those two just so that we can test out how this is working but just as a reminder we want to make sure we turn those off both the track localhost and the enabled when we're actually deploying this to production so I'm going to set track localhost to true and also enabled to true and when the app reloads we can already start to see that we now get both that script and we get that new event where we see that page view if we head over to our plausible account it'll automatically refresh and start to show our dashboard where it's now already collecting that data if we scroll down we can even see that it's on that home page and it's direct because we're just loading that in our browser but we can start to see stuff filling out because we're now collecting that data now we also want to make sure that as we're clicking around the application that we're going to get the analytics tracked for those different from pages so if I click this about link we can see that another event was fired another page view where we can see that the U value is set to about so now if we head back over to our dashboard and we actually start to scroll down or let's refresh it we now see that we have that about page that was just hit now just to pause for a second that's literally all we needed to do to start tracking our visits inside of our application and we're already getting all that page data when people are navigating through that's all going to come in with just that little snippet that we added and I'd say probably for most people that might be all you want you just want to see the visitors for all your different sites you want to see things like visitoration you want to see where people are coming from and the pages that they're actually navigating to but let's actually take a step further and see what else we can get out of plausible we're at the bottom here we can see that we have what's called goal conversion and if we just try to click on set up goals to see what this looks like what goals are going to be after we actually enable it is we have two different kinds we have custom events which are things that we can manually only fire or trigger to track those customly defined events but we also have page views which can also Define a goal so let's just set that about page as a goal for instance where if I have slash about I'm going to go ahead and add that goal and if I refresh my application and now I click on that about page and head back over to my dashboard I'm going to scroll down and we should now see that we now have one goal hit because we just navigated to the about page which is what we set as that conversion goal now the use case here is pretty simple this is really just to show how this works but think about if you have a funnel a sign up funnel where the very last page is going to be thank you or welcome having that as the tracked goal allows you to track that funnel down and try to con track those different conversions for that particular page now as I mentioned before there's other ways that we can track these goals so if we go back up and we go to our site settings and head back over to our goals we can add another goal but this time let's add a custom event where let's call this sign up or what this we're gonna do is we're going to add a button to the page so that anytime somebody clicks this sign up button we're going to trigger that custom event so that we can see how many people are interacting with that so let's add that goal and the next thing we want to do is go back to our configuration for next plausible where we want to set up being able to track tagged events and what we're going to do is we're going to first set that to true on our snippet so let's first set tagged events to true but then if we look at the plausible documentation which you can find with this handy link here where we're going to find these custom event goals there's a few different ways that we can handle this where the first thing they're going to tell you is to change your snippet but we already did that with adding the parameter to our snippet but what we want to do is figure out how to track this now there's two ways one you can add a CSS class name on the element you want to track but alternatively you can use custom JS in order to trigger that as well and we'll see that in a second in case that's what you need but if we just try to look at the CSS way of doing this first which can be a little bit easier especially with the react server components we can see that what we'll want to do is add a c SS class of plausible event name with an equal sign and then we're going to add our event name so let's first copy this CSS class and over on my about page I'm just going to add a simple button that says sign up and I'm going to add a class name of plausible event name but then I'm going to set that as sign up I'm going to fix the class name there now if I refresh the page we can see my sign up button at the bottom it doesn't really look like a button because it's using Tailwind I'm not going to go through that right now but if I click this sign up button we can now see in the network tab that we have that new event that was clicked and we can now see the end value is going to be that custom event value that we sent which is sign up and we can even see the page that it was set on but now if we head back over to our dashboard and scroll all the way down to the bottom we can now see that goal conversion of that sign up custom event that we set up but we're not going to dig into it here you can even get more advanced with that if you want to do things like maybe you want to have a sign up form that gets triggered but you want to know where that sign up form is you can set up different property values so that you can have a better or more flexible of a way to actually track individual custom event usage now as I promised we're also going to see how we can track this with custom JavaScript which maybe depending on your use case maybe your submission being a form that you have to prevent default and you want to make sure that you track it and maybe this is easier for you there's a way to actually set up from hitting the window plausible instance where you can actually trigger it but because we're using next plausible we're gonna actually head back over there and we scroll down to the bottom we're gonna be able to see where we can send custom events so we can even see that it links off to that page but what we're going to do is we're going to import this use plausible Hook from that next plausible package where we're going to be able to do things like on click fire that custom event now to see how this works I created a really quick form and I dropped it in inside of my about page where if we look at the form what I want to do is use a client component because we're going to handle those on click handlers so we can see I defined use client and all my form is really doing is it's a form with a submit button and just to make things easier to see I'm going to go ahead and comment out that original sign up button so now we can see that submit button on the page and if we click it we can see that it's going to refresh the page because it's a form and it's really not doing anything it's just doing the default handling but say I want to track these button clicks so what I'm going to do is I can either add the on click on the actual button here but what I'm going to actually do is specify on submit because I want form submissions for this one I'm going to say handle on submit I'm going to then create that function where inside of my parameter I'm going to grab that event and just to make typescript happy I'm going to say any I know that should be an event but don't at me but I'm going to say e prevent default we're here what we're going to start to do is figure out how we can now trigger that plausible event so the first thing we want to do is import that use plausible Hook from plausible so I'm going to paste that in right at the top and then we can simply set up that plausible const for our use plausible hook and we're going to paste that in right at the top of the component now from here as we can see inside of the documentation we're going to just simply fire that plausible function passing in our custom event name and as I mentioned before you can pass in those custom props if you have that configured again I'm not going to go through that here but if we go back to our code we can fire that plausible and we can pass in our event name and let's just make sure that we're doing this correctly and create a new event to track this to make sure that it's not overriding the original one so back inside my dashboard I'm going to go to site settings and then I'm going to go to goals and I'm going to go to add goal and I'm going to track my custom event of submit form I'm going to copy that I'm going to add the goal inside of my code I'm going to specify that as the custom event name and now I want to reload the page and I try to submit that form we can again see that submit event fire with the submit form name and as expected if we scroll down to our goals we should now see that submit form event pop-up in our goal conversions now we're going to stop there but there's some other things that might be recommended when you're trying to set up your analytics with plausible such as setting up a proxy to make it a little bit more resilient to ad blockers or if you want to track outbound links you can set that prop to true and you can figure out how to create a custom event where you're going to create a custom event with just that name where you can then see those external clicks just like the goal conversions and just as a reminder whenever you're done debugging your analytics make sure you remove the track localhost and the enabled to make sure that it's not going to be tracking every time you're working inside of your project locally but we can see that between the next plausible package and plausible itself it really makes it easy for us to drop this into our web apps so that we can get started tracking right away even though it's a little bit of a pain to start to think about how we migrate off Google analytics the nice thing is there's a lot of great options whether it is ga4 whether it is plausible fathom or whatever other options are available what analytics platform are you moving to let me know in the comments and another important part of our next.js workflow is being able to send transactional emails and what better way to do that is by writing those emails in react so check out my video where we learn how to create build and send emails using react email and resend before you go make sure you hit thumbs up subscribe and click that little notification Bell to get updates to your inbox thanks for watching

Channel: Colby Fayock

Views: 4,324

Keywords: analytics, nextjs analytics, plausible, plausible analytics, plausible events, custom events, custom events analytics, custom analytics events, privacy friendly analytics, google analytics replacement, replace google analytics, web analytics, nextjs track page view, nextjs page tracking

Id: JISy7fsYysU

Length: 12min 47sec (767 seconds)

Published: Wed Jun 21 2023