开发者中心

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 的 Persona (同人用户)数据安装了该应用。
身份可选—string 。.标识用户的唯一 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 深度链接，并通过用户选择的渠道对其进行标签

  • 使用深度链接属性

<!-- 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.init('key_live_YOUR_KEY_GOES_HERE', function(err, data) {
  console.log(err, data);
});
  • 最新数据
branch.data(function(err, data) {
  console.log(err, data);
});
  • First data
branch.first(function(err, data) {
  console.log(err, data);
});

创建 Journeys 广告横幅

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

  • 在 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");

创建二维码

📘

测试版

Web SDK 中的二维码方法处于测试状态。要添加到测试版中，请与您的客户成功经理联系。

  • 生成包含唯一 Branch Link 的自定义二维码，您可以使用该 Branch Link 进行深度链接和追踪分析。
  • 使用二维码设置（第一个参数）
  • 使用深度链接属性（第二个参数）
  • 回调是 qrCode 对象，其中包含 rawBuffer 或 base64() 函数，该函数以 base 64 编码原始缓冲区，从而使您可以直接使用它来显示图像
var qrCodeSettings = {
    "code_color":"#000000",
    "background_color": "#FFFFFF",
    "margin": 5,
    "width": 1000,
    "image_format": "png"
};
var qrCodeLinkData = {
    tags: [ 'tag1', 'tag2' ],
    channel: 'sample app',
    feature: 'create link',
    stage: 'created link',
    data: {
        mydata: 'bar',
        '$desktop_url': 'https://cdn.branch.io/example.html',
        '$og_title': 'Branch Metrics',
        '$og_description': 'Branch Metrics',
        '$og_image_url': 'http://branch.io/img/logo_icon_white.png'
    }
};
branch.qrCode(qrCodeParams, qrCodeLinkData, function(err, qrCode) {
    // qrCode.rawBuffer is the raw buffer
    // qrCode.base64() is the encoded 
    //
    // Example img tag:
    // <img src="data:image/png;charset=utf-8;base64,' + qrCode.base64() + '" width="500" height="500">
});

有关二维码 API 的更多信息，请参考本指南。

创建短信

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

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

<!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(
    form.phone.value,
    {
      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， Universal Email， Quick Link 和 Chrome Extension

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

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

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

  • 通过创建Quick Link进行验证，并在您的网页中填写web URL

示例 URLURL 数据要添加到网站的元标签
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 Link 元标记 ，并可以使用您的应用，则可以跳过这些说明。Branch 将自动获取 App Link 标签并将其添加到您的深度链接数据中。
  • 请勿使用 Google 追踪标签管理器（GTM）插入您的内容元标记。 GTM 需要在页面上加载 JavaScript，并且 Branch Link 数据抓取工具不支持 JavaScript 执行。
  • 如果出于安全考虑需要将回传服务器 IP 地址列入白名单，它们将会在此处被列出。

追踪用户

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 追踪的所有标准事件的完整列表，请参阅追踪 Commerce，Content，Lifecycle 和 Custom 自定义事件 。

Commerce Event

  • 注册自定义 Commerce Event

  • 通过 Branch 操作后台 (Dashboard)进行验证

  • 如果您在没有设定货币的情况下追踪 commerce 事件，我们则将其假设为美元。如果您使用非美元的货币追踪 commerce 事件，我们将使用最近的汇率将指定的收入转化为美元。

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

Content 事件

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

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

Custom Event

❗️

自定义事件名称

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)
);

Lifecycle Event

Lifecycle Event 事件可以描述为继续操作，用户在应用内产生的事件。当用户完成用户个人资料，注册或完成教程时，这些事件可以应用于游戏应用以及非游戏应用。

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 的 entrance animation 已经完成，正在向用户显示。
willNotShowJourneyJourney 将不会显示，也不会产生任何其他事件。
didClickJourneyCTA用户点击了 Journey 的 CTA 键。
didClickJourneyClose用户点击了 Journey 的关闭键。
willCloseJourneyJourneys close animation 已开始。
didCloseJourneyJourney close animation 已经完成，用户将无法再看到。
didCallJourneyClose当开发人员调用 branch.closeJourney()以取消 Journey 时发出。

处理 Firebase App Indexing

  • 在您的网站上插入 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 Link 标签构建 Firebase App Indexing 标签。或者，如果指定了可选参数，但您的网页上已经存在 Firebase App Indexing 标签，则 Branch 追踪参数将被附加到这些标签的末尾，并忽略传递给Branch.autoAppIndex() 的内容。

  • Google 尝试通过这种方法为您的应用内容编制索引相关的分析可在 Branch 操作后台 (Dashboard)中找到，其中渠道为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 scheme），并且 home/cupertino/12345 路由到应用中的唯一内容
"iosAppId"iOS 应用的 iTunes App Store ID
"iosURL"iOS 应用的自定义方案，例如： example/home/cupertino/12345
"data"您想要传递给应用的任何其他深度链接数据

启用/禁用用户追踪

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

  • 要在初始化期间启用 Do Not Track（不追踪）模式，请在初始化期间将tracking_disabled标记（值为true ）包括到选项中：

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

4个月前更新

后续步骤推荐

Web SDK 常见问题解答

Web 高级功能

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

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