The Ionic framework is a fantastic way to create hybrid mobile apps using Angular. However, a lot of apps today want to receive push notifications and send analytics. Integrating third-party analytics and push services can be a real pain for native apps and even more frustrating for hybrid apps. Let’s take a look at Ionic.io, a service platform for push notifications and analytics that integrates well with Ionic framework.

To get started with Ionic.io platforms you’ll need an account which you can get at https://apps.ionic.io/signup. Once you have an account you can upload a new or existing Ionic-based app to the online portal using a single CLI command while in your project’s main directory.

$ ionic upload

After your app is uploaded, you can see it in the Ionic.io portal. From the portal you can send push notifications, see analytics, users and app specific data.

Push notifications, not your patience

Getting push notifications to work on a mobile app is a two part battle. First, you need proper certificates for both iOS and Android platforms. The push certificates are generated from the Apple Developer portal and Google Play Apps portal. Those certificates are required and have to be uploaded to the service sending push notifications. Ionic.io provides a simple CLI command to upload certificates for Android, iOS development and iOS production. For example:

$ ionic push --ios-dev-cert

Since you’re in your project’s directory, Ionic automatically knows which app should use these certificates. The second part is enabling push notifications on the mobile app.

const user = Ionic.User.current()

$ionicPush.init({
    debug: false,
    pluginConfig: {
        android: {
            senderId: ANDROID_SENDER_ID
        },
        ios: {
            alert: true,
            badge: true,
            sound: true
        }
    },
    onRegister: data => {
        const {token} = data
        user.addPushToken(token)
        user.save()
    },
    onNotification: notification => {
        const {payload} = notification
        // Do something with the notification payload
    }
});

Each device has an internal Ionic user in which you can assign additional attributes. Using an Angular service you provide the push configurations, assign the device token to the Ionic user and a callback when a notification is received. Notifications can have payloads that contain additional data for your app. That’s all you’ll need to configure push notifications for your app.

Sometimes the most painful part of push notifications is actually sending them. Ionic.io has a straightforward portal for sending push notifications to a group of users or a specific device based on criteria you can set. Let’s send a push notification to a group of users.

You can customize the text of your notifications and even use template tags to personalize them. Push notifications can be segmented to users that meet specific criteria. They can also be sent at specific dates and times. Once the notification is live, they are pushed to the devices.

Finally, Ionic has an API you can use to send pushes from any service you write. Push notifications can be completely automated with very little effort.

Analytics and Events

Often, we want to see how people are using the app and get analytics based on user interactivity. Ionic.io provides Angular services and directives to track events. Events can have custom data as well.

<button 
    ion-track-tap="orderPizza"
    ion-track-data="{type: 'pepperoni'}"
    class="button button-block button-positive"
>Order a Pepperoni Pizza</button>

or

$ionicAnalytics.track('orderPizza', {
    type: ‘cheese’
});

You can see statistics on the events in the Ionic.io portal in a time-based breakdown. Each event is listed by how frequently they are fired.

You can view events with custom data properties to see what’s more popular. The Ionic.io portal automatically uploads custom data fields when the first event is fired. There is no custom configuration required.

Final thoughts

As developers, we often grumble at the thought of integrating push notifications and analytics because it’s usually an end-to-end painful process—terrible SDK and confusing portal. Ionic.io takes some pain out of the process with a simple SDK and a straightforward portal. It took only about 15 minutes to integrate both services and see analytics and send push notifications. If you’re building an Ionic app and need push notifications and analytics, give Ionic.io a close look. You can reach me on Twitter to discuss Ionic, Ionic.io platform services or push notifications.