Journeys on Accelerated Mobile Pages (AMP)

概述

加速移动页面(AMP) 是一种构建可提供静态内容的页面的方法,从而可以更快地将其加载到Google搜索结果中。 Google使用AMP来快速在移动设备上提供内容,而用户不必点击网站即可查看内容,并且AMP页面通常出现在移动搜索结果的顶部。

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

先决条件

  • 要托管AMP Journeys并在AMP页面上显示在Google搜索中,您的网页必须与 AMP 兼容。
  • Journeys将您的备用域用于通用链接。确保将xxxx-alternate.app.link 域包括在关联域

设置

  1. 将Branch AMP SDK添加到您的站点。 AMP SDK包含2-3个摘要,您可以将其插入AMP页面。在AMP页面的<head></head> 标签之间添加以下代码段:
 <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. 通过将DOMAIN_HERE 替换xxxx.app.link xxxx.app.link 分支链接域( 不要使用自定义子域 ),将BRANCH_KEY_HERE 替换为Branch API密钥(在amp-list 标记和amp-iframe 标记中)来修改以下代码段。您可以在链接设置帐户设置找到它们。
<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. 从那里,在AMP页面的<body></body> 标签之间添加修改后的代码段,最好在底部附近或底部。
  2. 最后,如果您的页面上还没有以下AMP脚本,请将它们添加到AMP页面' s <head></head> 标记之间:
<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建议在AMP页面上,包含对具有相同内容的非AMP页面的规范URL的引用。例如,您应该在AMP页面的<head></head> 部分中包含这样的标签: <link rel="canonical" href="https://example.com/article.html"> 。这有助于使您的AMP页面可被发现,并可能有助于确保在这两个页面之间共享SEO信息。此外,Branch自动将规范的URL嵌入到Journey链接数据中,从而更好地标识内容,并具有使用此密钥进行深度链接的能力。

创建针对您的受众群体中AMP Web的旅程

1.选择受众群体

  1. 可以将AMP Journeys创建为常规 Journeys创建流程 。您可以通过在“选择受众群体”步骤中选中方框AMP Web 来将用户定位到AMP页面:
  1. 单击Save & Continue 配置您的旅程模板和视图。

2.配置视图

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

3.验证&测试

  1. Validate & Test 阶段,如果在 Select Audience 步骤中将AMP Web 用户作为目标,则将看到AMP特定的消息。

错误信息&故障排除

AMP Journeys的高级配置

使用URL定位受众

借助AMP,Google将从Google AMP缓存中为您的页面提供服务。这意味着为您的AMP页面提供服务的URL看起来像https://www.google.com/amp/s/www.example.com/amp/doc.html 。但是,Branch会通过您的原始源URL进行传递,这就是您应将其用于受众群体定位的方法。对于高级受众群体过滤器Is viewing a page URL ,您'将要使用承载AMP页面的原始URL。在此示例中,该值为https://www.example.com/amp/doc.html

与AMP的深度链接接

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

  1. 将查询参数添加到AMP SDK中的“Branch”链接
  2. 将深度链接接数据添加到仪表板中的“Journey”中

使用$ canonical_url进行深度链接接

AMP Journeys以及常规Journeys和Quick Link Creator会根据您的Web或AMP页面上的元标记自动将$canonical_url 嵌入到链接数据中。如果您使用此键来路由到应用程序中的特定内容,则无需为AMP添加任何额外内容。

在AMP SDK中添加查询参数

要深度链接接到应用程序中的特定内容,可以在amp-iframe内将查询参数添加到Branch链接中。没有任何查询参数的amp-iframe 如下所示:

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

例如,如果您的深度链接接键是productIdcategory ,则可以将amp-iframe&productId=1234&category=shoes

<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页面,则可以同时生成这些键作为查询参数。

动态布局定制

您可以使用amp-iframe 链接上的查询参数动态地自定义Journey (路径图谱) 的外观。这些是AMP上的动态布局自定义当前支持的字段:

链接数据密钥
$journeys_button_get_has_app 当前安装应用程序时的行动调用按钮 $journeys_button_get_has_app=Download
$journeys_button_get_no_app 当前安装应用程序时的行动调用按钮。 $journeys_button_get_no_app=Read
$journeys_description 这是框架中的描述或副标题 $journeys_description=Continue+reading+in+the+app.

在“journeys”仪表板中添加深度链接接数据

您还可以将深度链接接数据添加到仪表板中的“Journey (路径图谱) ”中。在Customize Template 屏幕中,点击按钮,然后在深度链接接数据字段中添加key:value对。例如,如果您的深度链接接密钥为productId

AMP旅程限制

由于javascript仅在AMP上受限制,而cookie在AMP和iOS上均受限制,因此AMP Journeys(网站向App引流解决方案) 不支持所有标准Journeys(网站向App引流解决方案) 功能。以下Journeys(网站向App引流解决方案) 功能受到影响:

  • 基于事件的受众规则仅在AMP中起作用,或者在“Branch”链接点击AMP页面后才起作用。 阅读更多
  • AMP上仅显示页面底部且高度等于76px的模板。 阅读更多
  • 不支持解雇期解雇后,journeys将在下一个AMP会话中再次显示。
  • 不支持客户端javascript控件
  • 不支持使用open_app:true自动打开应用程序。
  • 不支持与setBranchViewData 深度链接。 了解如何深度链接接到AMP页面的内容。
  • Branch托管的深度链接接数据将不会被抓取。这也意味着将不支持正在使用元数据键过滤器查看页面。
  • 如果您的站点使用类似于Jinja的模板引擎来查找并替换液体标签(例如: {yourObject} ),那么您应该确认它不会在渲染时删除Branch标签。特别是对于Jinja,您应该在AMP页面上用原始标签包装分支代码:
{% 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 有效

  • 已完成事件
  • 已访问网站
  • 已访问应用程序
  • 已安装应用程序

用户点击AMP外部的“Branch”链接后,基于事件的受众规则将遵守该用户的常规Web Cookie,并将在AMP和非AMP Web上正常工作。

标语限制

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

更新25 天前

Journeys on Accelerated Mobile Pages (AMP)


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

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