Deep Linking in MeteorJS— A Step-by-Step Guide with Examples
Some times back I was searching for some good deals in home decor items on Amazon when a friend of mine added me to a telegram group that provides daily price drop alerts and great deals at Amazon. On clicking on one of such deals, I saw it took me directly to the Amazon app product page. Though I had some fair idea about what was happening there, I did some digging about why it’s a necessity only now. That’s how I learned about the importance of Deep Linking or Universal Links in Apple ecosystems.
The search began...
A few days back I and our Lead Product Manager were talking about implementing deep linking to our Fasal app. That’s when I started exploring the possible solutions out there, and to my surprise, I saw that there are no active packages or proper guidelines on how to do it in MeteorJS.
I saw some posts in Meteor Community that dates back to 2016–2017 and those meteor packages are deprecated. So I posted my query on the most recent (2019) thread about deep linking in the meteor forum. Within a few days of my research, I realized that there’s no “meteor way” to do this now, so I did some more research and tinkering with different packages and finally arrived at a solution.
Why deep linking is necessary?
Before going into the implementation, let’s first understand why Deep linking is actually needed.
A recent research by Criteo says that users go through 4x products per session in app compared to mobile website. Mobile apps also push more people down the purchase funnel, with 3x higher conversion rates compared to mobile websites and even 1.5 times more conversions per session than via desktop.
Having said that, user acquisition in apps is more difficult & much costlier than getting them into websites as it requires efforts from your users as well (as they have to install the application from the app store and then use it ).
However, after getting a potential customer on your app you have a higher chance of converting them into a lead because an app has a lot of amazing benefits over a website, among which the 3 most important factors in my opinion are —
- Complete control over your user journey experience. With delightful UX and ease of access, one can build a sense of trust & brand reliability which essentially helps throughout the sales funnel. A great example of this can be the CRED app that solves the simple problem of paying your credit card bills with ease and they have made such a smooth and fun experience that it’s very hard to come back from it.
- One can prevent recovery lead drop-offs or churns because of an external hindrance ( simply a notification from Instagram ) by focus-seeking in-app messaging. E.g have you ever left a Swiggy/Zomato app after adding some food to the cart? Then you must have seen their quirky notifications about how you have some items in your cart to be ordered.
- By having an app on customers' premises ( i.e. smartphone ) you have a direct link between your business to your customer. By intelligently crafting various gamified customer engagement activities, you can push your products as well. One good example of this could be the Oneplus Community app, which comes by default with each Oneplus phone, and has different kinds of user engagement activities with smartly placed product sales pitches.
As you can see in the above image, Deep linking helps us acquire a potential customer into our app (not a website or product page) which makes the experience far better. It also ensures a recurring cash flow from that particular user by adding the previously mentioned points and helping the brand securing a loyal customer in the long run.
When a user clicks on the special link on their social media, websites, or even in text messages, they will be redirected to the brand app if they have it installed in their smartphone or they will be either redirected to the website version of the resource or the app store for downloading the application. Bringing the user into the app makes sure that he/she is presented with the best possible brand presentations and user experience thus building trust and brand trustworthiness.
How to Implement Deep linking in MeteorJS
Now that we know what is a deep link and why it's needed, let’s implement it in our meteor app.
Prerequisite
- An app built on MeteorJS Platform
- Working Internet Connection
- A testing device
Step 1: Install the Cordova plugin
We will be using the cordova-plugin-deeplinks plugin for our app’s deep linking, so please install it by using the below command —
meteor add cordova:cordova-plugin-deeplinks@1.1.1Step 2: Add the necessary configuration in the mobile config file
Now to make the plugin work in your app, you have to add the below configuration to your mobile-config.js file like below —
In the above code, you can see I have added three different types of URL configuration to the app by using the URL attribute on each path. Also in each path specification, we have an attribute ‘event’ which fires whenever the app is opened from that particular application route. Below are the different types of path/route specifications for our app —
A specific route
Whenever the application will be launched with the specific URL i.e. example.com/meta-data then this path specification will work, it will open the app and will fire the event named metaEvent .
<path event="metaEvent" url="/meta-data" />All routes in a particular path
This one is an extension of the previous path specification, here along with the specific path it checks for anything attached to that route with that path. This is very useful if you’re working with dynamic links or sharable links as they might end up having some campaign query params. E.g. example.com/share/1234 or example.com/share/1234?utm_source=medium
<path event="shareEvent" url="/share/*" />All the other routes
Everything other than the paths specified can be managed by using url=”*” . Just be cautious to keep this at the end of the specifications list, otherwise, it might end up grabbing all the other routes as well.
<path url="*" event="allOtherLinkEvent" />Now we have linked our application with our website. So if you try with your new app you will see when you try opening the website links in your smartphone, it will ask for where you want to open them: in your app or browser. Voila, you have successfully implemented the deep linking.
But wait, those links are opening the app and taking to the default first screen only, but we want to open specific pages in the app depending on the links. Don’t worry I have that covered too, continue reading.
Step 3: Handle different events for deep linking
So you remember we have added the event attribute to each path specification in the mobile-config file, now it’s time to use those. As I told you before, whenever a link matches a particular path specification in our configuration, then the event specified in the path gets fired.
So in our application startup function, we will add listeners to those events by using universalLinks.subscribe API provided by the plugin. In the subscribe method you have to specify the event name and the handler function which will be invoked when the event is fired.
So in that handler method, you can just check for the necessary parameters in the path and redirect to the route in the app. In the below example, I have used Flowrouter for the routing mechanism. You can use other network routing technology, however, the idea will be the same.
So that’s all about deep linking in the MeteorJS application. Though the steps are very specific to Meteor apps, you can follow this and replicate it in your hybrid app framework’s syntax as well. Hence, the same can be referred for using in Ionic, Cordova, or NativeScript.
In this example I have shared the configurations of the Android System only, let me know if you require a guide for iOS and I will share that as well. If you have learned anything from this article then don’t forget to show your support by clapping 👏.
If you are using Meteor Framework in your application then check out this great guide to the ultimate app optimization techniques for meteor apps by my friend —
Also, don't forget to peek into my React JS learning series posts here —
