Sustainable Native Firebase Analytics Event Logging from Mobile Web View
We want to see events that occur from the mobile web view as events from the mobile app. In order to log analytic events from within mobile web view, we need to forward the events to native code before they can be sent to app reports in Firebase Analytics. So the Web App and the Mobile App teams needs to work together to achieve this.
Current Situation
The Web App and the Mobile App teams have their own respective data structure for the analytics events, we call it as “contract”. For example, let’s say we want to know what products is being viewed by our user
The Web App contract is created in JSON and looks like this:
That’s the contract that will be passed to our native code and we need to map it to fit our Mobile App contract. Since we used Firebase Analytics, then the Mobile app contract (which is obviously the params that we’ll pass) is look like this:
The Considerations
In the creation, we as a Mobile App team considering several things in case we make a change in the future, such as:
- What if there is a need to make a change in the future from Mobile App side? Such as adding new params for example.
Piece of cake, just update the code and deploy the new version of the app ❌
We don’t want to release a new version of the app just only for updating the analytics events, and it leads to the second question. - How to keep the previous version of our Mobile App stay up to date when there is a code change?
Mmmmmmm…. make sure there is no update 🙃 ❌
We want to keep the current and future versions of our Mobile App have the same action and behaviour in logging the analytics events. - What if the Web App contract is change?
uuhh it’s a nightmare, if the Web App contract is changed then the previous version of the Mobile App will no longer work as expected. We need a code change to map it to Mobile App contract 😰❌
We want our mapper code can be changed easily without the need for updating the Mobile App.
The Solution
Usually, the Web App will pass the Web Contract to the Mobile App using JavaScript, then we will map the Web Contract in native code so it fit to the Mobile Contract, then log that Mobile Contract to the Firebase Analytics.
Web App → Mobile App → Firebase
But, we will separate the contract mapping code not as a native code and put it on the cloud to fulfil our considerations above. The contract mapper code will be built in JavaScript, so it can be consumed by both Android and iOS. The plus is that we only need to code once and have one actual source code. So the data flow will look like this:
Web App → Mobile App → Contract Mapper Code → Mobile App → Firebase
Please note that I will provide an example implementation for iOS, but the concept will remain the same for Android.
Passing the Event
First we need a JavaScript function in the web view to pass the event to the native code. Let’s say it looks like this:
Catch the Event
In our native iOS code, we need to implement the WKScriptMessageHandler protocol in our class to catch the Web Contract that passed by the JavaScript function in the web view, then we decode it as JSON string and pass it to our contract mapper code.
Map the Analytics Event
We will map it as a JSON string and we build it to form like this:
Here we map the Web Contract in JavaScript so it’s suits our Mobile Contract and pass it back to our mobile app.
This form will make it dynamic if we want to add some new params, we just need to use a for loop to add params to the analytics events.
Log the Analytics Event
And last we need to update our native iOS code to catch our Mobile Contract and make log for the analytics event.
That’s it! Tell me your thought about this, if you want to correct me somewhere or maybe there is another effective way other than this feel free to write some response, cheers! 🥂
