创建 Web 快拍广告的最佳做法

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

Web 快拍是一种全屏可点击体验，让读者沉浸在内容中。出现在 Web 快拍中的广告应与 Web 快拍用户体验保持一致且连贯的设计。这可以防止用户体验产生突兀感或中断感。本指南演示如何为 Web 快拍构建广告。

Web 快拍广告原则

当前的广告格式（例如横幅和方框）与 AMP 快拍格式的整合效果不佳。经典广告速度慢、中断性强，并且在快拍体验中显得格格不入。

Web Story 广告符合以下原则

有效的 AMPHTML 广告：遵循与经典 AMPHTML 广告相同的技术规范。
视觉优先：引人入胜、醒目、以内容为导向的邀请状态。
原生：广告页面的尺寸与自然故事页面相同。
相同的互动模式：用户可以像在自然故事页面中一样继续进入下一个屏幕。
快速：广告永远不会以半加载状态出现在用户面前。

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

Web 快拍广告示例

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

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

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

模板

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

元标记数据

元标签数据指定广告符合 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 标签。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 商店页面的链接。广告响应有效负载中指定了 CTA 按钮文本枚举。

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

广告着陆页

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

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

布局

AMP Stories 是水平且全屏的。故事广告需要匹配此格式，以提供一致的用户体验。

覆盖层尺寸

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

CTA 位于底部 32 像素处，并且水平居中。它为 120 像素乘以 36 像素。

图片和视频

包含在 AMP Story 广告中的图像和视频应为 4:3 标准全屏。包含视频的广告应使用海报。海报图像的推荐尺寸为 720p (720w x 1280h)。

<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 视频，并为尚不支持 HLS 视频的浏览器指定 MP4 作为后备。HLS 执行自适应比特率流，其中可以更改视频质量以最适合用户的网络连接。

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

视频分辨率

Web Story 视频始终是垂直的（即人像视图），预期纵横比为 16:9。对视频流类型使用推荐分辨率

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

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

视频编解码器

对于 MP4，使用 H.264。
对于 WEBM，使用 VP9。
对于 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>

赞助故事

赞助故事以 URL 的形式存在于网络上，从而能够通过 AMP Story 广告上的号召性用语按钮将用户流量引导至赞助故事。赞助故事是一种 AMP 故事，但重点在于身临其境的扩展广告体验。

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