高级旅程配置

Journeys Website Redirect Options

You can configure your Journeys banner to redirect users to a website by doing the following:

Configure Your Redirect Keys

  • $android_url - Controls where the journey sends Android users who do not have the app installed; otherwise user will be deep linked into app if installed.
  • $ios_url - Controls where the journey sends iOS users who do not have the app installed; otherwise user will be deep linked into app if installed.
  • $fallback_url - Controls where the journey sends users who do not have the app installed; otherwise user will be deep linked into app if installed.
  • $journeys_cta - Controls where the journey link will redirect to. This does not impact universal link or app ink behavior.
    • User is redirected to the provided location regardless of whether or not they have the app installed.
      • For example, redirect all Journeys clicks to mobile web OR deep link users to a different app for cross promotion.
    • This key overrides all others.
    • NOTE: Removes the ability to track Journeys click-through rates, as the customer’s link will be used for the CTA. Branch will not get clicks, and thus it will not be able to attribute installs, opens or conversion events.

Setup via Dashboard

When configuring your Journeys Template:

  • On the VIEW EDITOR tab, click the CTA button in the UI of the template you've chosen.
  • Add key-value pairs in the DEEP LINK DATA section.
  • Click Save&Close.

Setup via Web SDK

Use .setBranchViewData() to programmatically set one or more of the above redirects within the data array

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

旅途形象推荐

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

全页图片

“整页旅程”有点棘手,因为模板本身可以响应手机的尺寸。为了解决这些可能变化的尺寸,必须在使用的图像中内置一些出血。

背景位置

center

背景尺寸

cover

维度

512x1024像素

主要内容领域

414x736px

部分页面图片

分页旅程可能更容易解释,因为如果需要,模板本身仅响应宽度的尺寸,或者仅响应视图高度的百分比。为了解决这些可能变化的尺寸,必须在使用的图像中内置一些出血。

固定高度

背景位置

中心

背景尺寸

覆盖

示例尺寸

512x321px

主要内容领域

350x321px

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

背景位置

顶尖中心

背景尺寸

覆盖

示例尺寸

512x321px

主要内容领域

414x250像素

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

背景位置

底部中心

背景尺寸

覆盖

示例尺寸

512x321px

主要内容领域

414x250像素

应用程序图标图像

推荐尺寸:180x180px

Dynamic Journeys Layout Customization

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

链接数据密钥示例值
$journeys_button_get_has_app当前安装应用程序时的行动调用按钮"Open App"
$journeys_button_get_no_app当前安装应用程序时的行动调用按钮。"Install App"
$journeys_titleJourney(路径图谱)的标题或主要文本"Download Appsolutely today"
$journeys_description这是框架中的描述或副标题"This app is disrupting apps"
$journeys_icon_image_url应用程序图标显示在布局中"https://mysite.com/image.png"

请注意,并非所有模板都支持全部重写键。例如,浮动按钮不支持标题、描述或图标图像 URL(浮动按钮将支持下面详细介绍的自定义流标记)。如果要呈现模板,但您指定的键不存在,则我们只需要在呈现模板时忽略它。

动态 Journeys(路径图谱)布局自定义的自定义标记

除了使用预定义的键 (例如$ journeys_title)来动态自定义旅程的外观/内容外,还可以使用自定义的液体标签。设置Journeys模板时,可以在视图编辑器和CSS编辑器中插入自定义标签。然后,您可以使用setBranchViewData()为这些标签动态提供值。您还可以将这些值静态地嵌入到带有“ 分支元标记”的页面上。

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

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

{{ key_name | default_value }}

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

{{ fontSize | 12px }}

图像图像

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

{{ adjective | best }}

图像图像

然后,要动态更新“ fontSize”和“形容词”变量的值,可以使用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" />

Journeys Customization for Specific Screen Sizes (CSS)

There is an ability to customize banners for specific screen sizes or even potentially, specific devices, through the use of CSS @media queries. This is a feature of modern browsers and allows you to add logic and apply CSS formats based on the parameters provided by the browser.

⚠️This requires direct CSS knowledge and testing of changes is recommended prior to going live.

  1. You can choose to do this at the #branch-banner-iframe container level or at the individual #branch-banner objects level.
  2. Determine what property changes you want to make and tied to what available @media query parameters. For example:
    • You want to make the title, stars, reviews, and icon smaller for smaller screen devices.
    • You might want to provide special formatting for a very specific family of devices.
  3. Translate your logic into CSS code. Use resources on the web if you are unfamiliar with the syntax:
@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. Use the test feature to preview the changes in a separate browser instance while emulating different device models/sizes to ensure the banner renders as intended. Inspect the CSS of the page if necessary to validate these properties are reflected in the real banner.
  2. Lastly, make sure your logical operators does not have any loopholes or cases left without proper CSS formatting. One approach is an inverse block that reads: @media not screen and (min-device-width: 1px) and (max-device-width: 350px) { to catch all other screen sizes the only block above ignores.

3 天前更新



高级旅程配置


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

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