Firebase For Hybrid App Tracking: An Overview
In my previous post I talked about getting up and running with Firebase Analytics for mobile apps. There is a big caveat there though, which is that those instructions only apply to fully native apps. If you want to track engagement in your app and it is built with PhoneGap or some other hybrid framework, this post is for you.
This post also assumes you are familiar with configuring Firebase Analytics. If you’re not, check out my previous post on Getting Started with Firebase Analytics for Apps.
What is a Hybrid App?
Unlike native apps which are built entirely with a native development language, such as Java for Android or Swift/Objective-C for iOS, hybrid apps are web apps that are built with HTML/JavaScript and then wrapped inside of a native framework. This provides a means to accessing device functionality (such as using the phone’s camera, geolocation features, etc.) without the need for writing native code.
The parts of the app that are built with HTML/JavaScript are often referred to as WebViews. In some cases, apps are built primarily with WebViews and very little native functionality. In others, the app functionality may be equally built upon WebViews and native functionality – it all depends on the app.
Can We Still Use Firebase?
Yes! In fact, we generally recommend using Firebase for all event logging even with hybrid apps – we just have to take some additional steps to account for activity in WebViews.
Hybrid App Tracking Strategy
There are a few potential methods you could use for tracking hybrid apps, and often the best approach depends on the amount of WebView vs native content and features you’re looking to track, as well as whether you’re looking to use Firebase or Google Analytics. For our purposes, our focus will be on what we typically recommend, because this approach will allow you to take full advantage of the features of Firebase, ensure consistent tracking, and allow for dynamic changes to be added.
What we’ll ultimately be doing is creating some functionality to pass activity from the WebView side of an app to the native side, and then utilizing Firebase to log all events from the native side as we would with a fully native app.
This allows us to use Firebase to log all events. Without this method of passing data from the WebView to the native side of the app, we would have to rely on a web GTM container in the WebView (because it runs on HTML/JavaScript) and a separate Firebase GTM container in the native side of the app. You can probably imagine how messy this could become, particularly in dealing with the client id…
The general steps we recommend for hybrid app tracking are below.
Make Sure You Have Installed Firebase & GTM
If you have not created a Firebase account already, you will want to do that. You will also want to install Firebase and GTM into your app (on the native side, specifically). If you’re unsure how to do that, refer back to steps 1 – 3 of this post on Getting Started with Firebase Analytics for Apps.
Make sure you have your Google Analytics property for your app data ready to go as well.
Determine Which Activities You Want to Track
After you have decided upon a measurement strategy, you’ll need to determine whether those activities you want to track take place within WebViews. Depending on your organization, this might require reaching out to developers. You may find that most activities occur within WebViews, or you may find that some take place on the native side as well – make a list of the items that are important to you and whether they are native or web-driven. This will be helpful in troubleshooting as well.
Pass Data from WebViews to the Native Side
For those activities that occur within WebViews in your app, configure those WebViews to pass data related to those activities to the native side of the app.
Google also recommends this method, and has actually provided documentation (and full code examples!) for WebViews in iOS and WebViews in Android. I won’t get into the weeds there since the documentation is pretty solid, but essentially what you are passing from the WebView to the native code is a JSON object full of your event parameters, which would then be read and logged to Firebase via a native handler. Review the guide relevant to your app to see full code examples.
This is how we enable event logging to be done entirely via Firebase, and we prevent challenges that would arise if we were using Firebase for activities in the native side of the app and a web GTM container for activities occurring in the WebViews.
Events are passed from the Webview to the native side of the app, then handled like normal.
Log Events with Firebase
Once you have passed the data to the native side of the app successfully, you can then utilize it to log events with Firebase.
Google’s documentation also provides specific examples on invoking the native Android code to handle Firebase event logging:
For more general information on logging events with Firebase, refer back to the other blog post (step 4) I mentioned already.
Log Native Events with Firebase
For those activities that occur on the native side of the app (if any), follow those same steps to log events with Firebase.
Remember that you can log events to Firebase and also collect that data with Google Analytics screenview / event tracking as well. All of those instructions are provided in my earlier post too.
Summary
The key to setting up tracking for hybrid apps is to first identify which activities actually occur on the native side vs in the WebViews, and to pass information about those activities that occur on in WebViews to the native side of the app so that all event logging can be handled with Firebase.
This has been the most efficient method that we have found for hybrid app tracking as it allows us to utilize Firebase as though we are working with a fully native app – it provides a more streamlined approach to logging events and enables us to take full advantage of the features of Firebase Analytics.
