AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

创建 Web Story 广告的最佳实践

重要提示：此文档不适用于您当前选择的格式网站！

Web Story 是一种全屏可点击体验，让读者沉浸在内容中。Web Story 中出现的广告应与 Web Story UX 具有一致和连贯的设计。这可以防止出现不和谐或干扰的用户体验。本指南演示了如何为 Web Story 构建广告。

Web Story 广告原则

当前的广告格式（例如横幅和方框）与 AMP Story 格式不能很好地集成。传统的广告速度慢、干扰性强，并且在 Story 体验中显得格格不入。

Web Story 广告符合以下原则

  • 有效的 AMPHTML 广告：遵循与经典 AMPHTML 广告相同的技术规范。
  • 视觉优先：引人入胜、大胆、上下文驱动的邀请状态。
  • 原生：广告页面的尺寸与有机故事页面的尺寸相同。
  • 相同的交互模式：用户可以像浏览有机故事页面一样继续浏览下一页。
  • 快速：广告绝不会以半加载状态显示给用户。

为了与这些原则保持一致，Web Story 运行时会确定广告页面在 Web Story 中的正确位置。有关广告展示机制的更多信息，请参阅在 Web Story 中投放广告。

Web Story 广告示例

Web Story 广告是 AMPHTML 广告，但具有必需的 meta 标签数据，符合定义的布局规范和必需的 UI 元素。Web Story 广告始终包含号召性用语 (CTA) 按钮和一个广告标签，该标签以文本免责声明的形式显示在页面顶部。

AMP Story 广告示例

为了保持用户体验的一致性，Web Story 运行时负责呈现广告标签和 CTA 按钮。

重要提示 – 在 Web Story 广告中，只有 CTA 按钮可点击，因此在开发创意时请记住这一点。

模板

请参阅我们预先制作的模板以获取灵感，或作为构建创意的起点（请务必选择 story ads 芯片）。

Meta 标签数据

Meta 标签数据指定广告符合 Web Story 格式，设置 CTA 按钮文本枚举，指示按钮将用户发送到的位置以及它是什么类型的页面。

<html amp4ads>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <!-- Specifies where the user is directed -->
    <meta name="amp-cta-url" content="%%CLICK_URL_UNESC%%%%DEST_URL%%">

    <!-- Specifies the call to action button text enum -->
    <meta name="amp-cta-type" content="EXPLORE">

    <!-- Specifies what type of landing page the user is direct to -->
    <meta name="amp-cta-landing-page-type" content="NONAMP">

    <style amp4ads-boilerplate>body{visibility:hidden}</style>
    <style amp-custom>
     amp-img {height: 100vh}
    </style>
    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>

  </head>
  <body>
    <amp-img src=%%FILE:JPG1%% layout="responsive" height="1280" width="720"></amp-img>
  </body>
</html>

建议从可用的 CTA 按钮文本选项中选择 amp-cta-type tag。AMP 会在适当的时候自动本地化预定义的选项。

允许使用自定义文本，但您需要实现自己的本地化。

号召性用语按钮文本枚举

可以从预定义的一组选项配置号召性用语按钮

  • APPLY_NOW：“立即申请”
  • BOOK_NOW：“预订”
  • BUY_TICKETS：“购买门票”
  • DOWNLOAD：“下载”
  • EXPLORE：“立即探索”
  • GET_NOW：“立即获取”
  • INSTALL：“立即安装”
  • LISTEN：“立即收听”
  • MORE：“更多”
  • OPEN_APP：“打开应用”
  • ORDER_NOW：“立即订购”
  • PLAY：“播放”
  • READ：“立即阅读”
  • SHOP：“立即购买”
  • SHOWTIMES：“放映时间”
  • SIGN_UP：“注册”
  • SUBSCRIBE：“立即订阅”
  • USE_APP：“使用应用”
  • VIEW：“查看”
  • WATCH：“观看”
  • WATCH_EPISODE：“观看剧集”

注意 – 不支持指向应用的深层链接，但支持使用 http/https 指向 App Store 页面或 Google Play Store 页面的链接。CTA 按钮文本枚举在广告响应有效负载中指定。

如果需要支持新的 CTA 按钮文本枚举，请打开一个GitHub 问题。

广告着陆页

您可以为 Web Story 广告着陆页指定以下三个选项之一。

  • STORY：着陆页是一个赞助故事。
  • AMP：着陆页是一个有效的 AMP 页面。
  • NONAMP：任何其他类型的网页。

布局

