Home > front end >  How to call Branch listeners on React.js Cordova app
How to call Branch listeners on React.js Cordova app

Time:03-22

I am using a React.js app in a Cordova framework.

As the docs are not really clear, I would like to understand how to call a Branch.io listener in a my app, so that I can capture where the Branch.io link was clicked, by whom and what exact URL was clicked. There must be a way to call the Branch.io events from React itself (otherwise, how can you be listening to the event inside the app?). I tried the following in my index.js file but was not successful because the build of the React app failed (as cordova is only available during runtime).

import {Branch} from "branch-cordova-sdk"

Any help would be appreciated! Thanks in advance!

CodePudding user response:

For anybody else arriving at this page:

If you are trying to generate and access branches from Branch.io in your React.js app (not React native) and you have embedded it into a Cordova app, you have to follow these documentation: https://help.branch.io/developers-hub/docs/web-basic-integration

As quick bullet points:

  1. You have to call the branch in your index.html file, as mentioned in the docs:
<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <script>
    // load Branch
    (function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s  ]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode autoAppIndex banner closeBanner closeJourney creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setBranchViewData setIdentity track validateCode trackCommerceEvent logEvent disableTracking".split(" "), 0);
    // init Branch
    branch.init('key_live_YOUR_KEY_GOES_HERE');
  </script>
</head>
<body>
</body>
</html>
  1. Then, on your React.js app, add the branch listener directly:
    function onResume() {
      let branch = window.branch;
      // Whatever else you want to do when you receive your branch information.
    }

Just define what you want to do with your branch from there onwards.

  • Related