Journeys & iOS Safari Banner Compatibility

If you have iOS Universal Links enabled on your main domain, you should see Apple's Smart App Banners along with your Journeys banner. This can lead to customer confusion on which call to action to interact with to get to your mobile app.

In order to maximize conversion while maintaining full compatibility of Journeys and Universal Links, we recommend utilizing a Floating Pill Button for your Journeys campaign.

Journeys 网站重定向选项

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

配置您的重定向 Key

• $android_url —控制 Journey 将未安装应用的 Android 用户发送到何处；不然，用户将被深度链接到应用（如果已安装）。
• $ios_url —控制 Journey 将未安装应用的 iOS 用户发送到何处；不然，用户将被深度链接到应用（如果已安装）。
• $fallback_url — 控制 Journey 将未安装应用的 iOS 用户发送到何处；如果已安装，用户将被深度链接到应用。
• $journeys_cta - Controls where the journey link will redirect to.
  • 无论用户是否安装了应用，都会将用户重定向到提供的位置。
    • 例如，将所有 Journey 的点击重定向到移动网络，或将用户的深度链接重定向到其他应用以进行交叉推广。
  • 该 key 将覆盖所有其他 key。
  • 注意：由于客户的链接将用于 CTA，因此无法追踪 Journeys 的点击率。Branch 将不会获得点击数据，因此将无法对安装、打开或转化事件进行归因。

通过操作后台 (Dashboard)设置

When configuring your Journeys Template:

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

通过 Web SDK 设置

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

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

Journeys 图片推荐

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

图像格式要求

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

全页图片

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

部分页面图片

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

固定高度

可变高度（视图高度的33％）—顶部

可变高度（视图高度的33％）—底部

应用图标图像

推荐尺寸：180x180px

插页式广告 6

广告横幅高横幅底部 1

广告横幅高横幅顶部 1

模板 3

模板 4

动态 Journeys 布局自定化

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

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

动态 Journeys 布局自定义标签

In addition to using pre-defined keys (e.g. $journeys_title) to dynamically customize the appearance/content of a Journey, you can use custom liquid tags. Custom tags can be inserted in both the View Editor and the CSS Editor when you’re setting up a Journeys template. Then, you can use setBranchViewData() to dynamically provide values for these tags. You can also embed those values statically on a page with Branch Meta Tags.

Note that if you include custom liquid tags in your templates and also set a value for a pre-defined key (e.g. $journeys_title) in setBranchViewData(), the value of the pre-defined key will take precedence.

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

{{ key_name | default_value }}

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

{{ fontSize | 12px }}

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

{{ adjective | best }}

Then, to dynamically update values for the “fontSize” and “adjective” variables, you would set values for those variables using setBranchViewData()：

branch.init(...);
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. You can choose to do this at the #branch-banner-iframe container level or at the individual #branch-banner objects level.
2. 确定要进行哪些属性更改并将其与可用的 @media 查询参数绑定。例如：
   • 您需要使用小号标题，星号，评论和图标，以适用于较小的屏幕设备。
   • 您需要非常特定的设备系列提供特殊的格式。
3. 将您的逻辑转换为 CSS 代码。如果您不熟悉语法，请使用网络上的资源：
   • https://developer.mozilla.org/en-US/docs/Web/CSS/@media
   • 如果需要，可以在网络搜索 “@media standard queries” 并找到一些针对特定设备型号的文章
   • 例如，对于报告屏幕宽度为1px至350px的浏览器，请设置以下 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;
  }

4. 使用测试功能可在单独的浏览器实例中预览更改，同时模拟不同的设备型号/尺寸，以确保广告横幅可以按预期呈现。如有必要，请检查页面的 CSS 以验证这些属性是否反映在实际广告横幅中。
5. 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.