How to read URL parameters in Branch.io quick link

Question

This should be quite straightforward but can't get it to work...

I have a web SDK implementation of Branch.io, like in https://help.branch.io/developers-hub/docs/web-full-reference. I have created a quick link and can access the Branch.init() and its callback, window.branch, in JavaScript when the quick link is clicked by the user. However, I can't see the query params that must have been sent through at clicking.

Let's say my quick link is: https://appname.test-app.link/LinkCode?customName=customValue

How can I access the customName and customValue in JavaScript? I have tried with window.branch but can't still see the parameters.

Thanks in advance!

Answer 1

It seems the solution was a bit more complex in the case of a React JS app. My app is embedded in a Cordova framework. The solution below lets you catch Branch.io links dynamically generated by your server-side code.

Steps to follow:

1. Initialize the capability of branch link reception at code initialization.
2. Retrieve the data of the branch link inside the code anytime there's a click.

Solution:

1. You need to call the plugin below and configure your branch call.

<plugin name="branch-cordova-sdk" spec="^4.0.0" />
<branch-config>
    <branch-key value=YOUR_VALUE />
    <uri-scheme value=YOUR_VALUE" />
    <link-domain value=YOUR_VALUE /> <!-- Required app.link domain -->
    <link-domain value=YOUR_VALUE /> <!-- Required alternate.app.link domain -->
    <link-domain value=YOUR_VALUE />  <!-- Required test.app.link domain -->
    <link-domain value=YOUR_VALUE />  <!-- Required alternate.test.app.link domain -->
    <ios-team-release value=YOUR_VALUE />
</branch-config>

2. Use a function similar to the one below. It will catch the branch information and parse it for you. Once parsed, you may access the value that you need and call the function you may need.

async function handleBranchIO() {

    let THE_VALUE_YOU_WANT = null;
    console.log('Inside branch function')
    // This function is the section 'Read deep link' from https://help.branch.io/developers-hub/docs/cordova-phonegap-ionic

    if (window.Branch !== undefined) {
        // Branch initialization within your deviceready and resume
        await window.Branch.initSession().then(async function success(res) {
            // console.log('Branch already initialized')

            if (res["+clicked_branch_link"]) {
                // Alert message to check the Branch.io's deepnlink information.
                // alert("Open app with a Branch deep link: " + JSON.stringify(res));
                THE_VALUE_YOU_WANT = await res.THE_VALUE_YOU_WANT
                console.log(THE_VALUE_YOU_WANT)
                THE_FUNCTION_YOU_WANT_TO_EXECUTE(THE_VALUE_YOU_WANT)
                // Branch quick link: https://cordova.app.link/uJcOH1IFpM
                // Branch web link: https://cordova-alternate.app.link/uJcOH1IFpM
                // Branch dynamic link: https://cordova.app.link?tags=one&tags=two&tags=three&channel=Copy&feature=onboarding&stage=new+user&campaign=content+123+launch&type=0&duration=0&source=android&data
                // Branch uri scheme: branchcordova://open?link_click_id=link-500015444967786346
                // Branch android intent: intent://open?link_click_id=518106399270344237#Intent;scheme=looprocks;package=com.eneff.branch.cordovatestbed;S.browser_fallback_url=https%3A%2F%2Fcordova.app.link%2FuJcOH1IFpM%3F__branch_flow_type%3Dchrome_deepview%26__branch_flow_id%3D518106399312287278;S.market_referrer=link_click_id-518106399270344237%26utm_source%3DCopy%26utm_campaign%3Dcontent%20123%20launch%26utm_feature%3Donboarding;S.branch_data=%7B%22~feature%22%3A%22onboarding%22%2C%22this_is%22%3A%22true%22%2C%22custom_string%22%3A%22data%22%2C%22testing%22%3A%22123%22%2C%22%24publicly_indexable%22%3A%22false%22%2C%22%24desktop_url%22%3A%22http%3A%2F%2Fwww.example.com%2Fdesktop%22%2C%22%24one_time_use%22%3Afalse%2C%22custom_object%22%3A%22%7B%5C%5C%5C%22random%5C%5C%5C%22%3A%5C%5C%5C%22dictionary%5C%5C%5C%22%7D%22%2C%22~id%22%3A%22517795540654792902%22%2C%22~campaign%22%3A%22content%20123%20launch%22%2C%22%2Bclick_timestamp%22%3A1524764418%2C%22%2Burl%22%3A%22https%3A%2F%2Fcordova.app.link%2FuJcOH1IFpM%22%2C%22custom_boolean%22%3A%22true%22%2C%22custom%22%3A%22data%22%2C%22source%22%3A%22android%22%2C%22%24og_image_url%22%3A%22http%3A%2F%2Florempixel.com%2F400%2F400%2F%22%2C%22%2Bdomain%22%3A%22cordova.app.link%22%2C%22custom_integer%22%3A%221524690301794%22%2C%22~tags%22%3A%5B%22one%22%2C%22two%22%2C%22three%22%5D%2C%22custom_array%22%3A%22%5B1%2C2%2C3%2C4%2C5%5D%22%2C%22~channel%22%3A%22Copy%22%2C%22~creation_source%22%3A2%2C%22%24canonical_identifier%22%3A%22content%2F123%22%2C%22%24og_title%22%3A%22Content%20123%20Title%22%2C%22%24og_description%22%3A%22Content%20123%20Description%201524690296449%22%2C%22%24identity_id%22%3A%22453670943617990547%22%2C%22~stage%22%3A%22new%20user%22%2C%22%2Bclicked_branch_link%22%3Atrue%2C%22%2Bmatch_guaranteed%22%3Atrue%2C%22%2Bis_first_session%22%3Afalse%7D;B.branch_intent=true;end
                // Branch android app link (device controlled): https://cordova.app.link/uJcOH1IFpM
                // Branch ios universal link (device controlled): https://cordova.app.link/uJcOH1IFpM
            } else if (res["+non_branch_link"]) {
                // alert("Open app with a non Branch deep link: " + JSON.stringify(res));
                // Competitor uri scheme: anotherurischeme://hello=world
            } else {
                // alert("Open app organically");
                THE_VALUE_YOU_WANT = null;
                // Clicking on app icon or push notification
            }
        })
            .catch(function error(err) {
                // logger(err, true);
                // alert("Error: " + err);
            });
        return THE_VALUE_YOU_WANT
    }
    else {
        // We are running on local computer
        return null
    }
}

Hope it helps anyone else looking for a solution to this!

Answer 2

I can tell you how I did this. I'm not sure if it's the best/correct way, but it worked for me.

There's two parts to getting this to work: a) getting the data onto the quick link, and b) reading the data from the quick link.

Getting the data onto the quick link

How are you adding customName=customValue to the quick link? It's not as simple as just adding ?customName=customValue to the quick link url (that was the first thing I tried, too).

Instead, you can use either the Branch dashboard or the Branch API.

Either way, you'll need to add fields to the quick link's data property, which is the "Link Data" part of the quick link in the dashboard.

The recommendation is to add a url with your desired query params to the $canonical_url field. I found it easier, however, to use the $custom_meta_tags field, which accepts a serialised JSON string.

Reading the data from the quick link

There's an easy-to-miss line in the docs:

The init function returns a data object where you can read the link the user was referred by.

So this works for me:

branch.init(key, {}, (error, data) => {
  if (error !== null) {
    // handle error
  } else {
    if (data?.data_parsed?.$custom_meta_tags) {
      const tags = data.data_parsed.$custom_meta_tags
      // Do what you want with the data
    }
  }
}