✕
筛选项
主页指南
提交工单Branch 操作后台 (Dashboard)Branch 大学Log In
提交工单Branch 操作后台 (Dashboard)Branch 大学

Accelerated Mobile Pages（AMP）Journeys

概述

Accelerated Mobile Pages (AMP) are a way to build pages that serve static content so that they load in Google search results much faster. Google uses AMP to quickly serve content on mobile devices without users having to click through to a website to view the content, and AMP pages often appear at the top of mobile search results.

AMP 页面的设计使用户很难回到除 Google 搜索之外的任何地方，也难以将用户转化到您的网站或应用。借助与 AMP 兼容的 Journeys，您可以将来自 Google 搜索结果的移动网络流量转化到您的应用，并利用 AMP 页面带来的额外流量。 Select Journeys 模板可以显示在与AMP 兼容的网站上。

先决条件

  • To host AMP Journeys and show in Google search as an AMP page, your webpage must be AMP-compatible.
  • Journeys uses your alternate domain for Universal Links. Make sure you include your xxxx-alternate.app.link domain in your Associated Domains.

设置

  1. Add the Branch AMP SDK to your site. The AMP SDK consists of 2-3 snippets that you can insert into your AMP page. Add the following snippet between the AMP page’s <head></head> tags:
<style amp-custom>#branch-amp-journey{bottom:0;left:0;width:100%;height:77px;position:fixed;}.hideme{width:100%;height:77px;left:24px;background-color:none;position:fixed;}.close{width:24px;height:100%;left:0;z-index:10000;background-color:none;position:fixed;}.branch-amp-journey-inner{position:relative;width:100%;height:100%;z-index:9999;}.donotdisplay{display:none;}</style>
  1. Modify the following snippet by replacing DOMAIN_HERE with your xxxx.app.link Branch link domain (do not use a custom subdomain), and BRANCH_KEY_HERE with your Branch API key - in both the amp-list tag and the amp-iframe tag. You can find these in Link Settings and Account Settings.
<amp-list tabindex=0 role="" on="tap:branch-amp-journey.hide" id="branch-amp-journey" src="https://DOMAIN-HERE/branch-amp-journeys-pre?branch_key=BRANCH_KEY_HERE&__aj_cid=CLIENT_ID(_s)&__amp_viewer=VIEWER&__aj_source_url=SOURCE_URL&__aj_canonical_url=CANONICAL_URL&__aj_v=1.0.0" layout=fixed-height height="77px"><template type="amp-mustache" id="journey-template"><a class="close" on="tap:branch-amp-journey.hide"></a><div class="hideme" ></div><amp-iframe class="branch-amp-journey-inner {{do_not_display}}" layout="fixed-height" height="77px" resizable src="https://DOMAIN-HERE/branch-amp-journeys?branch_key=BRANCH_KEY_HERE&__aj_cid={{__aj_cid}}&__aj_source_url={{__aj_source_url}}&__aj_canonical_url={{__aj_canonical_url}}&_audience_rule_id={{_audience_rule_id}}&_branch_view_id={{_branch_view_id}}&__aj_v=1.0.0" sandbox="allow-scripts allow-top-navigation allow-same-origin" frameborder="0"><div overflow></div></amp-iframe></template></amp-list>
  1. From there, add the modified snippet between the <body></body> tags of your AMP page, preferably near or at the bottom.
  2. Lastly, if you do not already have the following AMP scripts on your page, add them between the AMP page's <head></head> tags:
<script async src="https://cdn.ampproject.org/v0/amp-list-0.1.js" custom-element="amp-list"></script><script async src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js" custom-template="amp-mustache"></script><script async src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" custom-element="amp-iframe"></script>

📘

包括用于 SEO 和深度链接的规范 URL

Google recommends that on your AMP page, you include a reference to the canonical URL of the non-AMP page with the same content. For example, you should include a tag like this in the <head></head> section of your AMP page: <link rel="canonical" href="https://example.com/article.html">. This helps make your AMP page discoverable, and likely helps ensure that SEO information is shared between these two pages. Additionally, Branch automatically embeds the canonical URL in the Journey link data, leading to better identification of content and the ability to use this key for deep linking.

创建针对您 Audience 的 AMP Web Journey

1. 选择 Audience

  1. AMP Journeys can be created as part of the normal Journeys creation flow. You can target users on AMP pages by checking the box AMP Web on the Select Audience step:

  1. 点击 Save & Continue 配置您的 Journey 模板和视图。

2. 配置视图

  1. 当您从第 Configure Views 步点击 Select Template 时 ，应该已经默认选择了 standard bottom banner 视图类型。这是 AMP 上唯一支持的模板，因为 Google 要求广告横幅需要显示在 AMP 页面的前75％。
  2. 将鼠标悬停在模板上，然后点击 Create 。
  3. 自定义模板，完成后请点击Save & Continue 。

3. 验证&测试

  1. On the Validate & Test phase, you will see AMP-specific messages if you have targeted AMP Web users on the Select Audience step.

错误信息&问题排查

AMP Journeys 的高级配置

使用 URL 定位受众

With AMP, Google will serve your page from the Google AMP cache. This means that the URL that serves your AMP page will look something like https://www.google.com/amp/s/www.example.com/amp/doc.html. However, Branch passes through your original source URL, and this is what you should use for audience targeting. For the advanced audience filter Is viewing a page URL, you'll want to use the original URL where you host the AMP page. In this example, that would be https://www.example.com/amp/doc.html。

AMP 的深度链接

您可以通过两种方式在 AMP 上使用深度链接数据配置链接：

  1. 将查询参数添加到 AMP SDK 中的 Branch Link
  2. 将深度链接数据添加到操作后台 (Dashboard)的 Journey 中

📘

使用 $canonical_url 进行深度链接

