高级 Journeys (站到端引流)配置

Journeys 网站重定向选项

您可以通过执行以下操作来配置 Journeys (站到端引流)广告横幅以将用户重定向到网站:

配置您的重定向 Key

  • $android_url —控制 Journey 将未安装应用的 Android 用户发送到何处;不然,用户将被深度链接到应用(如果已安装)。
  • $ios_url —控制 Journey 将未安装应用的 iOS 用户发送到何处;不然,用户将被深度链接到应用(如果已安装)。
  • $fallback_url — 控制 Journey 将未安装应用的 iOS 用户发送到何处;如果已安装,用户将被深度链接到应用。
  • $journeys_cta — 控制 Journey 链接将重定向到的位置。这不会影响 Universal Link 或应用链接的行为。
    • 无论用户是否安装了应用,都会将用户重定向到提供的位置。
      • 例如,将所有 Journey 的点击重定向到移动网络,或将用户的深度链接重定向到其他应用以进行交叉推广。
    • 该 key 将覆盖所有其他 key。
    • 注意:由于客户的链接将用于 CTA,因此无法追踪 Journeys 的点击率。Branch 将不会获得点击数据,因此将无法对安装、打开或转化事件进行归因。

通过操作后台 (Dashboard)设置

配置 Journeys 模板时:

  • 查看编辑器选项卡上,点击所选模板的 UI 中的 CTA 键。
  • DEEP LINK DATA部分中添加 key-values pairs。
  • 点击 Save&Close

通过 Web SDK 设置

使用 .setBranchViewData() 以编程方式在数据数组中设置一个或多个上述重定向

  • branch.setBranchViewData({data: {'$journeys_cta': 'https://example.com',}});

Journeys 图片推荐

在将移动网络用户引入您的应用方面,Journeys 非常有效。但要获得最佳效果,Journeys 必须看起来并适合页面。这里的难点在于,Journeys 可以有各种各样的形状和大小,但是本指南应该可以帮助您为一些最常用的旅程模板做出一些尺寸决定。

图像格式要求

在上传背景图像模板时,“上传图像”工具支持的格式包括 jpeg 、png、 gif 、pdf、mp4 或 mov。

全页图片

Full Page Journey 可能不太容易实现,因为模板本身可以响应手机的尺寸。为了适应这些可能变化的尺寸,必须在使用的图像中内置一些 bleed。

背景位置

中心

背景尺寸

覆盖

维度

512x1024 像素

主要内容领域

414x736px

部分页面图片

Partial Page Journey 可能更容易使用,因为模板本身可以动态适应宽度的尺寸,或者根据视图高度的百分比作出响应。为了解决这些可能变化的尺寸,必须在使用的图像中内置一些 bleed。

固定高度

背景位置

中心

背景尺寸

覆盖

示例尺寸

512x321px

主要内容领域

350x321px

可变高度(视图高度的33%)—顶部

背景位置

顶尖中心

背景尺寸

覆盖

示例尺寸

512x321px

主要内容领域

414x250px

可变高度(视图高度的33%)—底部

背景位置

底部中心

背景尺寸

覆盖

示例尺寸

512x321px

主要内容领域

414x250px

应用图标图像

推荐尺寸:180x180px

插页式广告 6

最小尺寸

背景图片尺寸

410 x 732px

App 图标尺寸

78 x 40px

App 广告横幅尺寸

不适用

广告横幅高横幅底部 1

最小尺寸

背景图片尺寸

410 x 343px

App 图标尺寸

不适用

App 广告横幅尺寸

410 x 151px

广告横幅高横幅顶部 1

最小尺寸

背景图片尺寸

375 x 360px

App 图标尺寸

不适用

App 广告横幅尺寸

375 x 151px

模板 3

最小尺寸

背景图片尺寸

375 x 176px

App 图标尺寸

63 x 63px

App 广告横幅尺寸

不适用

模板 4

最小尺寸

背景图片尺寸

410 x 732px

App 图标尺寸

63 x 63px

App 广告横幅尺寸

不适用

动态 Journeys (站到端引流)布局自定化

我们现在支持使用案例,您可以根据推荐网络会话的链接自定义 Journey 的外观。因此,您可以创建一个 Branch Link,其中包含一组定义的 Key 和值,这些 Key 和值将在用户从此链接推荐到您的网站时更改属性(例如,标题或图像)。