AMP Stories 是水平和全屏的。要求 Story 广告与此格式匹配，以提供一致的用户体验。

叠加尺寸

广告标签覆盖广告的整个宽度上的深色渐变条，并将从顶部向下延伸 46 像素。

广告叠加层位于顶部

CTA 位于底部向上 32 像素处，并且在水平方向上居中。它的尺寸为 120 像素 x 36 像素。

CTA 按钮位于底部附近

图像和视频

AMP Story 广告中包含的图像和视频应为 4:3 标准全屏。包含视频的广告应使用 海报。海报图像的建议尺寸为 720p（720 宽 x 1280 高）。

<amp-video controls
  width="720"
  height="1280"
  layout="responsive"
  poster="images/kitten-playing.png">

  <source src="videos/kitten-playing.webm"
    type="video/webm" />
  <source src="videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

图像

背景图像可以缩放到全屏。以下 CSS 是裁剪和居中视频和图像的成功方法。

<style amp-custom>
    amp-img, amp-video {
        height: 100vh;
    }
    amp-video video {
        object-fit: cover;
    }
    amp-img img{
        object-fit: cover;
    }
</style>

视频

指定 <source> 与 src

当为 amp-video 指定来源时

示例：指定多个源文件

<amp-video id="video-page1" autoplay loop
  layout="fill" poster="https://example.com/media/poster.jpg">

  <source src="https://amp-example.com/media/movie.m3u8"
    type="application/vnd.apple.mpegurl" />
  <source src="https://amp-example.com/media/movie.mp4"
    type="video/mp4" />
</amp-video>

视频大小和长度

为了获得最佳性能，您应该努力提供不超过 4 MB 的视频。较小的文件大小可以加快下载速度，因此请尽可能保持文件较小。

视频格式

如果您只能提供一种视频格式，请提供 MP4。但是，在可能的情况下，请使用 HLS 视频，并将 MP4 指定为尚不支持 HLS 视频的浏览器的后备。HLS 执行自适应比特率流式传输，其中可以更改视频的质量以最适合用户的网络连接。

注意 – Chrome for Desktop 浏览器（即使是通过模拟）也不支持 HLS 视频格式，因此对于您的页面的任何桌面流量，都必须指定 MP4 后备。要调试 HLS 视频，您需要通过 USB 调试使用实际的移动设备。

视频分辨率

Web Story 视频始终是垂直的（即纵向视图），预期宽高比为 16:9。请使用建议的分辨率来表示视频流类型

视频流类型 分辨率
非自适应 720 x 1280 像素
自适应 720 x 1280 像素
540 x 960 像素
360 x 480 像素

注意 – 对于与 16:9 宽高比不同的移动设备，视频可能会被水平或垂直裁剪以适合视口。

视频编解码器

  1. 对于 MP4，请使用 H.264。
  2. 对于 WEBM，请使用 VP9。
  3. 对于 HLS 或 DASH，请使用 H.264。

视频质量

转码优化

您可以使用各种工具来编码视频并在编码期间调整视频的质量。以下仅举几个例子

工具 说明
FFmpeg 推荐的优化
  • 对于 MP4，请使用 -crf 23。
  • 对于 WEBM，请使用 -b:v 1M。
avconv 推荐的优化
  • 对于 MP4，请使用 -crf 23。
  • 对于 WEBM，请使用 -b:v 1M。
Shaka Packager 一个还可以输出 HLS 格式（包括播放列表）的编码器。
HLS 片段大小

确保您的 HLS 片段的大小通常不超过 10 秒的持续时间。

动画

动画在故事中有一些注意事项，例如什么是“可见”的概念。例如，在我们的“3 面板”桌面视图中，您的创意可能在页面上可见，但尚未成为中心焦点。如果所需的效果是在页面成为主要焦点时启动动画，这可能会有问题。

为了帮助解决此问题，当您的创意在所有服务环境中成为焦点时，AMP 会在您的创意的正文中添加一个特殊属性 amp-story-visible。建议您根据此信号触发动画。

示例：当页面进入焦点时，此动画将触发，并且如果用户点击故事中的另一个页面并返回，它将重新启动。

<style amp-custom>
    body[amp-story-visible] .my-animation-class {
      animation: 2s my-animation-name;
    }
</style>

赞助故事作为 Web 上的 URL 存在，可以通过 AMP Story 广告上的号召性用语按钮将用户流量驱动到赞助故事。赞助故事是一个 AMP Story，但重点是沉浸式和广泛的广告体验。

CTA 按钮指向赞助故事

请在此处阅读有关创建Web Story的更多信息。