AMP Journeys, along with regular Journeys and the Quick Link Creator, automatically embeds $canonical_url in your link data based on meta tags on your web or AMP page. If you use this key to route to specific content in your app, you do not have to add anything extra for AMP.

在 AMP SDK 中添加查询参数

To deep link to specific content in your app, you can add query parameters to your Branch link within the amp-iframe. Here is what the amp-iframe looks like without any query parameters:

<amp-iframe class="branch-amp-journey-inner {{do_not_display}}" layout="fixed-height" height="77px" resizable src="https://DOMAIN-HERE/branch-amp-journeys?branch_key=BRANCH_KEY_HERE&__aj_cid={{__aj_cid}}&__aj_source_url={{__aj_source_url}}&__aj_canonical_url={{__aj_canonical_url}}&_audience_rule_id={{_audience_rule_id}}&_branch_view_id={{_branch_view_id}}&__aj_v=1.0.0" sandbox="allow-scripts allow-top-navigation allow-same-origin" frameborder="0"><div overflow></div></amp-iframe>

If your deep linking keys were productId and category, for example, you would add &productId=1234&category=shoes to your amp-iframe like this:

<amp-iframe class="branch-amp-journey-inner {{do_not_display}}" layout="fixed-height" height="77px" resizable src="https://DOMAIN-HERE/branch-amp-journeys?branch_key=BRANCH_KEY_HERE&__aj_cid={{__aj_cid}}&__aj_source_url={{__aj_source_url}}&__aj_canonical_url={{__aj_canonical_url}}&_audience_rule_id={{_audience_rule_id}}&_branch_view_id={{_branch_view_id}}&__aj_v=1.0.0&productId=1234&category=shoes" sandbox="allow-scripts allow-top-navigation allow-same-origin" frameborder="0"><div overflow></div></amp-iframe>

如果以编程方式生成 AMP 页面，则可以同时生成这些 key 作为查询参数。

动态布自定化

You can customize the appearance of a Journey dynamically using query parameters on your amp-iframe link. These are the fields currently supported for dynamic layout customization on AMP:

链接数据 Key值例如
$journeys_button_get_has_app当前安装应用时的 CTA 键$journeys_button_get_has_app=Download
$journeys_button_get_no_app当前未安装应用时的 CTA 键$journeys_button_get_no_app=Read
$journeys_description这是框架中的描述或副标题$journeys_description=Continue+reading+in+the+app.

在 Journeys 操作后台 (Dashboard)中添加深度链接数据

您还可以将深度链接数据添加到操作后台 (Dashboard)中的 Journey 中。在 Customize Template 屏幕中，点击键，然后在深度链接数据字段中添加 key:value pairs。例如，如果您的深度链接 key 为 productId ：

AMP Journey 限制

由于 javascript 仅在 AMP 上受限制，而 cookie 在 AMP 和 iOS 上均受限制，因此 AMP Journeys 不支持所有标准 Journeys 功能。以下 Journeys 功能受到影响：

  • Event-based audience rules work within AMP only or after a Branch link click on an AMP page. Read more.
  • Only templates on the bottom of the page and equal to 76px in height show on AMP. Read more.
  • Dismiss period is not supported - after dismiss, Journeys will show again during the next AMP session.
  • Client-side javascript controls are not supported.
  • 不支持使用 open_app: true 自动打开应用。
  • Deep linking with setBranchViewData is not supported. Learn how you can deep link to content from AMP pages.
  • Branch hosted deep link data will not be scraped. This also means that the Is viewing a page with metadata key filter will not be supported.
  • 如果您的站点使用诸如 Jinja 之类的模板引擎来查找并替换动态标签（例如：{{ yourObject }}），则应确认它不会在 render 时删除 Branch 标签。特别是对于Jinja，您应该在 AMP 页面上用原始标签包装 Branch 代码：
{% raw %}
<amp-list tabindex=0 role="" on="tap:branch-amp-journey.hide" id="branch-amp-journey" src="https://DOMAIN-HERE/branch-amp-journeys-pre?branch_key=BRANCH_KEY_HERE&_aj_cid=CLIENT_ID(_s)&amp_viewer=VIEWER&aj_source_url=SOURCE_URL&aj_canonical_url=CANONICAL_URL&aj_v=1.0.0" layout=fixed-height height="77px"><template type="amp-mustache" id="journey-template"><a class="close" on="tap:branch-amp-journey.hide"></a><div class="hideme" ></div><amp-iframe class="branch-amp-journey-inner do_not_display" layout="fixed-height" height="77px" resizable src="https://DOMAIN-HERE/branch-amp-journeys?branch_key=BRANCH_KEY_HERE&aj_cid=aj_cid&aj_source_url=aj_source_url&aj_canonical_url=aj_canonical_url&_audience_rule_id=_audience_rule_id&_branch_view_id=_branch_view_id&_aj_v=1.0.0" sandbox="allow-scripts allow-top-navigation allow-same-origin" frameborder="0"><div overflow></div></amp-iframe></template></amp-list>
{% endraw %}

定位限制

由于 Cookie 在 AMP 和 iOS 上均受限制，因此 AMP Journeys 上基于事件的受众规则受 cookie 限制。实际上，这意味着针对以下规则，定位仅在 AMP 有效 ：

  • Has completed event
  • Has visited web
  • Has visited the app
  • Has the app installed

用户点击 AMP 外的 Branch Link 后，基于事件的受众规则将遵守该用户的常规网页 Cookie，并将在 AMP 和非 AMP 网页上正常工作。

广告横幅限制

目前，只有固定高度和位置（页面底部）的广告横幅与 AMP 兼容。这包括 Branch Banner Bottom 或其他自定义广告横幅，位于页面底部，高度为76px。

Updated 2 months ago