React Native reward referrals
This is the fourth article of the series React Native Deep Linking Simplified. In the first three blogs (1, 2, and 3) , we learned how to add a deep link into our app and how to handle it gracefully. In this article, we will set up a referral system and get the most out of this amazing feature.
Offering in-app rewards for successful referrals to both the referrer and the recipient is an effective way to encourage users to use your app.
There a five simple steps that we will be going through. Let’s get started.
Steps involved
- Setup a Firebase project and SDK
- Create an invitation link
- Send the invitation link
- Retrieve the link
- Grant reward
1. Setup Firebase project and SDK
We have already covered this section in part 1, part 2, and part 3 of this series. Please go through them first and then continue from step 2.
Step 2. Create an invitation link
We already learned how to create Dynamic Link from the Firebase Console. This time, we will be generating the invitation link at the sender’s end and attaching a payload along with it. This payload will specify the sender’s user account ID at the receiving end. It will look something like this:
https://www.deeplinkdemo.com?invitedby=SENDER_UIDI will be using a random SENDER_UID just for this article. You can call getUid() on Firebase user or generate the ID as you like.
//import firebaseimport firebase from 'react-native-firebase';//Generate unique user ID hereconst SENDER_UID = 'USER1234';//build the linkconst link = `https://www.deeplinkdemo.com?invitedBy=${SENDER_UID}`;const dynamicLinkDomain = 'https://deeplinkblogdemo.page.link';//call DynamicLink constructorconst DynamicLink = new firebase.links.DynamicLink(link, dynamicLinkDomain);//get the generatedLinkconst generatedLink = await firebase.links().createDynamicLink(DynamicLink);console.log('created link', generatedLink);// console.log: https://deeplinkblogdemo.page.link?link=https%3A%2F%2Fwww.deeplinkdemo.com%3FinvitedBy%3DUSER1234
Step 3. Send the invitation link
Now that we have created the link, we can include it in an invitation. This invitation can be an email, SMS message, or any other medium (depending on what is most appropriate for your app and the audience).
Here’s an example:
const INVITATION = 'Shad has invited you to try this app. Use this referral link: ' + link;//send this String as you link
Step 4. Retrieve the link
There are many use cases that can happen when the recipient opens the app with the invitation link:
- If the app isn’t already installed, they will be directed to Play Store or App Store to install the app.
- If the app is installed, they will open our app for the first time and we can retrieve the referral information included in the Dynamic Link.
Remember when we added SENDER_UID (the payload) in our invitation link? We are going to retrieve that info to specify the user and grant a reward. We want to check whether the app has been launched from a Dynamic Link or not.
//add the code to the root file of your appasync componentDidMount() {let url = await firebase.links().getInitialLink();console.log('incoming url', url); //incoming url https://www.deeplinkdemo.com?invitedby=USER1234if (url) {const ID = this.getParameterFromUrl(url, "invitedBy");console.log('ID', ID); //ID USER1234}}getParameterFromUrl(url, parm) {var re = new RegExp(".*[?&]" + parm + "=([^&]+)(&|$)");var match = url.match(re);return (match ? match[1] : "");}
getInitialLink()returns the Dynamic Link that the app has been launched from. If the app was not launched from a Dynamic Link, the value will be null.
Step 4. Grant rewards
Now that we have retrieved the payload data from the Dynamic Link, we can specify the user who shared the link and grant the referral rewards to the referrer and the recipient whenever the required criteria have been met. And with this, our Reward Referral System has been completed. Cheers!!
Visit this link to check the working demo repo.
I hope you had fun learning about Dynamic Links, handling them, and the Reward Referral System in this four-part blog post series. Find it helpful? Please do share.
RELATED TAGS
CONTRIBUTOR
Shad Mirza- undefined by undefined
