Firebase for Hybrid App Tracking: An Overview

/

firebase-hybrid-apps-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.

01-create-firebase-project-768x498 (1)

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.

Firebase Webview Event Tracking

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.

Mobile2

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.

Amanda Schroeder is a Senior Consultant and comes from the marketing industry where she found a need for accurate, insightful data that could aid in making results-driven decisions. Amanda’s passion for building solid measurement strategies and connecting all the pieces of integrated digital and traditional marketing campaigns has led her to her current role at LunaMetrics.

  • David

    Any solution for Progressive Web Applications (no phonegap)?

    • Amanda

      Hi David,

      I am new to the Progressive Web App space, but I believe that these are powered primarily by JavaScript, correct? In that case, you might want to explore the Firebase.js library –

      https://firebase.google.com/docs/web/setup

      Or maybe even good old analytics.js?

      I’d love to hear your thoughts.

      Amanda

      • Amanda

        David, quick update here – I have found that the Firebase.js library does not offer analytics, unfortunately. You may need to use the legacy GA SDK after all, though I’m hopeful for a Firebase solution and will keep digging.

  • Sneha Palav

    We can test hybrid applications on firebase for e.g. coredova?

  • Jerry Books

    Hey!
    I Just wanted to share my experience with selecting a mobile backend for my app. I used to run my applications (I have several in the app store(s)) on Parse and was pretty happy with the backend until Facebook decided to shut down the service. After that I have evaluated all listed options and was not happy with any of them for various reasons. Firebase was not a good fit because the of their approach with JSON document being a database – I did a stress test with million nodes in the tree and the service was not performing well. AWS is quite complex and becomes expensive very quickly while Azure is quite limited in the capabilities. Kinvey is both limited and super expensive once you start doing something more serious in the app. In the end I chose Backendless (https://backendless.com) for my backend. The service has native SDKs for all major mobile and web platforms. The usability and developer experience is by far the best I have seen. The service has an extremely flexible server-side code model where I can deploy Java and JS server-side code to override default handling of the API and to create my own API services. My apps leverage social (Facebook, Twitter, Google) login, geolocation, file upload/download, push notifications (iOS, Android) and of course data persistence, which has really awesome support for complex relations. Check it out if you are looking for a flexible and very reasonably priced backend.

  • Jerry Books

    Hey, guys.

    I’ve used to run my app with Parse and was a very happy user. And got really bummed out when Facebook decided to shut it down so I migrated my app to Firebase. However, in the end, it didn’t work out, coming from Parse the whole “json-file-as-a-database” approach is rather different and is quite limiting for what my app needed to do. I decided to try Backendless (https://backendless.com) and was extremely pleased with it. The development model is very similar to Parse and they go way beyond on the features and the capabilities of the system. Support for related data is fantastic and I can add my own server-side logic with JS. Configuring security for your data is very straightforward and I didn’t need to learn any new formats for it. Was able to migrate in under 6 weeks. The support team is very responsive (compare to Firebase where getting a response from the team is akin to winning a lottery). Hope this feedback will be useful if you consider migrating off of Firebase.

  • Jerry

    hey,
    can i know how to use Hybrid app tracking through firebase+GTM+GA.
    I need to know the exact step to understand it properly

Contact Us.

Follow Us

1.877.220.LUNA

1.412.381.5500

getinfo@lunametrics.com

Questions?
We'll get back to you
in ONE business day.
Our Locations
THE FOUNDRY [map] LunaMetrics

24 S. 18th Street
Suite 100

Pittsburgh, PA 15203

THE STUDIO [map]

4115 N. Ravenswood
Suite 101
Chicago, IL 60613

THE LODGE [map]

2100 Manchester Rd.
Building C, Suite 1750
Wheaton, IL 60187