Skip to content
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
December 9, 2015

Ionic.io: Push and Analytics That Don’t Suck

Angular, Ionic, JavaScript

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

image001After 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.

image002You 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.

image003Finally, 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.

image004You 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.

image005

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.

Posted in Angular, Ionic, JavaScript
Share this

Carlos Paelinck

Carlos Paelinck is a web and Apple platforms developer. He attends and speaks at the Angular and JavaScript meetups in Omaha, NE. Carlos enjoys his dog, gin cocktails, golf and Nebraska Cornhuskers football. During his time with Modus Create, Carlos filled the role of Software Engineer.
Follow

Related Posts

  • Ionic 2 Project Structure
    Ionic 2 Project Structure

    This is the first part in a series of introductory posts on Ionic 2. If…

  • Building Better Ionic Apps with Ionic Pro
    Building Better Ionic Apps with Ionic Pro, Part 3

    In our previous post, we demonstrated how to easily run an Ionic app on devices…

Subscribe to the Modus Newsletter

Receive the latest blog articles and insights every month from the Modus team.

Let's Chat

If forms aren’t your thing, you can always call us (+1-855-721-7223).

Modus-Logo-Primary-White.svg
  • Services
  • About
    • Newsroom
  • Partners
  • Work
  • Insights
    • Blog
    • Modus Labs
  • Careers
Virginia (US)

12100 Sunset Hills Road
Suite 150
Reston, Virginia, 20190
Tel: +1-855-721-7223

California (US)
12130 Millennium Dr

Los Angeles, CA 90094

Missouri (US)
609 E High St

Jefferson City, MO 65101

Romania

Str. Mihai Veliciu, no. 17
Cluj-Napoca, Romania
Tel: +40-0786-887-444

Costa Rica

2nd Floor, Plaza Koros, Av 3
San José, Santa Ana, Costa Rica

© 2021 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

This website uses cookies.
These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

Scroll To Top