如何读取 Branch.io 快速链接中的 URL 参数

Question

这应该非常简单，但无法让它工作...

我有 Branch.io 的 Web SDK 实现，如 https://help.branch.io/developers-hub/docs/web-full-reference。我创建了一个快速链接，当用户单击该快速链接时，可以在 JavaScript 中访问 Branch.init() 及其回调 window.branch。但是，我看不到单击时必须发送的查询参数。

假设我的快速链接是： https://appname.test-app.link/LinkCode?customName=customValue

如何在 JavaScript 中访问 customName 和 customValue？我已尝试使用 window.branch 但仍然看不到参数。

提前致谢！

Answer 1

我可以告诉你我是怎么做到的。我不确定这是否是最好/正确的方法，但它对我有用。

要实现此功能，需要两个部分：a) 将数据添加到快速链接上，b) 从快速链接中读取数据。

将数据添加到快速链接

您如何将 customName=customValue 添加到快速链接？它并不像仅将 ?customName=customValue 添加到快速链接 URL 那样简单（这也是我尝试的第一件事）。

相反，您可以使用 Branch 仪表板或 Branch API。

无论哪种方式，您都需要将字段添加到快速链接的数据属性，这是仪表板中快速链接的“链接数据”部分。

建议将包含所需查询参数的 URL 添加到 $canonical_url 字段。然而，我发现使用 $custom_meta_tags 字段更容易，它接受序列化的 JSON 字符串。

从快速链接读取数据

文档：

init函数返回一个可以读取的数据对象
用户被引用的链接。

所以这对我有用：

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
    }
  }
}

Answer 2

对于 React JS 应用程序来说，解决方案似乎有点复杂。我的应用程序嵌入在 Cordova 框架中。下面的解决方案可让您捕获由服务器端代码动态生成的 Branch.io 链接。

步骤如下：

1. 在代码初始化时初始化分支链路接收能力。
2. 只要点击即可检索代码内分支链接的数据。

解决方案：

1. 您需要调用下面的插件并配置您的分支调用。

<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. 使用类似于下面的函数。它会捕获分支信息并为您解析它。解析后，您可以访问您需要的值并调用您可能需要的函数。

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
    }
}

希望它可以帮助其他正在寻找解决方案的人！