Dynamic Links In Ionic 3, Firebase vs. Branch.io

@katie_ring: Check out this great workout I just did! Working Girls Guide Day 1. https://38plank.app.link/lMlHkO4tkE

*PS. That link is a Dynamic Link, click it on mobile to see it in action!

Imagine getting this message via text or seeing it on facebook. You are definitely going to check it out because your friend Katie is super fit (she did do a 38 minute plank btw), so if she says this is a great workout, you know that it's a great workout.

BUT WAIT, I DONT HAVE THE 38PLANK APP! A DEEP LINK WON’T WORK.

Well your first mistake is not having the 38Plank app, but we can forgive you for that. The reality is for anyone creating a new app, a social media friend not having the app is probably the #1 use case. You want your users to share a link to a specific piece of content to their friends who don’t have the app. Those friends get jealous, and want in on this new cool workout that everyone has been talking about. But if the link is just a deeplink, we know that it will just direct them to the app store. How will they ever find the content?


Enter Dynamic Links

Deep links that survive the install process — Firebase Dynamic Links Docs

I think this is the simplest and most accurate definition of what a dynamic link provides. A dynamic link handles all the inbetween conversation so that a deeplink can survive a user having to install the app before they can go to the linked content. Gone are the days when a user will have to click on a link twice, which can cause considerable drop off.

While looking for Dynamic link services we found two major offerings, one from firebase, and one from branch.io. Both of these companies offer dynamic links, but the functionality provided differs. I will go through an overview of the pros and cons, and how we setup our dynamic linking in our Ionic app.

Firebase Dynamic Links

When we first went looking for dynamic links, the most prominent (first thing in google) and straightforward solution was firebase. We had already incorporated firebase analytics into our app, as well as firebase push notifications, so most of the setup was already taken care of. All we needed to do was set up the dynamic link specific code.

@ionic-native/firebase-dynamic-links

The setup here is fairly straightforward. Install the plugin as requested, and then handle dynamic links similarly as if you handled deeplinks.

this.firebaseDynamicLinks.onDynamicLink()
.then((res: any) => directTheUserToContent(res))
.catch((error: any) => console.error(error));

Simple and straightforward is something I like, so this plugin seemed to be working great for me. I tested a few dynamic links to see what I was dealing with, and I found some interesting edge cases that were not entirely unexpected.

*Remember to test on a live version of your app, or else the app store will not recognize that the app is installed.

On Android, things pretty much just worked! I uninstalled my app, clicked on the dynamic link I generated in the firebase console, and viola The Working Girls Guide to Fit Day 1 showed up on my app!

On iOS, oh so many issues showed up.

  1. From Slack, the app download process killed the deep link (I believe this had something to do with the fact that slack has a built in webview).
  2. When the app was downloaded and link clicked from Slack, The link never recognized that the app was already there
  3. From Instagram, the link only defaulted to the app store. It did not survive the instagram linking process. (Instagram blocks many links)

I wasn’t surprised that iOS had this many issues, because that was the case with deeplinking, but I knew we needed a better option. Our use cases for dynamic links included Facebook / Instagram Marketing, Adwords Marketing, and In-App Social Sharing, all which seemed to have their own set of issues with firebase. Combine that with the fact that a iOS user can turn off deep links accidentally and we had a problem.

While I was off Googling the issue “Firebase dynamic links instagram”, I ran across a blog post by these guys over at Branch.io . They seemed to know what they were talking about so I decided to give their implementation a whirl.

Branch Dynamic Links

The first thing I googled at was “Firebase vs Branch” to get an idea of what was different, and I ran into this Blog Post.

Now I know that all of this sounds like marketing foo, but there is one line that caught my eye, “Support for over 6000 deep linking edge cases”.

After all the complaints I have had about iOS user experience with deeplinks this was a definite selling point.

Plugin Setup

Ionic does not have an ionic-native plugin for branch, but the cordova-ionic-phonegap-branch-deep-linking github has great documentation specifically for Ionic 2/3.

After following the setup instructions for how to create your first branch link (which are actually fairly extensive), we need to add this code to our app.component.ts

// sample app.component.js
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { TabsPage } from '../pages/tabs/tabs';

// Branch import
declare var Branch;

@Component({
template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
rootPage = TabsPage;

constructor(platform: Platform) {
platform.ready().then(() => {
StatusBar.styleDefault();
Splashscreen.hide();
branchInit();
});

platform.resume.subscribe(() => {
branchInit();
});

// Branch initialization
const branchInit = () => {
// only on devices
if (!platform.is('cordova')) { return }
Branch.initSession(data => {
// read deep link data on click
doSomethingWithOurDeeplink(data);
});
}
}
}

As a heads up, Branch is not compatible with the ionic deeplink plugin, so once you receive a dynamic link, you will have to route it yourself. This is also because of all the edge cases that they have to cover (eg. Facebook Ads), you cannot rely on the app knowing it is responding to a deeplink.

Example

I created a Branch Dynamic link at the beginning of this article that I will reference again here.

https://38plank.app.link/lMlHkO4tkE

To configure the dynamic link to have the information I required, I set the property $deeplink_path when I configured my deeplink.

Deeplink Path With The Workout

Then, in our code, I handle this in a very similar way to how I would handle any other deeplink

And Viola! A Branch Deeplink. Now to test this bad boy to see if it lives up to the hype.

On Android again, It pretty much just works…

On iOS, it works alot better than firebase, with caveats.

*Remember to test on a live edition of your app

Caveats

There are still some user flow issues with the branch dynamic links on iOS devices, but in general they still do work. For example to setup a dynamic link to work with Facebook ads, there is some setup required on the branch dashboard side. It also took quite a while to setup deeplinking with android adds. For apps that have webviews, the link almost always went to the app store, but once you clicked “open” in app store page the app would still respond correctly.

This caveats in my opinion seem to be brought on by Apple's finicky implementation of Dynamic links, and a second class standing for deeplinks in both google and facebook's ad platforms. I would love to see dynamic links get some first class attention in the near future.

Conclusion

If you want to setup dynamic links in your application, Branch is the way to go. There coverage of edge cases (mostly introduced by iOS) is significantly better, and since more paying customers come from iOS, you should really be concerned about deep linking them to premium content.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.