1-click Analytics Integration in Hybrid Apps

I often hear from clients after they’ve taken the time to add Telerik Analytics to their app that it was so easy and the data they got was so valuable, that they don’t understand why they didn’t do it a long time ago. Honestly, I don’t really understand that either and I always say the same thing: the longer you wait, the less data you’ll have to act on…

In this article I’ll show you how you can add Analytics to a Hybrid AppBuilder project using any of our development environments: AppBuilder in the browser; the desktop client; and the Visual Studio Extension. If you prefer to work on the command lins, I’ll also show you how to use this as well.

Besides the simple integration I’ll give you a few hints about what to expect after you have done the integration. I’ll also answer questions like: does Analytics work in the Telerik AppBuilder on your smartphone? Where can you see the data? Why is it not there? How to add your own custom measuring points?

You can use Telerik Analytics in nearly any development environment and with any mobile, web or desktop application. We have source code implementations in C++, Java, C# and JS for the same-client side functionality that we have compiled to monitors for most platforms.

AppBuilder in the Web Browser

Let us first create a new Hybrid app in AppBuilder:

After the new project has loaded, click “Analytics” in the left-side menu:

image05

In the next view, simply click “Enable Analytics”:

Now wait a few seconds, until this dialog appears:

Here you can configure Analytics to monitor extra information besides the basic information (users, sessions, location, OS, versions, etc). I would recommend you select both options as shown below and then click “Done”.

Once the dialog is closed, you’ve completed the integration of Analytics and you are ready to collect and analyze usage and error data from your application.

What has happened behind the scenes?

First of all, we have configured our Telerik Analytics servers to receive data from your app which is uniquely identified with its App ID. You can see that here:

We’ve also have added the Telerik Analytics plugin to your app. Telerik offers a directory of Cordova plugins that have been tested and verified. They can be downloaded via the Verified Plugins Marketplace.

If you double-click on “Plugins” in the “Project Navigator”, you can see the Telerik Analytics plugin at the bottom of a long list of plugins that are enabled:

If you ever wish to remove Analytics from a project, this is where you can do it simply by deselecting the Telerik Analytics plugin.

The last thing we have done is to initialize the monitor with the App ID, calling “start” on app start-up and “stop” on shutdown. This is taken care of in the plugin, so you don’t need to think about this aspect, but if you use our C# monitor for a desktop .NET project, for example, then you’ll need to do these steps manually.

After integration – now what?

The next step is to verify that everything works – as in, data is being collected and sent to our servers so it can be analyzed in the Analytics dashboards.

If you run your app in one of the simulators, then it won’t work because plugins are not supported. The app will run, but nothing will happen in relation to Analytics. The great thing, however, is that this will actually work in the Telerik AppBuilder Companion App on your smartphone in the upcoming 3.3. release. For now you have to build your app and deploy it to your phone to test and use Analytics.

Run the app in the Companion app.

Now click Analytics on the left side menu and go to “Live” under “App Health”. If you’ve never previously used Analytics in your app, then you will see a page like this showing no data:

It typically takes less than 5 minutes before your first session with data is received and processed by our servers. Once we have received initial data from your app, you’ll see it like this:

At this point, you could go to the “Location” report and see where your phone is located. Remember to turn on “Live Mode” to see the recently received data:

Here are some things to check if you don’t see any data after 10 minutes:

  • Does your phone have a connection to the Internet?
  • Did you deploy the right app?
  • Are you looking in the right app project in the Telerik Platform?
  • Try to run, start and stop your app once more (and wait another 10 minutes)

If you’ve verified all of these items but are still not receiving data, even though it may be frustrating, wait some extra hours and then check in the “Live” report again. Occasionally the processing of data can be delayed due to database maintenance jobs. You can also feel free to check out our support resources.

The AppBuilder Desktop Client

This section will show you how to follow the same steps using AppBuilder desktop client. As you will see, everything is pretty much the same, so this will not be long.

