reactjscordovaeventsbranch.io

How to call Branch listeners on React.js Cordova app


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!


Solution

  • 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.