链接数据 Key示例值
$journeys_button_get_has_app当前安装应用时的 CTA 键"Open App"
$journeys_button_get_no_app当前安装应用时的 CTA 键"Install App"
$journeys_titleJourney 的标题或主要文本"Download Appsolutely today"
$journeys_description这是框架中的描述或副标题"This app is disrupting apps"
$journeys_icon_image_url应用图标显示在布局中"<a href="https://mysite.com/image.png" target="" title="">https://mysite.com/image.png"

请注意,并非所有模板都支持全部覆盖的 key。例如,悬浮键不支持标题、描述或图标图像 URL(悬浮键支持下面详细介绍的自定义流标签)。如果要呈现模板,但您指定的键不存在,可以选择在呈现模板时忽略它。

动态 Journeys 布局自定义标签

除了使用预定义 key (例如 $journeys_title)来动态自定义 Journey 的形式/内容外,还可以使用自定义的动态标签。设置 Journeys 模板时,可以在视图编辑器以及 CSS 编辑器中插入自定义标签。然后,您可以使用 setBranchViewData() 为这些标签动态提供值。您还可以将这些值静态地嵌入到带有 Branch 元标签的页面上。

请注意,如果您在模板中包含自定义动态标签,并且为预定义 key(例如 $journeys_title)设置一个值 setBranchViewData() ,则该预定义 key 的值将被优先。

自定义动态标签的格式如下所示。请注意,必须为包含的每个自定义标签指定默认值:

{{ key_name | default_value }}

例如,如果要在 CSS 中添加自定义动态标签以动态控制其中一个 Journeys 标题的字体大小,则可以使用如下所示的标签:

{{ fontSize | 12px }}

图片图片

如果要在模板文本中添加自定义动态标签,则可以使用如下所示的标签:

{{ adjective | best }}

图片图片

然后,要动态更新 “fontSize” 和 “adjective” 变量的值,可以使用 setBranchViewData() 设置这些变量的值:

branch.setBranchViewData({
    data: {
        'fontSize': '20px',
        'adjective': 'most entertaining',
    }
});

或者,您可以通过在页面上嵌入 Branch 元标签来设置值:

<meta name="branch:deeplink:fontSize" content="20px" />
<meta name="branch:deeplink:adjective" content="most entertaining" />

针对特定屏幕尺寸(CSS)的 Journeys (站到端引流)自定义

通过使用 CSS @media 查询项,可以为特定的屏幕尺寸甚至是特定的设备自定义广告横幅。这是现代浏览器的功能,可以允许您根据浏览器提供的参数添加逻辑并应用 CSS 格式。

⚠️需要您具有详尽的 CSS 知识,建议在投入使用之前对更改进行测试。

  1. 您可以选择在 #branch-banner-iframe container 级别或在单独的 #branch-banner objects 级别执行此操作。
  2. 确定要进行哪些属性更改并将其与可用的 @media 查询参数绑定。例如:
    • 您需要使用小号标题,星号,评论和图标,以适用于较小的屏幕设备。
    • 您需要非常特定的设备系列提供特殊的格式。
  3. 将您的逻辑转换为 CSS 代码。如果您不熟悉语法,请使用网络上的资源:
@media only screen and (min-device-width: 200px) and (max-device-width: 350px) {
  #branch-banner .branch-banner-title {
    font-weight: bold;
    color: #333333;
    padding-bottom: 1px;
    font-size: 10px;
  }
  #branch-banner .branch-banner-stars {
    display: inline-block;
    color: rgba(255, 180, 0, 1);
    letter-spacing: -2px;
    font-size: 14px;
    margin-left: -2px;
  }
  #branch-banner .branch-banner-reviews {
    font-size: 10px;
    color: #777;
    display: inline-block;
    margin-left: 4px;
    position: relative;
    top: -1px;
  }
  #branch-banner .branch-banner-icon img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  #branch-banner .branch-banner-icon {
    float: left;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    padding: 10px 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 2;
  }
  1. 使用测试功能可在单独的浏览器实例中预览更改,同时模拟不同的设备型号/尺寸,以确保广告横幅可以按预期呈现。如有必要,请检查页面的 CSS 以验证这些属性是否反映在实际广告横幅中。
  2. 最后,请确保您的逻辑运算符在不存任何漏洞或缺少正确 CSS 格式的情况。一种方法是读取以下内容的逆向块: @media not screen and (min-device-width: 1px) and (max-device-width: 350px) { 以捕获上面唯一块忽略的所有其他屏幕尺寸。

25 天前更新


高级 Journeys (站到端引流)配置


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

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