First let us create a Hybrid app like we did in the browser example:

Once your new app has loaded then double click on “Plugins” in the Project Navigator and scroll down the list until you see a button named “Install from Plugins Marketplace”:

plugin-list-desk

Click “Install from Plugins Marketplace”. In the search box, type “Analytics” and then click on “Telerik Analytics” in the list on the left, after which the “Install” button will be presented:

Now install the plugin by clicking “Install”. When you see the configuration dialog, simply enable the two options and click “Done”.

That’s it – the Telerik Analytics plugin is installed and you are ready to go!

But where does the data go? If you log in to Telerik Platform in the web browser, you’ll see your new app and here you can access the Analytics data. The AppBuilder desktop client does not have direct access to your Analytics data – this is available via the web browser.

The AppBuilder Visual Studio Extension

In the Telerik AppBuilder Extension for Microsoft Visual Studio you can also add Analytics to your Hybrid projects with little effort.

First let us create a new Hybrid project:

Once your project has loaded, right-click on the project node in the Solution Explorer and then select “Manage Packages”:

Select the “Plugin Marketplace” at the top and then search for Analytics in the search field:

Now simply install the plugin by clicking the “Install” button. Click “yes” when you see the below dialog to continue configuration:

Here you have the ability to either use an Analytics project that you may already have or create a new one. I have chosen the latter:

The last step is to select what kind of data you wish to track besides the basic information that is always tracked:

That’s it! The Telerik Analytics plugin is installed and you are ready to go and you can access the data through the Telerik Platform in a web browser.

The AppBuilder Command Line Interface (CLI)

Adding Telerik Analytics to a Hybrid app via the command line is also very simple. As in the other development environments it is simply a matter of adding the Telerik Analytics plugin to your project and the configure it.

But to receive the data and view it you also need a Telerik Analytics project. Follow the steps described in the beginning of this article in the section “AppBuilder in the web browser”.

Once you have done this, you’ll need to get the Analytics Project Key (not the same as the App ID) which you will use in the AppBuilder CLI project. You can get the Project Key here:

project_key

Now create a new project with the following command:

appbuilder create hybrid 1-click-integration-CLI

Note that “1-click-integration-CLI” is just the project name I chose. Now change the current directory to the one you created and then add the Telerik Analytics plugin by running the command:

appbuilder plugin add "Telerik Analytics"

Reply “Y” to the first two questions and, for the PROJECT_ID question, provide the Project Key that we copied from the new Telerik Analytics project we created:

cli_questions

You’re all set! Now when you run the app in your AppBuilder Companion app or as a compiled app that you’ve deployed to your smartphone, usage and error message will be collected for analysis through the Telerik Analytics dashboard within the Telerik Platform.

Custom Measuring Points

The Telerik Analytics plugin has an API that you can access. Through this API you can add tracking for custom measuring points. For instanc, you could add code similar to this in your project:

// Track feature 
window.plugins.EqatecAnalytics.Monitor.TrackFeature("Category.SubCategory"); 

// Track value 
window.plugins.EqatecAnalytics.Monitor.TrackFeatureValue("Imaging.FolderSize", 2000); 

// Track timing window.plugins.EqatecAnalytics.Monitor.TrackFeatureStart("Imaging.ProcessFolder"); window.plugins.EqatecAnalytics.Monitor.TrackFeatureStop("Imaging.ProcessFolder"); 

// Track exception
window.plugins.EqatecAnalytics.Monitor.TrackExceptionMessage(ex, "Context info"); 

It is outside the scope of this article to fully explain how to use the API, but there is extensive documentation about Telerik Analytics that you can refer.

Conclusion

In this post, we’ve look at how you can add Telerik Analytics to a Hybrid project through any of our development environments. Calling it “1-click-integration” is maybe a tiny bit misleading, but I’m sure you’ll agree that it’s certainly no more than “few-click-integration” – and it is something anybody can do. Try it with your projects now and feel free to reach out if you have any questions, requests or comments.

Comments