How to read URL parameters in Branch.io quick link

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!

Solution

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:

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

Solution:

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>

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!