Use Google Analytics In An Ionic 2 Android And iOS App

If you’re making a great app chances are you’re going to want to know who else thinks its great.  This an be determined by how many people are using your application, what they are doing within the application, or how long they are using your application for.  This data can be tracked in iOS and Android using Google Analytics.  We are lucky enough to be able to use Google Analytics within an Ionic 2 mobile application.

If you’ve been keeping up with my blog you’ll know I wrote about using Google Analytics in an Ionic Framework 1 application.  This time we’re going to see how to use Google Analytics in an Ionic 2 application with Angular 2.

To get the best idea on how to use Google Analytics within our application we’re going to create a new project.  From a Command Prompt (Windows) or Terminal (Linux and Mac), execute the following:

We need to note two things here.  First, you must be using the Ionic CLI that supports Ionic 2 applications.  Second, if you wish to add and build for the iOS platform you need to be using a Mac.

To use Google Analytics in our project we’re going to make use of the Apache Cordova plugin by Dan Wilson.  It can be installed by executing the following:

This will install the plugin for both Android and iOS, assuming of course you’re on a Mac if you’re shooting for iOS.

We’re going to spend our time in three different files.  We’re first going to initialize the plugin in the project’s app/app.js file and then apply page specific tracking in the app/pages/home/home.js and app/pages/home/home.html files.

Starting with app/app.js we want to add the following code:

Specifically we’re looking at the following:

Because the plugin for Google Analytics uses native code, we must first make sure the Apache Cordova application is ready to use it.  Once the application is ready we can start tracking.  Make sure you replace UA-XXXXX-YY with your actual tracking code.

Now we want to add page specific tracking.  Starting with the logic file, open your project’s app/pages/home/home.js file and include the following code:

When the page loads we want to tell Google Analytics where we are.  This is why we call trackView from the constructor method.  You can label the view whatever you’d like.  I chose Home Page because that is the specific page we’re on.

We also have a trackEvent method.  When this method is executed we will tell Google about it.  This function could be useful if a user attempts to log in, or some other action by the user.

Finally let’s look at our project’s app/pages/home/home.html file which will contain all our UI data:

This is our most simplistic file.  We essentially only have a button.  When the user clicks the button, it will trigger that event based tracking function that we designed.

Now there are many more types of tracking that can be performed, but for the most part they can be used in the same fashion that we’ve just seen.  For this reason, I’ll leave the rest to your imagination.  If you want to see the other functions, you can visit the official plugin documentation.

Conclusion

Tracking Android and iOS application usage is not only important in the success of an application, but it really isn’t difficult to do using Ionic 2.  In fact, it really isn’t too different than what we saw in the Ionic Framework 1 writeup I did a few years back.  The only difference is in the use of Angular 2 rather than AngularJS 1.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • chris

    Hi Nic. How does it work if the app is offline? Is there a way to continue to track usage and update stats when the app goes back online?

    • Analytic information is stored locally and sent to the Google servers when an internet connection is available.

      Best,

      • Hey Nic,

        How can I test this? I installed it into my app per your examples. But I’m not seeing any activity in Real Time, whether using ionic serve, or on device.

        Any ideas?

        • Ionic Serve, Ionic Live Reload and Ionic View are all bad ideas since this is a native plugin.

          Assuming you are not using any of those, do you get analytics details at all or they are just not real-time? If you get no tracking information, do you have anything appearing in your logs?

          Best,

  • roseliux

    i am trying to view users id with a the addDimension, but i cant see the data in analytics, can you help me?

    • Can you share how you’re trying to use it?

      • roseliux

        before my call $cordovaGoogleAnalytics.trackView(view);
        like this $cordovaGoogleAnalytics.addCustomDimension(‘dimension1’, ‘user_’ + userId);
        and already created the custom dimension in GA configuration panel.
        Im using ionic 1 and testing the app on an android phone, the info for views is in GA but the dimension is not.

  • masimak

    Why do we use a native plugin and not just use the JS library as we would do in any website? What more does the native plugin provide?

    • The native plugin has been optimized for mobile and tracks things differently than the web JavaScript library. It is best to use the native alternative in Ionic apps whenever possible.

  • axalon

    Thanks for putting together this tutorial Nic!

    After following it however, I received this error when trying to do an ionic emulate ios:

    TypeScript error: app/app.ts(21,14): Error TS2339: Property ‘analytics’ does not exist on type ‘Window’.

    Any ideas on how to resolve it?

  • axalon

    Thanks for putting together this tutorial Nic!

    After following it however, I received this error when trying to do an ionic emulate ios:

    TypeScript error: app/app.ts(21,14): Error TS2339: Property ‘analytics’ does not exist on type ‘Window’.

    Any ideas on how to resolve it?

  • Hi Nic,

    very nice tutorial! I’m searching for a solution where I can track each page globally.

    That means that I dont have to add the trackView-method in each constructor of every page.

    In small projects with several pages it is not a big deal, but within a bigger application with 20+ pages it could become a bit messy.

    Do you have an idea how to approach this. Within Ionic there is no way to access a router e.g. compared to angular 2 itself.

    best Christofer

    • Since much of Ionic Framework is proprietary, I’m not sure this would be possible without forking the project with your own customizations.

      You really have an app with 20+ pages? I don’t think I’ve ever downloaded an app that had more than 5. Sounds like you have something interesting brewing 🙂

      Best,

      • Ok I see. Not nearly 20+ pages 😉 But when I think of doing the same procedure for each page over and over again is error prone and you could forget to track specific pages.

        I expected that there is a possibility to hook into the changing-process of the pages and add a listener which will track each page view.

        • And it worked?

          • Yes of course, take a look at the pastebin link there I shared my solution.

          • Awesome! Thanks for sharing. I’ll point people to it who have similar concerns.

            Best,

          • Michael Olukoya

            Looks like you still have to specify this.name in each of your components though? which is still abit of work..

            Another idea could be to use ViewController:
            http://ionicframework.com/docs/v2/2.0.0-rc.0/api/navigation/ViewController/

            With this.viewCtrl.name, you automatically have access to the name of the current view and no need to specify it in each component.

          • FX Lemire

            When using modals, this.viewCtrl.name will return ModalCmp. To better reflect the page being viewed, you can fetch the class name by using this.constructor.name instead. This way, you can also avoid importing ViewController when your component does not need it.

  • maheshdhakad

    hello sir this plugin is install but app is not run and show error:- Error in :0:0 caused by: No provider for GoogleAnalytics!
    please help sir for google Analytics.

    i have import GoogleAnalytics in app.js and home.js page but do not run. https://uploads.disquscdn.com/images/4172a75603937f961689ab1e108c3ba26a5fc3f65c970d4dcf9c5b7199d220dd.png

  • dimdis

    Nice post! However I m not sure about the google analytics set up. Do I have to track it like a mobile app project or a web project? In addition does it work on test apps or I must upload the app to google play? I have integrated google analytics in my code, no errors but after 12 hours i got not results

    Keep up the good work 🙂

    • He plugin uses the Android and iOS SDK. You’ll need mobile codes. It does not need to be published to work.

      Best,