How to Use Firebase Analytics with Ionic

[Music] hey Simon is what's up welcome back to a new tutorial this one is once again a tutorial selected by the community and it is about firebase analytics inside ionic applications so we will integrate firebase into our application with an additional capacitor plugin to get the statistics lock events properties different things from our ionic app to firebase so let's do this I already did a few things so let's go through them quickly so first of all I start with a blank new ionic application type angular using capacitor and I always like to specify my package ID right in the beginning so you usually should know what package ID you're going to use this will actually make life a bit easier since changing the package ID after you've created the native platforms with capacitor is a bit more challenging so then go into your project generate a new service which will hold all the functionalities for analytics and then install the capacitor community plugin for firebase analytics you can find this right in the kinda a new capacitor community and so here we go there are a few steps to integrate this plugin but of course first of all install it after this first setup you can run ionic built because it's required to add the native platform since we need to customize them a bit just run one ion a built in the beginning and add your platforms so once we are done with this we can move on to firebase so I've already created a project here but you can also simply go ahead give it a name test whatever and then make sure that you add Google Analytics for your project so we can simply keep this enabled select an account and then the property in that account will be created that's basically all so this is the application I already created and from the project settings you can now add three different applications so you can add the web on the Android and the iOS just put in whatever name and it's basically all all three only for ios and android make sure you use the right bundle ID in here the rest is really optional and not important and once you get this we can get started with the web since this holds the configuration we need for the web so simply put this into your environment tea as always the best place to store your firebase configuration this configuration is actually only used on the device and I just noticed I have also a second page in my applications so I think there was not in our initial script but I'm pretty sure you know how to create a second page this is only used for the web for iOS and Android we need a little bit different approach so for iOS there's this Google service info.plist and for Android Google services JSON file that you can download from here both of these files need to go into the native folders of your application so for Android it's actually quite easy just navigate to Android app and then put the file right here so just into Android slash F that's all you need to do for Android first step the second step for Android or well let's just stick to the files for iOS it's a bit more challenging since you can't just copy the file in here but you can run npx kit open iOS and then let me see if I can find the file somewhere so I can show you how it should look like so you open Xcode and you really need to copy this file into Xcode so inside the app app folder you can drag your file and make sure that copy items if needed is checked because that's just important I'm not sure what magic is happening inside Xcode but it's important that you check this and then the Google service info.plist will be in here so P list for iOS JSON file for android for iOS that's basically all for now for Android we need to take another step so go to Android source main and then this is usually the package ID of your application so in my case it's comdev tactic analytics where you can find your main activity this is really used for all capacitor plugins you import the actual capacitor plug-in so this line is added and then you add the firebase Analytics class within this initializer there's always the information on the plug-in page so you see import and add that's really the the steps you always need to take for Android no other configuration is needed that's great news and then we can continue with our analytics service because I think it's a good idea to put all of our logic into one class so you can use it from everywhere in your application because your use case will be different so let's go through this first of all let's create a function function I'm not sure what's wrong today with me and let's call this init firebase and that's actually only called for the web since on the web we need to use our firebase configuration and therefore we can import first of all the plugins from capacitor core and then we can destructure the object into device and firebase analytics so that's the new plugin that's a core API and with the help of our core API we can check if a wait device that get info which is promise so you need a few brackets in here I hope you can see this so the weight is basically for this call and then we can use the dot on this because then we already got the value in check if we're running on the web and then we use our firebase Analytics to there's no code completion that's really sad it really makes me sad initialize firebase with the data we have stored in our in vironment so make sure you're not selecting environment prot just select the environment from the folder that's all you need that means for the web we're now initializing our analytics with this call now there are a few functions on firebase analytics that you can use and I will just bring in a few help of functions so we can see what's going on first of all said user in our simple example I don't really have any user ID to identify the user but if you have some kind of authentication system that's the perfect place to use the unique user ID from firebase so then you can track all events related to one user you can use this in combination later with push notifications so it really makes sense to automatically set the user perhaps after the login then you can simply set properties on the current user I just use this one I think you can have 25 unique properties per project so don't use anything keep keep a few of them like has seen my intro has locked in has created an account purchased something anything are really more on the top level so not super small things then of course one main function of these tools is always to lock an event there are already within your higher project a firebase project few events recommended so within the in oolitic step you can go to events and up here you would see a few recommended events like sign up log in share tutorial begin whatever and to use them you just need the event name and you can check right here which parameters are passed to this in this case only in the method and for us it looks like this lucky event gets a name and an object of params and we just set the method to email so on that way you could track different events or lock different events in your application next one set screen name that's actually an interesting one which is only supported on Android we can see this from this handy view right here set screen name not supported on the web I don't know if we will be supported but for now it is not supported so this will only work on iOS and Android I will tell you a little bit more about this in a second let's quickly cover chaga analytics perhaps give some legal requirements or in general you perhaps disable analytics in the beginning but then you can use firebase analytics set collection and abled and this is basically true or false I just kept this in a variable right here so let's set this to true and then whenever we toggle them we just swap them to false or switch them to false now back to set screen name I think this really makes sense if we combine it with the angular router although the router doesn't offer too much information we can actually get a bit of information so what I did in my testing is I came up with this little snippet here of course we need filter from rxjs operators and we need router event from angular router and navigation and from angular router so we filter for all the navigation and event which basically means we've changed the URL in our application for single page application like angular applications it's always hard to trick the right page views and by subscribing to the router you can actually get the different events now you only don't have a name of the your else so that's really just the URL I don't know in how far it will be helpful perhaps you could also access your actual routing set up and grab the component name from there because usually if you look at other tutorials they will have not only screen name oh come on I was okay I thought I could dive into the package so they have something like overwrite anything another property but that's not really mandatory you can just use the screen name so I will just use this one okay great now we need to make sure that our analytic service is actually used within our applications so we will do this within our home page so let's use the constructor and then we could actually save this we can't really create or test anything simply because we haven't added the buttons and within the debug view we should see zero devices so that's the view we are actually going to use it's not that you don't see any data for the testing inside your dashboard or we might see something but this happens like a few hours later or even a day later and this is also kind of strange it's always till the last 28 days which excludes your current date so make sure if you're looking for something change this to today in all the views so let's quickly add a few functions that make use of our service so like set user set property luck event and also reflecting the status off of the enabled variable let's just can I just use the analytics service come on what's the code completion today okay what's my fault sorry so we can toggle it as well let's move on to the home page because we're just really making use of the stuff we created in the service there was really the most important part this is just to set user set property look even router linked to the second page as I said if you don't now to do it ayane generate page inside the pages fall or second and then you got your second page and if you also want to go back from the second page simply add an eye on button for me this is really just like standard stuff so I hope I'm not too fast in this well part of the tutorial so there we go our implementation now thanks get tricky because I will try to show you the other view right to this and I'm actually not sure if it will work so first of all when I tested these things you click this you click this and the live reload is out of sync yeah let's just bring it up again so you click it and you basically get no luck although we got an error at this time and to get debugging within the webview there's actually a plug-in let me where is it there we go it's inside the chrome store Chrome Web Store so the Google Analytics debugger I've added this to Chrome and once you get this you got this icon I'm actually not sure why it looks like I have no idea what it looks like but it doesn't look that good so turn it on and then we should hopefully be able to see some events within our debug view when the application comes up because otherwise you don't really get any response and the regular events um take like a few hours to appear actually inside firebase so if you hello please I did everything does not have a rep implementation oh that's great their error is actually great whenever uses a capacitor plug-in and you want to use it on the web you need to add one more thing and that's importing the actual plug-in like this so without this line the plugin is not registered for the web and now we should see that the error is gone right now zero change and a lot of commands right here let me for testing also disable this then we we can click these things and we don't really get any response we have no idea if it actually worked so that's why I installed the Google Analytics debugger in the first place now with that enabled we already see a lot of things going on so many things Han right now we see a debug device not sure what's wrong with a font in here first visit page view session start let's try and randomly click on everything that we got and I'm actually not sure how well this works I've seen it come in instantly right here and I've seen the events come in like not at all so debugging all of this was really challenging when I try to create this we definitely see that it's possible so our app is connected and we see stuff going on in here but sometimes I feel like I feel like the debug are here or the debug life view is like not connecting the events at all and I have no idea why it's not working this is really the annoying part and it took me like the morning but I've definitely seen everything that I did in here already within the view here so in the beginning I had connected it kind of wrong but eventually I figured everything out and I created a new product and then I definitely saw them of course they're not happening now while recording the video but usually you should see them in the debug view within the stream view you should also see your users but I think while we were in debug view this actually doesn't appear here but for real uses that will also be the place to see all the latest stuff going on so maybe I can somehow fix this otherwise we continue for now with a bit more of the native implementation yeah well let's just go to the native apps so if you want to build your native application simply go ahead and px no actually ionic built and npx kept saying this will build your application sync the web code to the native platforms now there are two things for one thing for each platform so for iOS you need to open Xcode and from the top menu which you can see in my screen you need to select product scheme edit scheme and within the run configuration arguments so it usually starts here go to arguments at this little fear debug enabled while this is enabled the iOS application will always immediately send all events to firebase so that helps and your application should appear right here in the debug view for Android there's also something you need to do and that's running a little command which I've stored somewhere so while your device that's iOS that's the Android device while your device is connected you need to run adb shell set properties debug fire store analytics app followed by your package ID in my case this would become defective analytics in your case it is of course your very own package ID so use this one if you're done with debugging you manually need to set this to none and the same counts for Xcode in which you need to go to the scheme bag and then I think you need to add it like debug disabled yeah basically like this just you do it right ok now right yes no everything's gone so you would replace the enabled by disabled so that would be the trick now let's check if the build is done it's actually done so we'll just deploy it to let's just use an iPhone we will check the debug view again all right the app is running on the iOS simulator and now I got two options I don't know why I got two more options but we see a bit of stuff going on and the screen view is actually interesting because the screen view is what is triggered when our screen changes so squid screen name should be this event let's try to keep this a bit smaller and somewhere inside the date yeah now we see now navigating to the empty route and hopefully this one was navigating hello where's the value well well well as I said I'm really not a huge fan of this view and I don't know why I got a second emulator here at least you see that we have said a user property framework to angular that's good news the screen view there we finally see we navigated to the second screen at that point we got user engagement which is basically like tapping in the application the lock event is right here so we used the login and method email so all the data we had in our application are now right here within our debugging view we've set the user ID to test so actually all information is here maybe I just picked the wrong device so maybe it's better than I think for Android I would actually recommend she just run the live reload and then from Android studio deploy to your application to your device and then you should be fine as well so that's already the end the implementation of firebase analytics in your ionic application with capacitor isn't too hard or you just need to copy the basically the two files from your firebase project into the native folders and that's mostly all for the connection then you just need to find a way to not blow up your complete code and just put in events in the right place perhaps you don't need to subscribe to the router and see everything going on and just lock the important events when somebody is interested in a specific news project topic anything like this so keep it to relevant data use authentication information from firebase if you're already using it anyway and otherwise let me know if you get any other questions about firebase analytics in your eye on a project if you enjoyed this video please hit the like button and stay subscribe so you get notified about all the new tutorials quick wins and other app development and web development videos on this channel if you want to learn more about ionic with in-depth courses a community of like-minded developers so you can learn and build your apps faster you should definitely check out the ionic academy which is my code school to help you with everything ionic with a huge library of courses material and a supportive select channel so we can get your app out I hope you enjoyed this video I will see you inside the next video have a great day and happy coding cyber [Music]

Channel: Simon Grimm

Views: 7,150

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial

Id: _mks8zECJ7A

Length: 23min 6sec (1386 seconds)

Published: Tue Aug 25 2020