Send Custom Data In Push Notifications

You can utilize the "Custom Data" JSON payload in Mixpanel's push notification builder to send customized push notifications that contain emojis, sounds, alerts, icons, titles, or deep links.

Custom JSON Payloads

A push notification can be delivered with a custom JSON payload. When a JSON payload with valid keys is received by an app, the receiving device will ignore the message entered in the main field of the Mixpanel message editor, and instead display the custom JSON payload.

The custom data field is found to the right of the Mixpanel message editor.

2017-09-01_15_47_18.555995-customdataa6.png
 

iOS

In iOS implementations, it is possible to customize the content contained and delivered in a push notification using Apple's built-in JSON keys.

Push payloads are processed automatically by your application. The following example will send an iOS push notification with the message "TEXT GOES HERE":

{"aps": {"alert": "TEXT GOES HERE"}}

You can further customize the message by including additional parameters. The shortlist of built-in JSON keys for iOS includes:

  • Alerts (Message)
    • launch-image
  • Badges (Icon)
  • Sounds (Sound)
  • content-available (Background Content, typically used for "silent push" notifications)

Android

For Android, the JSON keys need to be handled as intents by your app. This happens by default for a few specific keys in the Mixpanel library. The following JSON payload will send an Android push notification with the message "TEXT GOES HERE":

{"mp_message": "TEXT GOES HERE"}

 In this sample, like the one above, you have the option of customizing the message further with additional JSON keys. The full list of JSON keys for Android includes:

  • mp_message (Message)
  • mp_icnm (Icon)
  • mp_cta (Link)
  • mp_title (Title)
  • mp_icnm_l (Large icon to be used on a push)
  • mp_icnm_w (White icon to be used on Lollipop and above)
  • mp_color (Color to be used on Lollipop and above (#argb))

Example Android payload:

{"mp_icnm":"an_icon", "mp_icnm_l":"big_icon", "mp_icnm_w":"white_icon","mp_color":"#FFAA0000"}

Including any of the above keys with corresponding values will customize the content contained and delivered in a push notification.

Deep Links

Deep links in push notifications are hyperlinks embedded in that notification. For example, a push notification can include a deep link to a specific webpage or application view. 

Delivering deep links in mobile applications requires that changes be made in your application’s code. The process is similar across mobile platforms, but there are several differences between iOS and Android which are highlighted below.

iOS

Mixpanel’s iOS push notifications allow a user to be directed to a specific webpage or application view using a deeplink. To build this functionality, prepare your application to handle universal links and modify your AppDelegate to listen for remote notifications and act on custom JSON keys.

Once the above steps are complete, create a custom JSON payload in the Push builder. Be sure to include your custom deeplink key outside of the "aps" dictionary.


{"aps": {"alert": "TEXT GOES HERE"}, "web_link":"https://www.mixpanel.com}

If the application is set up to handle this custom key, the push notification should direct the user to the URL specified above when clicked.

Android

If set up correctly to handle this custom key, the push notification should link directly to the URL specified above. For example, the following expects the custom “web_link” key in didReceiveRemoteNotification and parses out the link value based on that key. Then, convert the string to a URL and invoke openURL:


-(void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo{
   [[Mixpanel sharedInstance] trackPushNotification:userInfo];
   NSLog(@"%@", userInfo);
   NSString *web_link = [userInfo objectForKey:@"web_link"];
   NSLog(@"%@", web_link);
   NSURL *url = [[NSURL alloc] initWithString:web_link];
   if (url){
        [[UIApplication sharedApplication] openURL:url];
   }
}


Lastly, include the following in didFinishLaunchingWithOptions to ensure that didReceiveRemoteNotification is triggered when the app is launched from a terminated state:

if (launchOptions[UIApplicationLaunchOptionsRemoteNotificationKey]) {
       [self application:application didReceiveRemoteNotification:launchOptions[UIApplicationLaunchOptionsRemoteNotificationKey]];
   }

There is no need to manually handle the case where the app is backgrounded or active, as didReceiveRemoteNotification will be called automatically.

Emojis

The easiest way to send emojis in a push notification using Mixpanel is to paste the emoji inside the text field of the visual editor. 

Once push notifications containing emojis are sent from Mixpanel, you can see the emoji on the device.

iOS

On iOS devices, a push notification containing an emoji will appear as:

2015-05-07_22_17_14.386260-push_ios_result.jpg  
 

Android

On Android devices, a push notification containing an emoji will appear as:

2015-05-07_22_16_58.762772-push_android_result.png

Sending Both Emojis and Deep Links

Both emojis and deep links are handled through the Custom Data field in the Messages editor, and it is certainly possible to configure your push notification to contain both an emoji and a deep link.

Convert Emoji to Unicode

An emoji must be converted to the correct unicode string to pass into your Mixpanel push notification JSON payload.

1. Find the emoji here and click on it to add to the top text area.
2. Click the message above the text area which says "Character Readout".
3. Locate the 4 or 8 characters under the unicode format "hex utf-16 surrog".
4. Format the 4 characters as \uXXXX or the 8 characters as \uXXXX\uXXXX (for example, "D83D DC4B" would become "\uD83D\uDC4B").
5. Utilize this \uXXXX or \uXXXX\uXXXX string as an emoji.

iOS

In iOS, this custom payload will come within didReceiveRemoteNotification.

{"aps": {"alert": "High Five \uD83D\uDC4B"}, "deeplink":"deeplink://screen3"}
{"aps": {"alert": "Let's sail away! ⛵"}, "deeplink":"deeplink://screen2"}

Android

On Android, your AndroidManifest needs to have a custom push receiver searching for the 'deeplink' key with a custom intent on where to direct the user.

{"mp_message": "High Five \uD83D\uDC4B", "mp_cta":"deeplink://screen3"}
{"mp_message": "Let's sail away! ⛵", "mp_cta":"deeplink://screen2"}

 

Is this article helpful?
3 out of 9 found this helpful

Comments

0 comments

Article is closed for comments.