How I used ReactGA with Google Analytics

hi everyone so i decided to do a quick video about how to use um react ga which is an npm module that allows you to use google analytics in your react projects i set it up with my site mandalorianfan.com and just wanted to show what it looks like in the code and how easy it is to use so this is react ga it's open source it's an npm package we i use it for um several sites actually but um today i'm going to talk about the mandalorian fan.com to get it installed in your project um you know you install it just like you would any other npm package with an npm install react reactga and then basically you initialize the package and then you use your key which is basically the number that you get from google analytics to initialize it and then you record page view events now with react it's a little bit different especially if you're using a router because this basically will work if you have it just in like one page component but in the case that you have multiple components or you want to capture multiple pages that are in or out it's a little bit more complicated and basically that's what i'm going to try to discuss today the first place you start is you actually have to create a google analytics account um so now this is the one that i have for mandalorian fan.com if you go over to the admin panel you notice i've already got one for all website data if you want to um create a like a basically a view instead of a property it's not as straightforward as it used to be google just came out with a change for google analytics where by default they use properties and this gets into like more finite streaming and finite control over the analytics data that you're using um in the case that i'm talking about i just want to look at page views like i don't really care about necessarily click ratios or something like that i just want to see how many times you know pages are getting hit so if you want to create the a key that you need to use for react ga it's actually pretty straightforward because once you've created this account um and you can just follow if you just google google analytics and then you create an account you know everything ties back to your your google user uh in this case this is my rhythm and by er not rhythm binder this is my mandalorian fan dot com site and so to do this you go over to admin by default when you create an account you'll already have a property what you the problem is that you also need basically what's considered a view and with some of the newer changes that they made to google analytics this isn't quite as straightforward as it used to be because it used to be this was the default would you get a view now you have to go and click create property and then you give it like a property i'll call mine prop my drop property and then if you show advanced options it says create a google analytics property universal local analytics property and so what this is is this is essentially what pfga is going to use to do page views properties i think you actually can hook up to react ga and there's some more information properties by themselves compared to a view are more like fine-grained control of analytics in the case of view this is good for just actual page views and so i'm going to go ahead and do it and i think i can just i think i can just leave this blank for right now or no i can't uh create no i just want the universal analytics property and then oh i do have to give it a slight so i'll just say mandalorian fan.com all right so once you've done this you pick out you know the category i'll say arts and entertainment that's small customer engagement with my site or app which is all i really care about once you've created it it will give you a tracking code and it should be right here okay so this tracking id is all you need from from here you can pass this to reactga and then it can um you can use it in your site so if we switch over to mandalorianfan.com you'll notice that uh this is the site itself and if i go ahead and do an inspect over here in the console if i look at network um as soon as i do a refresh you notice that it's it's pulling all the assets and whatnot but then it also has analytics.js so it's actually retrieving google analytics and then if you'll notice i think as soon as i switch pages it should looks like we have yeah so then it's collected that this was a page view and then and it's it's sent so this is using react react ga in order to um do this in with react.js once you have your key um you have to go over here and basically create a function and so what i was trying to say before is if you look at the way that the repo has it set up it looks like you initialize and then you like pretty much immediately use so you know you think about like you could dump this in the top of a component that you're using to show a page but if we want to use this on multiple pages we need to somehow connect this to the router so with with react router you have the situation where basically i'm not going to go into necessarily how you use direct outer because i'm going to assume that you already have looked at the um you've already used it or you're familiar with how to set it up if you i'll put a link to the react router documentation and basically how to set it up in this video but basically uh you have um you have a switch and then the switch is taking in these different routes and then it's showing the different presentation components based on the route and what we're doing here is i've created a use pageviews function and so what this is doing is basic it's using the use location hook from the react rider dom and so as you go to different pages basically this is on a use effect re-rendering and then sending off basically firing off the page view event it took me a long time to actually get this to be figured out um i had if you look into the documentation on how to do this it's all over the place i'm using because and i say it's all over the place because i'm actually using the react router so if you look at the documentation for for um for all of these uh it's it's basically kind of pointing to the fact that like browser router you can't um set like a location object uh which isn't exactly true but i because i'm using browser router um i had to go ahead and do this so this is kind of like a hack and how to actually get this to work because it's basically whenever browser router does something it's firing versus making it part of um the actual route mechanism which is most the time you specify like a location object uh and and you and you set that in the router if you look like if you do just a quick google search on stack overflow they've got people that are doing something like this where you basically have um the react router and then you're passing in like a custom history object and then within history you're listening for for these event changes um i didn't really want to do that because i was using browser router and i was very happy with what i was doing my browser writer didn't really want to change it so instead i created this little function to use page views which fires whenever a browser router works and as i just showed you with it running live it is it is actually working um if you're familiar with google analytics a lot of times like the more traditional route was you would actually get in the little console if you see right here they actually will give you essentially like a script that you can drop into your index page your site the reason that that doesn't work is because then that means that basically i think if you hit the site that's as far as you get so if you want more granular control where like you see where certain pages are being hit then you can uh you need to do something like what i'm doing here and the last thing that i'll say is um just that i know that this is uh super powerful because of the fact that um once you have this information then you can use google analytics and create like really nice little reports that show you like um how your site's doing so um so that was that was pretty much all i really wanted to cover in this video but um i hope that this is at least giving you a little information and some places to go um to see more information and if you have questions feel free to leave some comments on the video or you can reach out to me on any of the social media platforms so then thanks for watching my video

Channel: Rhythm and Binary

Views: 2,386

Keywords:

Id: Rd8VRk_1BDE

Length: 9min 16sec (556 seconds)

Published: Fri Jan 22 2021