Analytics in Next.js 13 with Plausible
Analytics in Next.js 13 with Plausible
Add analytics to track pageviews and custom events in a Next.js app using Plausible analytics.
We’ll walk through setting up analytics in the Next.js app directory with the App Router and set up custom events and conversion goals in Plausible.
🧰 Resources
Tutorial: https://spacejelly.dev/posts/privacy-…
Code: https://github.com/colbyfayock/my-pla…
Demo: https://my-plausible-app.vercel.app/
https://github.com/4lejandrito/next-p…
📺 YouTube: https://youtube.com/colbyfayock?sub_c…
🐦 Twitter: https://twitter.com/colbyfayock
📹 Twitch: https://twitch.tv/colbyfayock
✉️ Newsletter: https://www.colbyfayock.com/newsletter/
🎥 What I Use: https://www.colbyfayock.com/uses
#colbyfayock #plausible #nextjs #analytics #webanalytics #webdevelopment
Content
0 -> adding some basic analytics to your
1.74 -> website or app is a critical way to be
3.84 -> able to gauge their performance and even
5.4 -> detect some usability issues through the
7.5 -> lifespan of your app and if you're an
9.179 -> existing Google analytics user you'll
11.219 -> likely be facing that migration screen
12.84 -> of death where if you haven't quite
14.16 -> moved over to ga4 yet you're going to
16.139 -> lose out on some Data Tracking whenever
17.88 -> this actually shuts down the good news
19.5 -> is there's a lot of options for how we
21.18 -> can continue tracking those metrics on
22.92 -> our site whether it is ga4 or some of
25.14 -> the other options like plausible fathom
26.939 -> and beam where in particular we're going
28.8 -> to look at plausible and see how we can
30.24 -> integrate it into an xjs 13 app with the
32.579 -> app router
33.49 -> [Music]
35.04 -> so we're going to dig into a new next.js
36.96 -> app where I've gone ahead and already
38.46 -> created a new project where the only
39.96 -> thing that I really changed is I added a
41.579 -> link up here to a new about page which
44.1 -> is really just for us to be able to
45.6 -> track between the different pages
46.86 -> looking inside of the code everything is
48.66 -> really out of the box like I said except
50.46 -> for that link to the about page and as
52.44 -> far as the about page actually goes it's
54.12 -> really just adding that H1 there so that
55.98 -> we can have a page to work with now as
57.6 -> far as plausible goes and along with
59.28 -> some of its other competitors is that
60.78 -> it's they're privacy focused and that's
62.76 -> a really great thing for our users but
64.32 -> it's also great for being able to try to
65.939 -> be compliant with a lot of the
67.38 -> regulations such as gdpr before we even
69.72 -> dig in we can even check out a live demo
71.64 -> of what this actually looks like where
73.26 -> they just have their plausible site as
74.939 -> the demo here but we can really start to
76.74 -> click around and see what it would
78.6 -> actually realistically look like if we
80.58 -> have this running on our site now to
82.68 -> make it a little bit less pressure they
83.939 -> do have a free trial in terms of pricing
86.1 -> just to make sure that we're really
87.18 -> transparent is the base bottom line plan
89.82 -> is going to be nine dollars a month but
91.68 -> the nice thing is that includes 50
93.119 -> different websites so if you have a
94.799 -> bunch of different websites to maintain
96.18 -> you can just have your one account at
98.34 -> that base price now once you're signed
100.259 -> up and logged in the first thing we're
101.88 -> going to want to do is actually add a
103.079 -> website so I'm going to go ahead and
104.1 -> click add website and I'm just going to
106.079 -> create a fake app I'm going to add my
107.939 -> space jelly dot Dev website even so this
111.6 -> isn't actually going to be my
112.56 -> spacejelly.dev snippet but I'm going to
114.54 -> click add snippet then where we can see
116.159 -> that they do give us a JavaScript
117.42 -> snippet in order to add that now because
119.52 -> we're working in an x.js app we're going
120.96 -> to do this a little bit differently
121.86 -> where technically you could probably do
123.72 -> this and manage it on your own but
125.399 -> there's a little bit easier of a way
126.659 -> where plausible doesn't actually have an
128.94 -> official integration with nexjs but what
131.52 -> they do have is this community created
133.319 -> one where if you just Google next.js
134.94 -> plausible you'll be able to find a link
136.62 -> to this where it's going to be using the
138.599 -> next plausible package which is going to
140.64 -> allow us to easily integrate it into our
142.26 -> app so heading over to next plausible
143.94 -> what we're going to do is first install
145.62 -> that package so I'm going to copy next
147.239 -> plausible I'm going to run npm installed
149.52 -> next plausible and if we look at the
151.379 -> Snippets here we can see that there's a
152.879 -> couple different ways to do this we're
154.2 -> currently we're looking at the pages way
156.12 -> so if you're still using the Pages
157.379 -> directory you can certainly just use
159.239 -> this snippet here rather than the
160.98 -> snippet we're going to use where we're
162.54 -> going to use the app directory where we
164.76 -> want to grab this provider and we're
166.14 -> going to actually put it in our layout
167.58 -> so I'm just going to start copy and
168.78 -> pasting this over where I'm going to
170.04 -> find that layout file I'm going to drop
171.66 -> this in at the top we're going to also
173.519 -> want to add this plausible provider
175.2 -> inside of the head so I'm going to paste
177.12 -> that in inside of that HTML layout and
179.4 -> of course the one thing we want to make
180.54 -> sure we update here is set it to
182.84 -> spacejelly.dev or whatever you are using
185.34 -> the domain that you're trying to track
186.959 -> now back in the dashboard we want to go
188.7 -> ahead and click start collecting data
190.44 -> where now it's going to try to listen
191.879 -> for that first piece of data so let's
193.92 -> try to serve that up I'm going to run
195 -> npm run Dev to spin up my development
196.8 -> server I'm going to open back up that
198.54 -> application I'm going to also open up
200.64 -> the network tab to see if we can see
202.44 -> particularly I'm filtering on plausible
204.42 -> right now and we don't see anything
205.68 -> going right now and the reason for that
207.48 -> is by default this component's not going
209.819 -> to track using localhost if we look back
212.28 -> inside of the next plausible package and
214.379 -> scroll down to some of the options we
216.3 -> can see a few options here particularly
217.92 -> we're going to look for that track Local
219.54 -> Host now another key point of that is
221.94 -> also using the enabled prop because by
224.159 -> default it's only going to be enabled in
225.9 -> production mode as a way to try to avoid
228.36 -> having false data sent when you're
230.4 -> developing it locally so let's enable
232.44 -> those two just so that we can test out
234.12 -> how this is working but just as a
236.04 -> reminder we want to make sure we turn
237.36 -> those off both the track localhost and
240.06 -> the enabled when we're actually
241.5 -> deploying this to production so I'm
242.94 -> going to set track localhost to true and
245.159 -> also enabled to true and when the app
247.86 -> reloads we can already start to see that
249.54 -> we now get both that script and we get
251.58 -> that new event where we see that page
253.68 -> view if we head over to our plausible
255.54 -> account it'll automatically refresh and
258 -> start to show our dashboard where it's
259.62 -> now already collecting that data if we
261.54 -> scroll down we can even see that it's on
262.86 -> that home page and it's direct because
264.66 -> we're just loading that in our browser
266.04 -> but we can start to see stuff filling
267.78 -> out because we're now collecting that
269.28 -> data now we also want to make sure that
270.96 -> as we're clicking around the application
272.52 -> that we're going to get the analytics
274.08 -> tracked for those different from pages
275.52 -> so if I click this about link we can see
277.74 -> that another event was fired another
279.72 -> page view where we can see that the U
282 -> value is set to about so now if we head
284.94 -> back over to our dashboard and we
286.68 -> actually start to scroll down or let's
288.72 -> refresh it we now see that we have that
291.12 -> about page that was just hit now just to
293.759 -> pause for a second that's literally all
295.32 -> we needed to do to start tracking our
297.419 -> visits inside of our application and
299.58 -> we're already getting all that page data
301.62 -> when people are navigating through
303 -> that's all going to come in with just
305.1 -> that little snippet that we added and
306.72 -> I'd say probably for most people that
308.52 -> might be all you want you just want to
309.96 -> see the visitors for all your different
311.34 -> sites you want to see things like
312.54 -> visitoration you want to see where
313.86 -> people are coming from and the pages
315.6 -> that they're actually navigating to but
317.22 -> let's actually take a step further and
318.9 -> see what else we can get out of
320.22 -> plausible we're at the bottom here we
321.78 -> can see that we have what's called goal
323.52 -> conversion and if we just try to click
325.62 -> on set up goals to see what this looks
327.36 -> like what goals are going to be after we
329.52 -> actually enable it is we have two
331.32 -> different kinds we have custom events
333.479 -> which are things that we can manually
334.8 -> only fire or trigger to track those
338.58 -> customly defined events but we also have
340.68 -> page views which can also Define a goal
343.38 -> so let's just set that about page as a
345.419 -> goal for instance where if I have slash
347.1 -> about I'm going to go ahead and add that
349.02 -> goal and if I refresh my application and
351.479 -> now I click on that about page and head
353.94 -> back over to my dashboard I'm going to
356.22 -> scroll down and we should now see that
358.38 -> we now have one goal hit because we just
360.9 -> navigated to the about page which is
362.4 -> what we set as that conversion goal now
364.32 -> the use case here is pretty simple this
366.06 -> is really just to show how this works
367.74 -> but think about if you have a funnel a
369.539 -> sign up funnel where the very last page
371.46 -> is going to be thank you or welcome
373.199 -> having that as the tracked goal allows
375.72 -> you to track that funnel down and try to
377.82 -> con track those different conversions
379.5 -> for that particular page now as I
381.6 -> mentioned before there's other ways that
382.919 -> we can track these goals so if we go
384.66 -> back up and we go to our site settings
386.58 -> and head back over to our goals we can
388.979 -> add another goal but this time let's add
390.539 -> a custom event where let's call this
392.46 -> sign up or what this we're gonna do is
395.1 -> we're going to add a button to the page
396.24 -> so that anytime somebody clicks this
397.74 -> sign up button we're going to trigger
399.06 -> that custom event so that we can see how
400.86 -> many people are interacting with that so
402.66 -> let's add that goal and the next thing
404.34 -> we want to do is go back to our
405.9 -> configuration for next plausible where
407.94 -> we want to set up being able to track
410.28 -> tagged events and what we're going to do
412.68 -> is we're going to first set that to true
414.419 -> on our snippet so let's first set tagged
416.819 -> events to true but then if we look at
418.56 -> the plausible documentation which you
420.12 -> can find with this handy link here where
421.979 -> we're going to find these custom event
423.24 -> goals there's a few different ways that
425.16 -> we can handle this where the first thing
426.72 -> they're going to tell you is to change
427.86 -> your snippet but we already did that
429.3 -> with adding the parameter to our snippet
432.3 -> but what we want to do is figure out how
433.919 -> to track this now there's two ways one
436.139 -> you can add a CSS class name on the
438.36 -> element you want to track but
439.919 -> alternatively you can use custom JS in
442.44 -> order to trigger that as well and we'll
443.819 -> see that in a second in case that's what
445.5 -> you need but if we just try to look at
447.419 -> the CSS way of doing this first which
448.919 -> can be a little bit easier especially
450.3 -> with the react server components we can
452.88 -> see that what we'll want to do is add a
454.5 -> c SS class of plausible event name with
457.8 -> an equal sign and then we're going to
459.18 -> add our event name so let's first copy
461.639 -> this CSS class and over on my about page
465.06 -> I'm just going to add a simple button
467.34 -> that says sign up and I'm going to add a
469.74 -> class name
471.18 -> of plausible event name but then I'm
473.819 -> going to set that as sign up I'm going
475.86 -> to fix the class name there now if I
477.36 -> refresh the page we can see my sign up
479.22 -> button at the bottom it doesn't really
480.479 -> look like a button because it's using
481.919 -> Tailwind I'm not going to go through
483 -> that right now but if I click this sign
485.099 -> up button we can now see in the network
487.74 -> tab that we have that new event that was
490.02 -> clicked and we can now see the end value
492.539 -> is going to be that custom event value
494.94 -> that we sent which is sign up and we can
496.919 -> even see the page that it was set on but
498.84 -> now if we head back over to our
500.4 -> dashboard and scroll all the way down to
501.9 -> the bottom we can now see that goal
504.12 -> conversion of that sign up custom event
506.28 -> that we set up but we're not going to
508.02 -> dig into it here you can even get more
509.759 -> advanced with that if you want to do
511.199 -> things like maybe you want to have a
513 -> sign up form that gets triggered but you
514.44 -> want to know where that sign up form is
516 -> you can set up different property values
518.459 -> so that you can have a better or more
520.979 -> flexible of a way to actually track
522.899 -> individual custom event usage now as I
525.66 -> promised we're also going to see how we
527.16 -> can track this with custom JavaScript
528.839 -> which maybe depending on your use case
530.58 -> maybe your submission being a form that
531.959 -> you have to prevent default and you want
533.399 -> to make sure that you track it and maybe
535.26 -> this is easier for you there's a way to
537.42 -> actually set up from hitting the window
539.459 -> plausible instance where you can
541.44 -> actually trigger it but because we're
542.7 -> using next plausible we're gonna
544.5 -> actually head back over there and we
545.76 -> scroll down to the bottom we're gonna be
547.56 -> able to see where we can send custom
548.88 -> events so we can even see that it links
550.86 -> off to that page but what we're going to
552.54 -> do is we're going to import this use
554.16 -> plausible Hook from that next plausible
556.5 -> package where we're going to be able to
558.36 -> do things like on click fire that custom
560.519 -> event now to see how this works I
562.32 -> created a really quick form and I
563.88 -> dropped it in inside of my about page
565.98 -> where if we look at the form what I want
567.48 -> to do is use a client component because
569.16 -> we're going to handle those on click
570.66 -> handlers so we can see I defined use
572.459 -> client and all my form is really doing
574.2 -> is it's a form with a submit button and
576.36 -> just to make things easier to see I'm
577.86 -> going to go ahead and comment out that
579.06 -> original sign up button so now we can
580.92 -> see that submit button on the page and
582.3 -> if we click it we can see that it's
583.5 -> going to refresh the page because it's a
585.06 -> form and it's really not doing anything
586.56 -> it's just doing the default handling but
588.54 -> say I want to track these button clicks
589.98 -> so what I'm going to do is I can either
591.18 -> add the on click on the actual button
594.18 -> here but what I'm going to actually do
595.2 -> is specify on submit because I want form
598.2 -> submissions for this one I'm going to
600 -> say handle on submit I'm going to then
602.58 -> create that function
605.1 -> where inside of my parameter I'm going
607.019 -> to grab that event and just to make
609.06 -> typescript happy I'm going to say any I
610.74 -> know that should be an event but don't
612.54 -> at me but I'm going to say e prevent
615 -> default we're here what we're going to
617.459 -> start to do is figure out how we can now
619.08 -> trigger that plausible event so the
621.24 -> first thing we want to do is import that
622.86 -> use plausible Hook from plausible so I'm
624.959 -> going to paste that in right at the top
626.279 -> and then we can simply set up that
627.779 -> plausible const for our use plausible
629.94 -> hook and we're going to paste that in
631.14 -> right at the top of the component now
632.519 -> from here as we can see inside of the
634.74 -> documentation we're going to just simply
636.6 -> fire that plausible function passing in
639.3 -> our custom event name and as I mentioned
641.399 -> before you can pass in those custom
642.72 -> props if you have that configured again
644.64 -> I'm not going to go through that here
645.899 -> but if we go back to our code we can
647.64 -> fire that plausible and we can pass in
650.399 -> our event name and let's just make sure
652.2 -> that we're doing this correctly and
653.7 -> create a new event to track this to make
655.68 -> sure that it's not overriding the
657.12 -> original one so back inside my dashboard
659.1 -> I'm going to go to site settings and
661.079 -> then I'm going to go to goals and I'm
662.459 -> going to go to add goal and I'm going to
663.959 -> track my custom event of submit form I'm
667.62 -> going to copy that I'm going to add the
669.12 -> goal inside of my code I'm going to
670.92 -> specify that as the custom event name
672.6 -> and now I want to reload the page and I
674.279 -> try to submit that form we can again see
676.56 -> that submit event fire with the submit
678.899 -> form name and as expected if we scroll
681.12 -> down to our goals we should now see that
683.399 -> submit form event pop-up in our goal
686.16 -> conversions now we're going to stop
687.48 -> there but there's some other things that
689.1 -> might be recommended when you're trying
690.839 -> to set up your analytics with plausible
692.339 -> such as setting up a proxy to make it a
694.68 -> little bit more resilient to ad blockers
696.839 -> or if you want to track outbound links
699.12 -> you can set that prop to true and you
701.279 -> can figure out how to create a custom
702.66 -> event where you're going to create a
703.92 -> custom event with just that name where
705.779 -> you can then see those external clicks
707.519 -> just like the goal conversions and just
709.56 -> as a reminder whenever you're done
710.88 -> debugging your analytics make sure you
712.62 -> remove the track localhost and the
714.3 -> enabled to make sure that it's not going
716.1 -> to be tracking every time you're working
717.839 -> inside of your project locally but we
719.88 -> can see that between the next plausible
721.92 -> package and plausible itself it really
724.56 -> makes it easy for us to drop this into
726.72 -> our web apps so that we can get started
728.82 -> tracking right away even though it's a
730.74 -> little bit of a pain to start to think
731.88 -> about how we migrate off Google
733.2 -> analytics the nice thing is there's a
735 -> lot of great options whether it is ga4
736.62 -> whether it is plausible fathom or
738.36 -> whatever other options are available
739.62 -> what analytics platform are you moving
741.66 -> to let me know in the comments and
743.22 -> another important part of our next.js
744.779 -> workflow is being able to send
745.86 -> transactional emails and what better way
747.6 -> to do that is by writing those emails in
749.7 -> react so check out my video where we
751.5 -> learn how to create build and send
753.18 -> emails using react email and resend
756.06 -> before you go make sure you hit thumbs
757.86 -> up subscribe and click that little
759.12 -> notification Bell to get updates to your
760.92 -> inbox thanks for watching
Source: https://www.youtube.com/watch?v=JISy7fsYysU