Firebase Analytics in Flutter -- How to setup Analytics for a Flutter App (quick!)

okay so I have a uh Firebase console already up so if you haven't yet log into the Firebase console and you'll see a screen like this you may not have any projects if you don't have projects yet um but that's okay we're going to click add project we're going to give it a name I'm going to say analytics test I'm going to hit continue uh enable Google analytics for this project you probably want to do this um Google analytics seems to be the way that they're going for all of Google's analytics offerings so Firebase analytics kind of aren't going to be its own thing I believe um so you'll want to turn this on so you'll need to create an account or set up an account and you can choose to create a new property or associate this with an existing property so in my case I just want to automatically create a new property going to hit create project it's going to go ahead and create and while this is going I'm going to go ahead and run fbm flutter create analytics test analytics test is not a valid oops sorry there we go had to use an underscore um if you're not using fvm the flutter version manager you'll just run this you don't need the fvm bit if you are using fvm obviously use the fvm piece in front of the flutter command uh now we can CD into our analytics test and we can run flutter run sorry fvm flutter run in my case cool Firebase projects ready we'll come back to that in just a moment so now that we're here you can actually click on the flutter docs these are really nice so there is a Firebase CLI that you'll have to install so you'll come here and you'll install it using one of these installers or you can use npm if you'd like once that's installed you'll run Firebase lock log in so you can open up a new tab here go to your project and run Firebase login it'll prompt you to log in I believe I'm already logged in so it probably won't prompt me again maybe there we go yep already logged in so I don't need to do anything there install the flutter SDK you've already done that we just did that step and then flutter create we've done that too next you can go into your uh project and run Dart Pub Global activate flutter fire CLI I've already done that so I'm not going to run it again and then you can run flutter fire configure and then your project so in our case it is analytics test 66 FF you get to choose what you want to support we'll take them all Android iOS Mac and web why not um in the meantime you'll see that this adds a lib Firebase options Dart configuration file to your project and uh we'll be able to call that so all we really need to do is this so we'll take this okay uh we didn't run it because we didn't have a device set up which is fine uh we can open up VSS code or your editor of choice go into lib main okay so here in our main Dart we can go to our main method we can paste our Firebase piece uh this is going to need to make the main method async so we can await and then we can import okay so in our main. Dart file we'll go to our main method we'll go ahead and paste the code from the Firebase console we need to import oh sorry we need to make this async first then we can import our Firebase stuff oh we can't import this yet because we actually haven't imported the dependency so in our Pub speec yaml we'll need to add those dependencies so if we come back to our browser we can click on the flutter plugins piece right here and that'll pull up our um list of supported plugins and in our case we want analytics so if we click on analytics make sure this flutter tab is selected up here and then we can run flutter Pub ad Firebase analytics in my case I need to use fvm because I'm using the flutter version manager eventually I'll stop saying that every time but it trips people up and sometimes it trips me up so it's good to say it once that completes we should be able to add those dependencies and wire them up okay dependencies look like they've finished so we should be able to Firebase did we add both no we just added Firebase analytics uh sorry there's one more we need to install first which is the Firebase core so if you're using any Firebase project you probably need the Firebase core so we'll grab this one and do the same thing fvm flutter Pub ad Firebase core give this a second okay looks like it that one was much faster and now that we're here we should be able to import Firebase yep from Firebase core we can change our options here if we want in our case we can use the default Firebase options um and this sets up analytics this is technically all you need to get going with your analytics however you probably want to add like uh custom analytics right so you might want to log when a certain event happens so you can see there's documentation on that here um I will give you one piece of advice though what I like to do is I make a file called like analytics engine. Dart I usually create a class called analytics engine and I usually just add a bunch of static methods you I mean you don't have to make them static you can do whatever you want here here um but I find that static methods just end up being fairly easy to access so I'll make a static uh void um uh user logs in and then we need to get a handle on our Firebase instance like this so what I like to do is say something like uh static final instance is equal to Firebase analytics. instance like this and then you can just do something like this user do uh and then you can choose what you want to log so in our case we wanted to log that a user logs in uh so there's a user sign up view item set user ID is there not a log in there we go log login uh it takes a login method so we can add email maybe maybe that's the only one we support or maybe if we support login methods we can say login method goes here and we want to use login method here and we know that login method is a string um so you can do that it's generally a good idea to return this value not that anything should necessarily wait on this login um analytics event being logged but sometimes you might want to and returning it gives you the option to choose uh between okay so another thing we could do is we could add another static void so we have user logs in uh let's add one uh adds item to cart maybe that's something we really care about we want like the item ID so we can return instance. log something cart maybe yep add to cart uh and then a list of analytic event items so we have a list analytics event item string affiliation currency there's a lot going on here but really what I just want is interesting I was hoping to see it in here Item ID so yeah something like item id Item ID and then I don't know maybe you do want to log the cost so you might have like a int uh cost and then you could of course do cost I could have swore I saw cost in there did I not currency discount price sorry so you could add price cost and it looks like we are oh sorry this needs to be async there we go too many positional arguments found this needs to be items so something like that um the key thing here is that my analytics is abstracted behind this analytics Engine with one exception which is right here so is there a way that we can pull this into our class as well uh the short answer is yes so we can do analytics engine. anit and maybe that returns a future so we want to await that now we can go to our analytics engine static uh future void anit um oops and we can return this clean up our Imports great and now nothing in our application cares that this is Firebase except for this one file and the key thing here is that if we ever want to change analytics engines in the future all we have to do is change it in one place this file we don't have to go change analytics engines in our main. Dart file or we don't want to have to go and change our actual logging of analytics in our cart widget or our signup widget or our login widget it's it becomes a lot so generally that's a practice I try to do with any thirdparty provider I try to abstract them out to a single class if possible where I interface with just the things I need and then that way if I ever want to swap them out for something else I just have to go back and change one class I don't have to go throughout all my code and handle that um so what would that look like so maybe let's do one more the flutter default gives us a um little button that increments a counter uh so if we do counter pressed we can return instance. log event and in our case this is a custom event right so we can say counter pressed and we can make this async oops and format please thank you okay so in this case we want to log this whenever the counter is pressed so how do we do that so we have our main homepage right we have an increment counter call so what we can do right here when we increment the counter is we can call analytics engine. counter pressed just like that if we needed to wait for this we could we don't need to analytics aren't critical to this application or almost any application really and they shouldn't block the users's experience while you're collecting analytics so um keep that in mind too your business requirements may vary but you probably don't want to block the UI on collecting analytics data that's a bad experience okay so that's it that's how you set up Firebase analytics um one last thing whenever you are building for iOS make sure you go into your pods and pod install uh if you don't have your pods installed you'll have to to go in and do that as well um but that sets up an analytics engine abstracts everything out behind the analytics engine so you can easily swap out analytics providers in the future and sets up uh Firebase and Google analytics together they're one and the same now and shows you how that you can call your analytics engine from your main Dart your other widgets whatever you want to build hopefully this video was helpful if it was give it a thumbs up let me know your thoughts below and don't forget to subscribe to the channel if you haven't yet thanks

Channel: Brad Cypert

Views: 957

Keywords:

Id: hZybD5LVpNY

Length: 12min 31sec (751 seconds)

Published: Tue Feb 13 2024