AMP

电子商务 AMP 入门

未分类

AMP 项目首次推出时,最初的使用案例和功能开发专注于构建 AMP 以支持新闻和博客内容。然而,AMP 项目的雄心始终是让任何类型的移动内容的消费变得比我们以前看到的更好、更快。理想情况下,该格式应允许任何人跨越多个垂直领域(从新闻到零售再到旅游及其他)创建高性能网站。

通过迄今为止的非凡进步和开源协作,我们构建了 AMP,使其非常适合处理新闻和博客,但现在也适用于构建电子商务网站的许多方面。AMP 是电子商务的天然选择,因为 AMP 使网页加载速度快,而加载速度快的页面 有助于购买转化

为了更仔细地了解这一点,我们将站在典型用户的角度,浏览电子商务网站。在整个过程中,我们将重点介绍 AMP 的可立即使用和建议功能,这些功能可用于构建快速、美观的购物体验。

开始之前

总体思路是,不必一次转换整个网站。我们建议分析并对网站中合理的区域进行 AMP 化。确定每个页面类型的目标和主要功能,以帮助决定从哪里开始。

AMP 有大量预构建且易于使用的组件,可实现交互式体验,如图片 轮播或收集 分析数据的工具。这些基础部分是一个良好的起点。产品描述、图片、评论和导航等内容功能现已可以在 AMP 中轻松实现。开始探索和构建原型,了解如何在 AMP 中构建网站的这些体验。

更复杂的高级场景(如购买流程)目前还无法在 AMP 中完成,但我们希望通过收集有关用例和用户流程的更多信息来探索这一功能。在此期间,请考虑是否可以通过按钮点击或类似类型的手动操作将用户转到非 AMP HTML 页面以完成购买流程。请记住,AMP 是一个开源社区项目。参与、开始开发贡献新的组件(根据需要)。该格式会随着时间的推移而变得更加丰富。

说了这么多,让我们继续了解用户的旅程。

步骤 1:浏览

product-listing-page

示例主页或类别页面

用户通常从网站主页或产品类别页面开始他们的旅程。这些是首先进行 AMP 化的出色页面,正如 eBay 在其帖子中所讨论的

这些类型的页面非常适合 AMP。内容通常是静态的,并且旨在提供可用产品的最佳展示。使用 <amp-carousel> 等功能,以提供一种针对移动设备优化的方式来浏览按子类别组织的其他产品。

步骤 2:登陆产品页面

示例产品页面

我们的用户点击了电子商务网站主页上的精选列表中的某个商品后,会进入一个经过 AMP 化的产品页面

AMP 可以帮助您创建精美的页面来展示您的产品。使用 <amp-carousel> 和 <amp-video> 元素添加醒目的英雄图片和视频。专注于电子商务激发我们构想出更多体验来支持 AMP。例如,我们正在寻求引入一个 新组件,该组件将能够展示一张可以通过从缩略图条中进行选择来更改的大图片。

对于具有更详细要求或扩展说明的部分,请使用 <amp-accordion> 标记。此外,使用 <amp-social-share> 元素允许用户分享产品链接。如果用户想要转换齿轮并浏览网站的其他一些区域,则 <amp-sidebar> 允许您在所有页面中实现导航菜单。

步骤 3:探索相关产品

产品页面上的相关产品

我们知道用户经常改变主意,有时他们最初寻找的产品并不是他们想要的,所以让我们向他们展示更多产品。

使用 AMP,有多种方法可以展示相关产品。一种方法是静态发布相关产品列表。

另一种方法是动态生成列表。为此,只需使用 <amp-list>向 JSON 端点发送 CORS 请求,该端点提供相关产品的列表。这些内容会填充到客户端上的 amp-mustache 模板中。此外,结果列表可以个性化,因为内容是针对每个请求动态生成于服务器端的。

步骤 4:个性化和理解

了解用户的偏好很重要。您可以根据他们的偏好定制内容,以提高转化率。

使用 <amp-access> 组件根据用户的身份(例如用户是否已登录)显示不同的内容块。与 <amp-list> 组件非常相似,向 JSON 端点发送请求,然后将数据显示到 amp-mustache 模板中。

要了解用户在总体层面上如何与网站互动,请使用 <amp-analytics> 组件。直接收集分析数据,或与第三方分析平台集成。AMP 支持多种流行的 分析供应商

步骤 5:支持购买

当用户准备购买并点击“购买”时,就会出现难题的最后一块。这可能是从仅限 AMP 的环境过渡到完整 HTML 的时刻。确保过渡尽可能快,并且与他们迄今为止的体验保持一致。

如果您的网站是渐进式网络应用 (PWA),那么 AMP 以 <amp-install-serviceworker> 的形式提供了一个理想的桥梁。这允许您的 AMP 页面为您的域名安装一个服务工作者,无论用户在哪里查看 AMP 页面。然后,您可以预先开始缓存 PWA 中的内容,以便在转换发生时,所有所需的内容都已缓存,从而保持体验快速且让客户参与其中。

步骤 6:牢记缓存

AMP 旨在在智能缓存模型中工作。这使将流量引荐至 AMP 页面的平台能够使用缓存和预渲染来快速加载网页——几乎是即时的。但是,这也意味着您可能会看到较少的流量进入您自己最初托管 AMP 页面的来源,并会看到通过 AMP 缓存提供的页面代理版本来平衡流量。在分析流量和参与度时,牢记这些因素非常重要。

* * *

以下再次提供 AMP By Example 页面链接,您可以在其中看到上面图片中突出显示的几个示例页面的示例

希望本演练让您了解当前可用的内容,但这绝不是所有可能的内容。我们很乐意看到您正在构建内容的示例,并听取您在 GitHub 存储库中关于需要添加到 AMP 中以实现您想要创建的电子商务体验的内容的反馈。

由 Google 的开发者倡导者 Boris Farber 和 Rowan Merewood,以及 AMP 项目的产品经理 Rudy Galfi 发布