Deeplinks in Ionic 2+
Deeplinks: Show The User What You Want Them To See
With any great ad or advertising scheme, your trying to sell a specific product. And if that product is inside of an app, you want to guide the user all the way through any process to give them exactly what they want instead of making them find it.
This is the problem that we faced at 38Plank. We put together this killer ad advertisement for one of our trainers program, Katie Rings Working Girls Guide to Fit.
Crazy good ad right? Who doesnt want to do that workout program. But when the user says “Yes” and they click on the ad, where do they go?
Straight to the app store. Thats great for downloads if thats all you’re after, but if they want to buy The Working Girls Guide to Fit, how do they even find it?
A deeplink is a way to give a user a link to a certain section or specific content in your app. So we could provide a link to a user that looks something like:
And two things will happen when you click it. Your phone should (if everything is configured correctly) give you the option to “Open In App”, and then when it goes to the app you can respond accordingly, taking the user directly to the content specifically.
To better understand what is happening, we need to dive into what both Android and iOS call their deeplinks and how to setup our Ionic project to handle them.
Ionic Native Deeplinks (Documentation)
There are two things to think about when setting up Deeplinks in your app.
- App Configuration
- Apple / Google Configuration
First, lets configure the app. Android uses custom URL schemes to link to the product, (ex. 38plank://…), and since iOS 9.2 Apple supports whats called Universal Links (ex. api.38plank.com).
On both phones when you click a link like the above example, the phone recognizes the url scheme and is supposed to open up the app instead of a browser. Now generally, this pretty much just works post configuration on Android, but on iOS, there are lots of things can go wrong which I will explain later.
Install the plugin, and generally read the documentation for the cordova plugin here.
ionic plugin add ionic-plugin-deeplinks --variable URL_SCHEME=myapp --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=example.com --variable ANDROID_PATH_PREFIX=/
URL_SCHEME is the scheme that will open an app on an android device, and the DEEPLINK_HOST matches the url you want to link to both your android app and the Universal Links for iOS
Registering With Google / Apple
After we establish the url schemes and the deeplink schemes, we need to then make apple and google trust that we own those domains. For apple, this involves creating an “apple-app-site-association’ file, and for google, a ‘assetlinks.json’ file.
So if our domian is daniel-craig.com, we need to verify that we own it by serving these files at the domains below
The snippet below is a sample response function in NodeJs.
Where the config.xml package name is the one you setup when you originally created your ionic project, and the team id is your apple team id which can be found in the Membership Details section of your apple account.
After you configure this, make sure to delete and reinstall your app. It may take a few hours for apple to register and accept you app-site-association file so don’t worry if it doesn't work right away.
To test, copy the link that should work into your Notes (iOS) app on your phone. Then “Long Click” the link, and an option to Open in “<your app>” should appear. On Android, just click the link from any text message or notes app.
Now that you have configured this, you are going to hear two things I will be repeating a few times:
** On Android, It pretty much just works now **
** On iOS, so many things could still go wrong **
Universal Links Edge Cases
If your app doesn’t open up automatically opening up on Android, you probably configured something wrong. If your app doesn't automatically open up on iOS, there are so many edge cases to consider, all because apple seems to want to frustrate developers.
First, there are many scenarios in which universal links will just not work at all.
* Pasting the link directly into safari
* Opening the link from an app with a WebView (Slack, etc…)
* Some apps block access specifically (Instagram)
On top of these edge cases, the user can accidentally disable universal links. If they tap “www.daniel-craig.com" accidentally in the top right corner of the app, the user will navigate to the website and then Universal Links will be automatically disabled.
To reset this, you need to long click on the link as I mentioned above, but thats not something you could tell a user to do.
Next Steps === Dynamic Links
Along with these edge cases, their is one other UX case that we have not talked about, but is probably very important to you as an app developer. What if the user doesn’t have the app yet?
In our experience this is actually the most common scenario for a user to be in. To solve this problem, (and many of those iOS edge cases) we need to look at whats called Dynamic Links
Dynamic links survive the install process, so a user can go from not having the app, all the way to the content you want them to see.
My next blog post will be about dynamic links with Firebase and Branch.io
Also, as an example, here is a dynamic link that works for 38Plank