How To Add Appsee Analytics In Your PhoneGap App?
Mobile app analytics are very helpful for companies to understand the customer buying journey and the user flow. Analytics also help to get a bird’s eye view of a customer and realize exactly how the customers/users are experiencing the app? Appsee is a good tool to integrate in your app for analytics. It is the market leader for qualitative analytics, and provides you insights with “whys” like customer behavior, expectations from the numerical data on your app.
Appsee delivers a unique feature for recording user sessions & touch heatmaps to gather the most actionable insights and take better informed decisions regarding your app’s UI, performance, and usability. Basically, it helps you dive deeper into your app’s user experience and dissect your data for critical answers. The analytics solution automatically detects all app screens, buttons and user actions without requiring you to select what to measure and also tags them in advance in your code. Fortunately, Appsee supports all apps built by a PhoneGap developer and also offers simple app integration.
Let’s look at how to integrate your PhoneGap application with Appsee in 2 easy steps.
First to integrate Appsee, you need to use npm plugin by following below steps:
1. Add the Appsee plugin to your project: phonegap plugin add cordova-plugin-appsee
2. Call the following method when your app starts, preferably when the deviceready event fires: Appsee.start("YOUR API KEY");
This is how your code will look like:
var app = { // Application Constructor initialize: function() { this.bindEvents(); }, // Bind Event Listeners // // Bind any events that are required on startup. Common events are: // 'load', 'deviceready', 'offline', and 'online'. bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); }, // deviceready Event Handler // // The scope of 'this' is the event. In order to call the 'receivedEvent' // function, we must explicity call 'app.receivedEvent(...);' onDeviceReady: function() { app.receivedEvent('deviceready'); }, // Update DOM on a Received Event receivedEvent: function(id) { var parentElement = document.getElementById(id); var listeningElement = parentElement.querySelector('.listening'); var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;'); receivedElement.setAttribute('style', 'display:block;');
Appsee.start("d3y87d2h723dh8237hd7823"); } };
Example of Appsee’s User Recordings:
Example of Appsee’s Unresponsive Gesture Touch Heatmap:
Conclusion:
Sounds pretty easy right? Well, we thought so. Once you are done completing those two steps you are good to go. You would now start to see your app’s user sessions get populate in the dashboard in real-time. This data will provide powerful insights on your app’s users, which you can use to optimize and troubleshoot your app effectively, and ultimately create the best mobile product possible.
Did you face any problem for integrating the code? Drop your thoughts in the comments below.