开发者中心

Web高级功能

初始化Branch功能

branch.init('key_live_OUR_KEY_GOES_HERE', function(err, data) {
console.log(err, data);

var options = { no_journeys: true };
branch.init('key_live_YOUR_KEY_GOES_HERE', options, function(err, data) {
  console.log(err, data);
});
  • 返回data 对象内部的以下内容
Key值
data_parsedobject. 如果从链接中引用了用户，并且该链接具有关联的数据，则在此处传递数据。
has_appboolean. 用户是否已使用Branch '的角色数据安装了该应用程序。
身份可选 - string .唯一字符串标识用户，如果来自组setIdentity
referring_linkstring. 单击了引用链接（如果可用）。
referring_identitystring. 如果从链接中引用了该用户，并且该链接是由具有身份的用户创建的，则该身份在此处。

创建深度链接

var linkData = {
  campaign: 'content 123',
  channel: 'facebook',
  feature: 'dashboard',
  stage: 'new user',
  tags: [ 'tag1', 'tag2', 'tag3' ],
  alias: '',
  data: {
    'custom_bool': true,
    'custom_int': Date.now(),
    'custom_string': 'hello',
    '$og_title': 'Title',
    '$og_description': 'Description',
    '$og_image_url':'http://lorempixel.com/400/400'
  }
};

branch.link(linkData, function(err, link) {
  console.log(link);
});

分享深度链接

  • 生成 Branch 深度链接，并通过用户选择的渠道(Channel)进行标记

  • 使用深度链接属性

<!-- shareable elements -->
<button id="button">deep link</button>
<a id="anchor" href="#">deep link</a>

var linkData = {
  campaign: 'content 123',
  channel: 'facebook',
  feature: 'dashboard',
  stage: 'new user',
  tags: [ 'tag1', 'tag2', 'tag3' ],
  alias: '',
  data: {
    'custom_bool': true,
    'custom_int': Date.now(),
    'custom_string': 'hello',
    '$og_title': 'Title',
    '$og_description': 'Description',
    '$og_image_url':'http://lorempixel.com/400/400'
  }
};

branch.link(linkData, function(err, link) {
  // bind elements
  document.getElementById('button').onclick = function() {
    window.open(link || err);
  };
  document.getElementById('anchor').href = link || err;
});

读取深度链接

  • 从深度链接中提取 Branch 数据

  • 最佳做法是从listener 接收数据（以防止出现race condition）

  • 验证为测试读取深度链接接

  • 监听器

branch.init('key_live_YOUR_KEY_GOES_HERE', function(err, data) {
  console.log(err, data);
});
  • 最新数据
branch.data(function(err, data) {
  console.log(err, data);
});
  • 初次数据
branch.first(function(err, data) {
  console.log(err, data);
});

创建Journeys（网站向App引流解决方案）横幅

  • 将移动用户转化为应用程序用户

  • 在 Branch Dashboard 上创建一个Journey

  • 通过在移动设备上测试您的网站进行验证

  • 将其他深度链接接数据附加到“Journey (路径图谱)”按钮

// optional additional deep link data
var linkData = {
  campaign: 'content 123',
  channel: 'facebook',
  feature: 'dashboard',
  stage: 'new user',
  tags: [ 'tag1', 'tag2', 'tag3' ],
  alias: '',
  data: {
    'custom_bool': true,
    'custom_int': Date.now(),
    'custom_string': 'hello',
    '$og_title': 'Title',
    '$og_description': 'Description',
    '$og_image_url':'http://lorempixel.com/400/400'
  }
};

branch.setBranchViewData(linkData);

// close
branch.closeJourney(function(err, data) {
  console.log(err, data);
});

// reopen
branch.track("pageview");

创建短信

  • 将桌面用户转化为应用程序用户

  • 发送带有指向电话号码的深度链接的短信

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
    <script type="text/javascript">
        (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 banner closeBanner creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setBranchViewData setIdentity track validateCode".split(" "), 0);

        branch.init('YOUR-BRANCH-KEY');
            function sendSMS(form) {
                var phone = form.phone.value;
                var linkData = {
                    tags: [],
                    channel: 'Website',
                    feature: 'TextMeTheApp',
                    data: {
                        'foo': 'bar'
                    }
                };
                var options = {};
                var callback = function(err, result) {
                    if (err) {
                        alert("Sorry, something went wrong.");
                    }
                    else {
                        alert("SMS sent!");
                    }
                };
                branch.sendSMS(phone, linkData, options, callback);
                form.phone.value = "";
            }
    </script>
</head>
<body>
        Send SMS
        <form onsubmit="sendSMS(this); return false;">
            <input id="phone" name="phone" type="tel" placeholder="(650) 123-4567" />
            <br/>
            <input type="submit"/>
        </form>
    </body>
</html>

使用自定义窗体与SendSMS（）

如果您已有供用户输入其电话号码的表格，则可以在其后放置我们的Text Me The App。在您网站的<head></head> 标签内的某处添加以下代码。

<script type="text/javascript">
function sendSMS(form) {
  branch.sendSMS(
    phone: form.phone.text,
    {
      channel: 'Website',
      feature: 'Text-Me-The-App',
      data: {
        foo: 'bar'
      }
    },
    { make_new_link: false }, // Default: false. If set to true, sendSMS will generate a new link even if one already exists.
    function(err) { console.log(err); }
  );
}
</script>

托管深度链接接数据

  • 使营销人员更容易创建深度链接接

  • 用于Journeys（路径图谱）， 通用电子邮件， 快速链接和 Chrome Extension

  • Branch机构将在链接创建时抓取Web URL以获取深度链接接数据

  • 如果您在网站源代码中托管深度链接接数据，则Branch可以自动将简单的Web URL转换为对应的Branch链接，该链接可以深度链接接到您的移动应用程序中的相关内容。

  • Branch还将解析您的Content Analytics数据，并为您提供有关哪些内容在推动点击，安装，打开和应用内互动的更有价值的信息。

  • 成功将深链接数据放到您的网站上的第一步是了解深链接如何与您的Web URL相对应。问问自己以下问题，并相应地对内容进行分组。

      - Do you have any content on web that doesn’t exist in the app? Examples include: time-sensitive promotions, splash pages, micro-sites.

  - For content that has corresponding app content, what type of pages do you have? Examples include: search result pages, category homepages, product pages.

  - If you’ve already set up deep linking (if you haven’t set up deep linking skip this step): what does your deep linking schema look like? Do you use different keys for different content? Do you have required key/value pairs that aren’t content specific? Examples include: `productPage` or `categoryPage` keys, or `product_view=true`.

  • 通过创建快速链接进行验证，并在您的网页中填写web URL

范例网址网址数据要添加到您的网站的元标记
https://shop.com/shoes/brown-loafersproductId = 1234，productView = true<meta name="branch:deeplink:productId" content="1234" />， <meta name="branch:deeplink:productView" content="true" />
https://shop.com/shoescategoryId = 5678<meta name="branch:deeplink:categoryId" content="5678" />
https://shop.com/a-great-movie没有相应的应用内容（ 打开网站 ）<meta name="branch:deeplink:$web_only" content="true" />

故障排查

  • 如果您的网站上有 Facebook App Links元标记 ，并且正在使用您的应用程序，则可以跳过这些说明。 Branch将自动获取App Links标签并将其添加到您的深度链接接数据中。
  • 请勿使用Google跟踪代码管理器（GTM）插入您的内容元标记。 GTM需要在页面上加载JavaScript，并且Branch链接数据抓取工具不支持JavaScript执行。
  • 如果出于安全考虑需要将回发服务器IP地址列入白名单，则会在此处列出它们。

跟踪用户

  • 设置事件、深度链接和推荐的用户标识（电子邮件、ID 和 UUID 等）

  • 使用 Branch 控制面板进行验证

branch.setIdentity('123456');

branch.setIdentity('123456', function (err, data) {
  console.log(err, data);
});
  • 删除用户身份
branch.logout();

branch.logout(function(err, data) {
console.log(err, data);
});

跟踪事件

有关Branch SDK跟踪的所有标准事件的完整列表，请参阅跟踪商务，内容，生命周期和自定义事件 。

商业活动

  • 注册自定义商务活动

  • 使用 Branch 控制面板进行验证

  • 如果您在没有货币的情况下跟踪商务活动，则我们假设它们是美元。如果您使用非美元的货币跟踪商业事件，我们将使用最近的汇率将指定的收入转换为美元。

var event_and_custom_data = {
   "transaction_id": "tras_Id_1232343434",
   "currency": "USD",
   "revenue": 180.2,
   "shipping": 10.5,
   "tax": 13.5,
   "coupon": "promo-1234",
   "affiliation": "high_fi",
   "description": "Preferred purchase",
   "purchase_loc": "Palo Alto",
   "store_pickup": "unavailable"
};

var content_items = [
{
   "$content_schema": "COMMERCE_PRODUCT",
   "$og_title": "Nike Shoe",
   "$og_description": "Start loving your steps",
   "$og_image_url": "http://example.com/img1.jpg",
   "$canonical_identifier": "nike/1234",
   "$publicly_indexable": false,
   "$price": 101.2,
   "$locally_indexable": true,
   "$quantity": 1,
   "$sku": "1101123445",
   "$product_name": "Runner",
   "$product_brand": "Nike",
   "$product_category": "Sporting Goods",
   "$product_variant": "XL",
   "$rating_average": 4.2,
   "$rating_count": 5,
   "$rating_max": 2.2,
   "$creation_timestamp": 1499892854966,
   "$exp_date": 1499892854966,
   "$keywords": [ "sneakers", "shoes" ],
   "$address_street": "230 South LaSalle Street",
   "$address_city": "Chicago",
   "$address_region": "IL",
   "$address_country": "US",
   "$address_postal_code": "60604",
   "$latitude": 12.07,
   "$longitude": -97.5,
   "$image_captions": [ "my_img_caption1", "my_img_caption_2" ],
   "$condition": "NEW",
   "$custom_fields": {"foo1":"bar1","foo2":"bar2"}
},
{
   "$og_title": "Nike Woolen Sox",
   "$canonical_identifier": "nike/5324",
   "$og_description": "Fine combed woolen sox for those who love your foot",
   "$publicly_indexable": false,
   "$price": 80.2,
   "$locally_indexable": true,
   "$quantity": 5,
   "$sku": "110112467",
   "$product_name": "Woolen Sox",
   "$product_brand": "Nike",
   "$product_category": "Apparel & Accessories",
   "$product_variant": "Xl",
   "$rating_average": 3.3,
   "$rating_count": 5,
   "$rating_max": 2.8,
   "$creation_timestamp": 1499892854966
}];

var customer_event_alias = "my custom alias";

branch.logEvent(
   "PURCHASE",
   event_and_custom_data,
   content_items,
   customer_event_alias,
   function(err) { console.log(err); }
);

内容事件

内容事件是用户与您的应用内内容互动时发生的事件。例如，如果您有应用内文章，则希望跟踪与用户搜索，查看内容，对内容进行评级和共享时有关的事件。这可以应用于多种应用程序内内容，例如博客文章，音乐，视频，图片和电子商务目录项。

var event_and_custom_data = {
   "transaction_id": "tras_Id_1232343434",
   "currency": "USD",
   "revenue": 180.2,
   "shipping": 10.5,
   "tax": 13.5,
   "coupon": "promo-1234",
   "affiliation": "high_fi",
   "description": "Preferred purchase",
   "purchase_loc": "Palo Alto",
   "store_pickup": "unavailable"
};

var content_items = [
{
   "$content_schema": "COMMERCE_PRODUCT",
   "$og_title": "Nike Shoe",
   "$og_description": "Start loving your steps",
   "$og_image_url": "http://example.com/img1.jpg",
   "$canonical_identifier": "nike/1234",
   "$publicly_indexable": false,
   "$price": 101.2,
   "$locally_indexable": true,
   "$quantity": 1,
   "$sku": "1101123445",
   "$product_name": "Runner",
   "$product_brand": "Nike",
   "$product_category": "Sporting Goods",
   "$product_variant": "XL",
   "$rating_average": 4.2,
   "$rating_count": 5,
   "$rating_max": 2.2,
   "$creation_timestamp": 1499892854966,
   "$exp_date": 1499892854966,
   "$keywords": [ "sneakers", "shoes" ],
   "$address_street": "230 South LaSalle Street",
   "$address_city": "Chicago",
   "$address_region": "IL",
   "$address_country": "US",
   "$address_postal_code": "60604",
   "$latitude": 12.07,
   "$longitude": -97.5,
   "$image_captions": [ "my_img_caption1", "my_img_caption_2" ],
   "$condition": "NEW",
   "$custom_fields": {"foo1":"bar1","foo2":"bar2"}
},
{
   "$og_title": "Nike Woolen Sox",
   "$canonical_identifier": "nike/5324",
   "$og_description": "Fine combed woolen sox for those who love your foot",
   "$publicly_indexable": false,
   "$price": 80.2,
   "$locally_indexable": true,
   "$quantity": 5,
   "$sku": "110112467",
   "$product_name": "Woolen Sox",
   "$product_brand": "Nike",
   "$product_category": "Apparel & Accessories",
   "$product_variant": "Xl",
   "$rating_average": 3.3,
   "$rating_count": 5,
   "$rating_max": 2.8,
   "$creation_timestamp": 1499892854966
}];

var customer_event_alias = "my custom alias";

branch.logEvent(
   "VIEW_ITEMS",
   event_and_custom_data,
   content_items,
   customer_event_alias,
   function(err) { console.log(err); }
);

自订活动

  • 注册自定义事件

  • 这些事件命名open ， close ， install ，和referred session 都是Branch预留的

  • 最好在跟踪事件之前跟踪用户以将自定义事件与用户相关联

  • 使用 Branch 控制面板进行验证

❗️

自定义事件名称

名称custom event 由Branch保留。请确保您为自定义事件指定一个实际名称。

强烈建议使用不超过40个字符，仅包含字母，数字，连字符，空格和下划线且不要以连字符开头的自定义事件名称。

var custom_data = {
   "Custom_Event_Property_Key1": "Custom_Event_Property_val1",
   "Custom_Event_Property_Key2": "Custom_Event_Property_val2"
};

branch.logEvent(
    event,
    custom_data,
    callback (err)
);

生命周期事件

生命周期事件可以描述为用户进入应用程序以继续进行过程的事件。当用户完成用户个人资料，注册或教程时，这些事件可以应用于游戏应用程序以及非游戏应用程序。

var event_and_custom_data = {
   "transaction_id": "tras_Id_1234",
   "description": "Preferred purchase",
   "registration_id": "12345"
};

var customer_event_alias = "my custom alias";

branch.logEvent(
   "COMPLETE_REGISTRATION",
   event_and_custom_data,
   content_items,
   customer_event_alias,
   function(err) { console.log(err); }
);

处理监听事件

  • 订阅和取消订阅Branch事件
// all Branch events
branch.addListener(listener);

branch.addListener('willShowJourney', listener);

branch.removeListener(listener);
Key用途
willShowJourneyJourney（路径图谱）即将显示。
didShowJourneyJourney（路径图谱）的入口动画已经完成，正在向用户显示。
willNotShowJourneyJourney（路径图谱）将不会显示，也不会产生任何其他事件。
didClickJourneyCTA用户点击了 Journey（路径图谱）的 CTA 按钮。
didClickJourneyClose用户点击了 Journey（路径图谱）的关闭按钮。
willCloseJourneyJourneys（路径图谱）关闭动画已开始。
didCloseJourneyJourney（路径图谱）的关闭动画已经完成，用户将无法再看到。
didCallJourney关闭当开发人员调用branch.closeJourney（）以关闭Journey时发出。

处理Firebase应用程序索引

  • 在您的网站上插入Firebase App Indexing标签，这将帮助Google将您的应用中的内容和表面内容索引到Google搜索

    • 例如：
<link rel="alternate" href="android-app://{androidPackageName}/{androidURL}?{branch_tracking_params_and_additional_deep_link_data}"/>
<link rel="alternate" href="ios-app://{iosAppId}/{iosURL}?{branch_tracking_params_and_additional_deep_link_data}"/>

  • 如果未指定上述可选参数，Branch将尝试使用页面'的App Links标签构建Firebase App Indexing标签。或者，如果指定了可选参数，但您的网页上已经存在Firebase App Indexing标签，则将Branch跟踪参数附加到这些标签的末尾，并忽略传递给Branch.autoAppIndex() 。

  • 可以在您的分支仪表板上找到与Google尝试通过这种方法为您的应用内容编制索引相关的分析，其中通道为Firebase App Indexing ，功能为Auto App Indexing

branch.autoAppIndex({
  iosAppId:'123456789',
  iosURL:'example/home/cupertino/12345',
  androidPackageName:'com.somecompany.app',
  androidURL:'example/home/cupertino/12345',
  data: {
    "walkScore": 65,
    "transitScore": 50
  }
}, function(err, data) {
  console.log(err, data);
});
Key用途
"androidPackageName"Android App '的包名称
"androidURL"您的Android应用的自定义方案，例如： example/home/cupertino/12345 其中example 是应用'的URI方案）和home/cupertino/12345 路由到应用中唯一内容的路线
"iosAppId"iOS应用程序的iTunes App Store ID
"iosURL"针对您的iOS应用的自定义方案，例如： example/home/cupertino/12345
"data"您想要传递给应用程序的任何其他深度链接接数据

启用/禁用用户跟踪

  • 为了帮助我们的客户遵守GDPR和其他限制某些用户收集数据的法律，我们将Web SDK更新为“不跟踪”模式。这样，如果用户指示他们希望保留在您网站上的私密性，或者如果您确定不应该跟踪特定用户，则可以继续使用Branch Web SDK（例如，用于创建Branch链接），同时没有跟踪该用户。此状态是持久性的，这意味着它已在网站的浏览器会话中为用户保存。也可以在所有用户的特定链接或Branch链接中启用此设置。

  • 要在初始化期间启用“不跟踪模式”，请在初始化期间将tracking_disabled 标记（值为true ）包括在选项中：

branch.init( 'BRANCH_KEY',
        {
            ‘tracking_disabled’ : true
        }
);
  • 要在初始化后启用“不跟踪模式”，请调用disableTracking(true) 。如果不带任何参数调用disableTracking() ，它将默认为disableTracking(true) 。使用disableTracking(false) 恢复跟踪。

3个月前更新

推荐的后续步骤

Web SDK常见问题解答

Web高级功能

建议的编辑仅限于API参考页

您只能建议对Markdown正文内容进行修改，而不能建议对API规范进行修改。