Add Firebase Analytics to Flutter apps - Google Analytics for Firebase | Easy Integration

hey everyone back again with another flutter tutorial and in this sess we will look into how to integrate fire Bas analytics right inside our FR rap and what we have here is a simple example of the same where you have integrated Firebase analytics right inside our F rap and broadly speaking Firebase analytics is a kind of service provided by the Firebase itself it helps us to create and maintain records about the user engagement the behavioral pattern the demographic activities and much more which on the other hand can be used used for marketing your targeted audiences increase the apps performance based upon the user engagement and so on so generally speaking Firebase analytics by default is capable enough to record few user attributes like the users demographic informations or the places in which your app is being currently viewed the pages which gets the most recent hits and much more and apart from these default attributes which the Firebase analytics records you can also create custom EVS in Firebase analytics to record other user attributes and in in this video we are going to explain this Firebase analytics with one simple example we have a simple flatter app with a bottom navigation bar and inside this bottom navigation bar we have three items and each item is going to corresponds to individual Pages like we have the homepage then the business page and finally we have the profile page and our use case or scenario here is we need to record how many users thisit the homage or the business page and the profile page or in other words I need to maintain clear record of the number of users or the view count of each pages so this is what we need to achieve here with the help of the Firebase analytics say for example if I click this homepage then move over to the business page and again come back to the homepage now our page count for the homepage should be two and the page count for business page should be one and if you now head over to the Google analytics dashboard you'll be able to see the user for currently using your app right now that is only one active user and you can also see the geographical information of that user as well and if you scroll down you you'll be able to see much more of these informations here we have list of few EMS which is been recorded like the screen view the session start and so on here the pages track is some custom event which you have defined in this flut app and if you click this we try to pass two attributes like the page name and Page index and if you click this page name you'll see that the page count for home page is one and if I click this business page you should now see that new entry of business page should be created here just the same way if I click this profile page then the business page and the home page it needs to create individual records for each pages and those needs to be reflected in real time as as we keep navigating to each Pages the count of each page keep altering right so this is basically what we are trying to achieve in this video series so this is all about what we are about to discuss in this video and if you're super excited about this tutorial consider subscribing to my YouTube channel wherein WE Post regular videos about flutter tutorials and flutter animations so what are you waiting for hit the Subscribe button now so that you won't miss any of the craziest flter updates which you're going to share in the future videos hope you got a better understanding of what we are about to discuss in this video with this idea and without any further delay let's dly dive into the video and get started well this entire video series can be broken down into four different segments the first would be the insell setup where we will discuss about the necessary packages and depencies which we need to add following which we will walk you through the basis of creating a project in Firebase and down the line you will also Implement few logical codes inside our F project and finally we need to update few changes on the excort side to get the app running so these are the four different segments in which this video is being divided into and the reason is that we want you to feel comfortable and make it easily understandable for the beginners well now let's try to address this one after the other let's start by creating a flutter project let's name a f project and hit enter now we have the basic counter example lab up and ready let's get rid of these commands let's remove this homepage class and create a separate folder called presentations inside which we have the screens inside the screens we have the homepage here inside the homepage we have a stateless wi class with an empty scaold here inside the perspect we need to add two dependencies one is going to be the five base Analytics and second is going to be the Firebase core after adding these two dependencies now let's head back to the main. file here inside the main file the home points to homepage let's try to rename this homepage to the inl page because we already have a tab called homepage right inside bottom navigation back so we don't want to have any naming conflicts right inside our implementation process so let's try to name it as the inel page here inside the inel page let's try to build up the basic UI part now let's try to convert this stateless widget class to a stateful widget class and here inside the screens let's try to create indidual dot files for home page business page and the profile page let's group them under the bottom navigation barcor screens folder here we have three different dot files each corresponds to homepage business page and the profile page and the skeleton is going to be very simple we have a column widget which connect the icon as well as the text widget which corresponds to that particular page right so these are the three basic Pages which you are going to have for our bottom navigation bar first let's start by creating few variables here we have the selected index which is going to hold the current selected index of the bottom navigation bar by default it is set as zero secondly let's try to create a list called the page NES and finally we once again going to have a list called the widget options which is going to hold the class names of homepage business page and the profile page following which right inside the scaffold let's start by building up the app Bar following the app bar inside the body let's try to define the widget based upon the index item which is being selected in the bottom navigation bar finally right below the body we need to define the bottom navigation bar which takes the bottom navigation bar widget here we have three items the first is going to be the homepage followed by the business page and finally we have the profile page and if you want to customize your bottom navigation bar you can also provide the color for the selected item and we also set the current index variable which is the selected index which you have defined at the very top and finally we need to define the on Tab call back function here inside this function we make use of the set state in order to update the state based upon the user events now with this we have almost completed building up the basic UI part for our FL app and all you need to do is we need to create a project in Firebase and try to integrate our flter app and the Firebase so let's try to do that here inside the Firebase let's try to create a new project we need to provide the name for a Firebase project and hit continue and here make sure you enable this Google and for this project if you already have a Google analytics project you can select that or if you want you can create one by heading over to the Google analytic console and finally create project with this we have successfully created our fbas project now we need to integrate this fbas project with our flra integrating a f app and Firebase is now easier than ever before with just three simple steps we'll be able to inte our fatra and Firebase and if you remember we already made a simple video about how to integrate our fatra and Firebase where we explain step by- step process of integrating a fret app and Firebase in just three simple steps and if you're new to this video or if you have missed that previous video I recommend you to watch the video for integrating your fret app and FAS in most easier way I will also leave the link for that video at the Cod to the top right as well as in the description now for integrating a flutter project you can just click this flutter icon and you see that we just have three simple steps for integrating a FR app and five base as I have already installed this fbas CLI let's click next and try copy this and head over to the vs code now paste that code here and at the root of your federal project directory we need to run this command so let's copy and paste it over here all right now let's hit next and here we need to update the main. file say the main file let's update the run method with this we complete integrating a flat R and Firebase now let's turn our focus in writing the logical part for sending data right from fatra to the Google analytics and here inside the Firebase console under analytics tab you can click this dashboard to view the logs which is been recorded from your flra right now we haven't integrated or written any custom events for recording any user engagements and that is the reason you don't see any logs here inside your Firebase analytics dashboard once we try to create custom events or run our app we'll able to view few demographic information which is been recorded by the Firebase analytics by default and if you want to see real time or R activity data you can this click this view more in Google analytics because Firebase analytics actually runs on top of Google analytics here inside the Google analytics can head over to the reports Tab and inside the real time you will be able to see the number of users who are currently using your app right now we are not running the app so you don't see any information here now let's try to restart our app and if you now head over to the Firebase analytics you will see that since since our app is running in real time you'll be able to see a log being created here inside the Firebase analytics dashboard we have one active user and by default the Firebase analytics is able to record few of the user attributes like the first open the screen view session start and the user engagement if you click this first open basically it provides with few other attributes so these are the basic attributes with the Firebase analytics records by default you don't need to write separate code for monitoring or recording these set of informations and what we left behind is that we need to write custom events in order to record the number of page visit count for business page homage and the profile page let's try to focus on that here inside of letter project right inside the initial page you need to create an instance for Firebase analytics after which in here inside the unit State we need to make use of the set analytics collection enabl and passing the boan variable which is true once it is done you ins the ont call back you need to write a custom event wherein we pass the attributes including the page account and the page name so here in see the on TP event let's make use of the log event method so this log event method we get as a result of the installation of Firebase analytics package here ins the log event method we will pass two attributes one is going to be the name and second is going to be the parameters which is going to be in the key value pair he pass two attributes one is the page name and the page index so page name is basically we what we have defined here so home page business page and profile page just to make it more human readable in the Firebase analytics dashboard so we pass the page name as well as the page index which get which we get as a result of the selected index tab now with this we have completed creating a custom log event here in the Firebase analytics dashboard with the name as the pages track and if you now restart your app we should now be able to view the page account being displayed in the Firebase analytics dashboard here inside the Google analytics dashboard if you scroll all the way down under the even section you don't see the the custom event listed out here the event name which we have provided is the pages track but we don't see them listed here there might be mle factors which are involved in making your custom event getting reflected here in the dashboard basically it may take around 30 minutes to 1 hour for the Google Antics to show custom events in the dashboard or secondly we need to name our custom event as simple and meaningful because if we try to provide a lengthy name for our event then that might violate with the Google analytics Tools in such cases your event may not be listed or recorded here in the dashboard so make sure you provide your event log name small and meaningful in the snake syntax or as a final option you can stop your app uninstall it and reinstall it again to see the changes getting reflected in the dashboard if none other thing works you can head over to the Firebase console under analytics you'll be able to see the debug view here inside the debug view un like Google analytics dashboard you should be able to see the changes getting reflected in real time but right now we don't have any registered devices to show the debug view now let's try to register app and try to view the changes here in the debug view let's try to enable the debug view for our mobile app since we're using iOS device for this project we need to open the iOS folder in xcode just right click it and try to open in xcode here inside the xcode click product scheme and edit scheme under the Run section here we have the arguments under the arguments click this plus icon and say the debug enable flag now if you run your FL project from your X code you should be able to see the changes being displayed in the debug view of your Firebase console and as you can see that inside the Firebase console here in the debug view you'll be able to see the blogs being recorded in real time if I try to change the tabs here in the bottom navigation bar those things should be reflected here in the debug View and see that our custom event name is going to be the pages track and since I have clicked this Pages multiple times you see that Lookouts being created here with this if we now head over to the Google analytics dashboard previously we don't see the pages Track event getting displayed here but now we are able to see the pages Track event getting listed down here in this list if you click this Pages track the two parameters which you try to pass is the page name and the page index and you can also see them getting listed down here and under the page name we have even count as n as you click this it tries to show individual page conss for each of the three pages including the business page profile page and the hom page and with this data you can now infer that the home page has got two page visits and the profile page has got three page visits and the business page has got four page visits if I try to once again click this business page again it should now change from four to five as you can see it has changed from four to five so this is how you'll be able to record your user events and other user behaviors in real time with the help of Firebase analytics so this is one simple example of how to use Firebase analytics in order to record the page visit count for your mobile app and if you want me to make more detailed tutorial about this Firebase analytics let me know them in the comments below and if you find this video useful consider subscribing to my YouTube channel and I will see you again in the next [Music] [Music] one

Channel: vijaycreations

Views: 9,098

Keywords: Integrate Flutter app and Firebase, FIrebase analytics, google analytics, google analytics in flutter, integrate google analytics with firebase in flutter, flutter and google analytics, how ot add analytics in flutter apps, adding firebase analytics in flutter, how to integrate analytics in flutter, flutter analytics, adding analytics in flutter, firebase analytics, app development, how to get started with flutter, mobile apps, flutter tutorials, flutter notifications, animation

Id: hMUO8Vz-z0E

Length: 16min 47sec (1007 seconds)

Published: Mon Aug 28 2023